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

2022/3/28 23:25:26

编程Tag： div 边框 color border margin Solid 距及

本文主要是介绍盒子模型及边框使用（内外边距及div居中），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

盒子模型：

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居中

这篇关于盒子模型及边框使用（内外边距及div居中）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章