盒模型详解

时间 2019-11-13

标签模型详解繁體版

原文原文链接

内容：css

1.什么是盒模型html

2.padding和margin浏览器

3.盒模型实例布局

4.margin和padding拓展ui

5.box-sizingspa

参考资料：MDN盒模型资料scala

1.什么是盒模型3d

MDN的解释以下：code

当对一个文档(网页)进行布局的时候，浏览器渲染引擎会根据CSS-Box模型（盒子模型）将全部元素表示为一个矩形盒子，CSS决定这些盒子的大小，位置以及属性（颜色，背景，边框尺寸等性质)htm

在CSS中使用盒模型描述这些矩形盒子中的每个。这个模型描述了元素所占空间的内容。

每一个盒子有四个边：外边距边(margin), 边框边(border), 内填充边(padding) 与 内容边(content)

总结：盒模型就是每一个HTML元素的结构，也能够理解为一种思惟模式，每一种元素都遵循盒模型

如何查看元素的盒模型(以Chrome为例)：右键点击网页选择检查，以下图所示

2.padding和margin

padding -> 内边距(内容与边框之间)

margin -> 外边距(标签与标签之间)

1 margin:         用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
2 padding:        用于控制内容与边框之间的距离；   
3 Border(边框)    围绕在内边距和内容外的边框。
4 Content(内容)   盒子的内容，显示文本和图像。

注：两个挨着的margin浏览器最后会取其中的最大值；

margin和padding以下图所示：

3.盒模型实例

(1)边框、内容及padding实例

 1 <!--__author__ = "wyb"-->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>padding和margain</title>
 7     <style>
 8         .div1{
 9             width: 200px; height: 200px;
10             background-color: red;
11             border: 30px solid seagreen;
12             padding: 10px;
13         }
14         .div2{
15             width: 200px; height: 200px;
16             background-color: yellow;
17             border: 10px solid rebeccapurple;
18             padding: 10px;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="div1">hello, div1</div>
24     <div class="div2">hello, div2</div>
25 </body>
26 </html>

效果以下：

(2)margin实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>padding和margain2</title>
 6     <style>
 7         body{
 8             margin: 0;
 9         }
10         .div1{
11             background-color: aqua;
12             width: 200px;
13             height: 200px;
14             margin-bottom: 30px;
15         }
16         .div2{
17             background-color: blueviolet;
18             width: 100px;
19             height: 100px;
20         }
21     </style>
22 </head>
23 <body>
24 <div class="div1"></div>
25 <div class="div2"></div>
26 </body>
27 </html>

效果以下：

4.margin和padding拓展

(1)body的margin问题

边框在默认状况下会定位于浏览器窗口的左上角，可是并无紧贴着浏览器的窗口的边框，这是由于body自己也是一个盒子（外层还有html），在默认状况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，因此body中的盒子不会紧贴浏览器窗口的边框

解决方法：

1 margain: 0;

(2)margin collapse（边界塌陷问题）

外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当咱们上下排列一系列规则的块级元素时，那么块元素之间由于外边距重叠的存在，段落之间就不会产生双倍的距离

兄弟div: 上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下二者margin里最大值做为显示值

父子div: 若是父级div中没有 border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，而后按此div 进行margin

 1 <!DOCTYPE html>
 2 <html lang="en" style="padding: 0px">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             margin: 0;
 9         }
10 
11         .div1{
12             background-color: aqua;
13             width: 300px;
14             height: 300px;
15         }
16         .div2{
17             background-color: blueviolet;
18             width: 100px;
19             height: 100px;
20             margin-top: 20px;
21 
22         }
23     </style>
24 </head>
25 <body>
26 
27 <div class="div1">
28     <div class="div2"></div>
29     <div class="div2"></div>
30 </div>
31 
32 </body>
33 </html>
34 
35 margin collapse示例

效果以下：

解决方法：如下3局代码任选一句加入父div的样式中便可

1 border:1px solid transparent；
2 padding:1px；
3 over-flow:hidden;

5.box-sizing

盒子模型是css中一个重要的概念，其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同

(1)标准盒模型

标准 w3c 盒子模型的范围包括 margin、border、padding、content，而且 content 部分不包含其余部分

(2)IE盒模型

IE盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不一样的是：ie 盒子模型的 content 部分包含了 border 和 pading

(3)box-sizing取值

content-box：默认值，让元素维持W3C的标准盒模型。元素的实际宽度/高度等于border加上元padding加上content的宽度/高度
border-box：让元素维持IE盒模型，元素的实际宽度/高度等于content的宽度/高度。这里的content width/height包含元素的border和padding和真正content的内容
content-box：Element Width/Height = border + padding + content width/height
border-box：Element Width/Height =content width/height - border - padding

(4)content-box和border-box的区别

最基本的区别：content-box的content部分不包括其余部分仅仅是真实的内容而border-box的content部分包含border 和 pading

表现出来的区别：box-sizing默认是content-box，内容区大小不会变，加上padding、border的话，盒子就会往外撑开，从而破坏布局结构

这时，使用border-box就能够完美解决了，加上的padding和border会包含在content之中不会直接将布局结构破坏

实例以下：

当使用content-box时，未加padding时：

加了padding以后：

将盒模型的类型改成border-box以后：

上述实例代码：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>test</title>
 9     <style>
10         *{
11             /* 设置box-sizing为border-box */
12             box-sizing: border-box;
13         }
14         body{
15             margin: 0;
16         }
17         .container{
18             width: 100%;
19         }
20         .div-item{
21             float: left;
22             height: 300px;
23             /* 为div加上padding */
24             padding: 15px;
25         }
26         .div-left{
27             width: 30%;
28             background: lightblue;
29         }
30         .div-right{
31             width: 70%;
32             background: lightcyan;
33         }
34     </style>
35 </head>
36 <body>
37 
38 <div class="container">
39     <div class="div-left div-item">left</div>
40     <div class="div-right div-item">right</div>
41 </div>
42 
43 </body>
44 </html>