首页 > 其他分享> 文章详细

盒子模型及边框使用（内外边距及div居中）

2022-03-28 21:33:59 阅读：145 来源： 互联网

标签：solid border 边框 color div margin 距及

盒子模型：

margin：外边距

padding：内边距

border：边框

边框：

　　边框的粗细

　　边框的样式

　　边框的颜色

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 
 8     <style>
 9 
10         /*h1,ul,li,a,body{ 都初始化*/
11         /*    !*body总有一个默认的外边距margin*!*/
12         /*    margin: 0;*/
13         /*    padding: 0;*/
14         /*    text-decoration: none;*/
15         /*}*/
16         /*border:粗细、样式、颜色*/
17         /*
18         实线：solid
19         虚线：dashed
20          */
21         #box{
22             width: 300px;
23             border: 1px solid red;
24 
25         }
26         h2{
27             font-size: 16px;
28             background-color: #0093E9;
29             line-height: 30px;
30             color: green;
31         }
32         form{
33             background: #3cbda6;
34         }
35         div:nth-of-type(1) input{
36             border: 3px solid black;
37         }
38          div:nth-of-type(2) input{
39             border: 3px dashed salmon;
40         }
41          div:nth-of-type(3) input{
42             border: 2px dashed cadetblue;
43         }
44 
45     </style>
46 </head>
47 <body>
48 
49 <div id="box">
50     <h2>会员登录</h2>
51     <form action="#">
52         <div>
53             <span>用户名：</span>
54             <input type="text">
55         </div>
56         <div>
57             <span>密码：</span>
58             <input type="text">
59         </div>
60         <div>
61             <span>邮箱：</span>
62             <input type="text">
63         </div>
64     </form>
65 </div>
66 
67 </body>
68 </html>

盒子模型

内外边距及div居中：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 </body>
10 </html><!DOCTYPE html>
11 <html lang="en">
12 <head>
13     <meta charset="UTF-8">
14     <title>Title</title>
15 
16 
17     <style>
18         /*margin 0(上下为0)  auto（左右 居中对齐）*/
19 
20         #box{
21             width: 300px;
22             border: 1px solid red;
23             margin:0 auto;
24         }
25         h2{
26             font-size: 16px;
27             background-color: #0093E9;
28             line-height: 30px;
29             color: green;
30         }
31         form{
32             background: #3cbda6;
33         }
34         input{
35             border: 1px solid black;
36         }
37 
38     </style>
39 </head>
40 <body>
41 
42 <div id="box">
43     <h2>会员登录</h2>
44     <form action="#">
45         <div>
46             <span>用户名：</span>
47             <input type="text">
48         </div>
49         <div>
50             <span>密码：</span>
51             <input type="text">
52         </div>
53         <div>
54             <span>邮箱：</span>
55             <input type="text">
56         </div>
57     </form>
58 </div>
59 
60 </body>
61 </html>

内外边距及div居中

标签：solid,border,边框,color,div,margin,距及
来源： https://www.cnblogs.com/doremi429/p/16069196.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

盒子模型及边框使用（内外边距及div居中）