（点击检察官方解释）

实际上网页中的每一个标签都可以当作一个盒子模型，而这个盒子模型从内到外有以下这几个元素构成

content 内容区域

padding 内边距

border 边框

margin 外边距

并且margin, border, padding分袂有上下摆布4个值

如上图所示，可以很容易的得出盒子的巨细，也就是对应标签真正巨细。
所谓的宽高不是width和height,而是盒子的宽度和高度。

高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距 宽度 = 内容宽度 + 摆布内边距 + 摆布边框 + 摆布外边距

margin,border,padding三个属性在设值的时候均可以对上下摆布进行单独设置：

margin-top: 100px; margin-bottom: 100px; margin-left: 50px; margin-right: 50px;

也可以一次性使用简写的要领设置：

/* 上 右 下 左*/ margin: 100px 100px 50px 50px; /* 上下 摆布*/ margin: 100px 50px; /* 上 摆布 下*/ margin: 100px 20px 50px;

这里需要注意的是，多次设置时要先写大后写小：

/* 错误写法 */ margin-left: 20px; margin: 10px;

这个种写法会导致 margin-left:20px掉效。

在使用盒子模型进行构造的时候要非分格外注意的一个问题是： margin塌陷。

* { margin:0; } div { width: 300px; height: 300px; } .d1 { background-color: #c1c1c1; margin-bottom: 20px; } .d2 { background-color: pink; margin-top: 30px; } <div></div> <div></div>

上述代码实际效果如下图所示

肉色部分是Chrome浏览器查抄div.d2属性的margin边距，很明显它的top是30px,也就是说margin距离是距离上下摆布容器border的距离，所以造成了div.d1的20px的margin-bottom塌陷在div.d2的margin-top里了。


在计算盒子之间的距离时需要考虑margin，但margin也有一个很好用的要领使块剧中：

margin: 0 auto;

border属性的三要素：

border-width 粗线

border-style 线形

border-color 颜色

一般设置border的样式时一般使用简写方法：

border: 1px solid red;

再说行内元素的盒模型与块级元素的盒模型之间的差异：

行内元素不能设置宽和高。行内元素的宽高是由其内容决定的；而块级元素可以设置宽和高。

块级元素会独有一行。而行内元素却部能够独有一行，只能和其他的行内元素共用一行。

如果块级元素不设置宽度，那么块级元素会自动的沾满父元素的全部宽度。

可以通过设置dispaly属性将元素在行内和块之间转换，其参数包孕：

inline

block

inline-block

标准文档流

标准文档流实际上是一个不太好的翻译，一开始不是很理解，查了一下发明，标准中说的是 normal flow 翻译为普通流或者通例流更好。

当浏览器解析网页的时候，遵循从上往下，从左到右的挨次。
一旦元素脱离了标准文档流的时候，行内元素和块元素的特性将消掉。

标准文档流的常见现象：

空白折叠现象。

高矮不齐，底边对齐。

自动换行，一行写不完，自动换行。

单词没写完不换行。

浮动 float: left / right;

浮动的特点：

脱离标准文档流，元素一旦脱离标准文档流(脱标)，，后面的元素会占据浮动元素原本的位置，而且元素就不再遵守文档流中块级元素和行内元素的特性。

元素浮动会脱离文档流但是不会脱离文本流，所以会孕育产生字围效果。

彼此贴靠。

浮动会带来的影响：

能让浮动后的元素构造混乱

子元素浮动会对父元素孕育产生影响

HTML代码：

<div> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> </ul> </div> <div> <ul> <li>测试文字</li> <li>测试文字</li> <li>测试文字</li> <li>测试文字</li> </ul> </div>

CSS代码：

.box ul li { float: left; width: 100px; height: 50px; background-color: orange; margin-left: 10px; }

此时效果如下图：

如何断根浮动带来的影响：

1.首先可以通过为父元素设置高度来消除浮动：

.box { height: 50px; }

2.使用overflow:hidden属性断根浮动：

.box { overflow:hidden; }