Box model
- 盒子模型概念：
盒子模型（Box Model）是CSS控制页面时一个很重要的概念。
image.png
content edge or inner edge
The content edge surrounds the rectangle given by the width and height of the box, which often depend on the element's rendered content. The four content edges define the box's content box
.
padding edge
The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The four padding edges define the box's padding box
.
border edge
The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge. The four border edges define the box's border box
.
margin edge or outer edge
The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge. The four margin edges define the box's margin box
.
- 盒子模型属性：
- 边框（border）：用于分隔不同元素、会占据空间、有4条边框、可无边框（设置为0）。
border : border-width || border-style || border-color - 填充(padding)：用于控制内容与边框之间的距离；会占据空间；
可设置盒子模型上、右、下、左4个方向的内边距值；padding属性的值可以为0，即无内边距。 - 边界(margin)：用于控制元素与元素之间的距离；会占据空间；
可设置盒子模型上、右、下、左4个方向的外边距值；margin属性的值可以为0，即无外边距。 - 内容(content) :
内容本身的宽=width
内容本身的高=height - 盒子模型总尺寸
盒子模型总尺寸=border-width+padding+margin+内容尺寸（宽度/高度）
- 盒子之间关系：
-
DOM是 Document Object Model的缩写，即“文档对象模型”。一个网页的所有元素组织在一起，就构成了一个棵“DOM”树。
任意一个HTML文档都对应一棵DOM树，body是所有对象的根节点。而该DOM树的节点如何在浏览器中表现，则由CSS确定。即HTML控制网页的结构，CSS控制网页的表现。 -
标准文档流
“标准文档流”简称“标准流”。指在不适用其他的与排版和定位相关的特殊CSS规则是，各种元素的排列规则。
（1）. 块级元素（block level）
总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。
（2）. 行内元素（inline）
标记本身不占有独立的区域，仅仅实在其他元素的基础上指出了一定的范围。
行内元素在DOM树种同样是一个节点。从DOM的角度来看，块级元素和行内元素是没有区别的，都是树上的一个节点；而从CSS的角度来看，二者有很大的区别，块级元素拥有自己的区域，行内元素则没有。
标准流就是CSS规定的默认的块级元素和行内元素的排列方式 -
盒子在标准流中的定位原则
（1） 行内元素之间的水平margin
当两个行内元素紧邻时，他们之间的距离为 第一个元素的 margin-right 加上第2个元素的margin-left。
（2）块级元素之间的竖直margin
两个竖直块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者。这个现象称为 margin 的“塌陷”现象。
（3）嵌套盒子之间的margin
如果父div的高度值小于子块div的高度加上margin的值，此时IE浏览器会自动扩大，保持子元素的margin-bottom的空间以及父元素自身的padding-bottom。而firefox会保证父元素的高度完全吻合，子元素会超出父元素的范围。
