块级元素
常见的块级元素有 div、li、table 等。
块级元素 和 display 为 block 的元素 不是一个概念。例如，li 元素默认的 display 值是 list-item, table 元素默认的 display 值是table，但是它们均是“块级元素”，因为它们都符合块级元素的基本特征，也就是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。
正是由于“块级元素”具有换行特性，因此理论上它都可以配合clear属性来清除浮动带来的影响。
每个元素都有两个盒子，外在盒子 和 内在盒子。外在盒子负责元素是可以一行显示，还是只能换行显示；内在盒子负责宽高、内容呈现什么的。
在CSS中，盒子分内在盒子和外在盒子，显示也分“内部显示”和“外部显示”，同样地，尺寸也分 内部尺寸 和 外部尺寸。其中“内部尺寸”英文写作“Intrinsic Sizing”，表示 尺寸由内部元素决定；还有一类叫作“外部尺寸”，英文写作“Extrinsic Sizing”，宽度由外部元素决定。
内在盒子”又被分成了4个盒子，分别是 content box、padding box、border box 和 margin box。
width的默认值是auto，它具有以下几种表现：
-
充分利用可用空间
-
浮动、绝对定位、inline-block 元素或 table 元素，取决于内部元素宽度
-
最小宽度
-
超出父容器宽度
在position属性值为absolute或fixed的元素中。在默认情况下，绝对定位元素的宽度表现是“包裹性”，宽度由内部尺寸决定。
当 left/right 或 top/bottom 对立方位的属性值同时存在的时候，元素的宽度表现为“格式化宽度”，其宽度大小相对于最近的具有定位特性（position属性值不是static）的祖先元素计算。
包裹性
指的是元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸（除非容器尺寸小于元素的“首选最小宽度”）
宽度分离原则
在 css 中，当我们给一个盒子的width设置为一个具体的数值时，我们希望这个盒子的宽度就固定为这个值不要改变，但是width和height都是作用在 content box 上，而由于padding和border的存在使得盒子的实际大小会比我们设置的width大小要大，而我们不希望出行这种情况。这时就可以使用宽度分离原则
所谓“宽度分离原则”，就是CSS中的width属性不与影响宽度的padding/border（有时候包括margin）属性共存。
本来是在一个盒子里面设置 width、padding和border
<div class="box"></div>
.box {
width: 200px;
padding: 0 20px;
border: 10px solid pink;
}
现在分开写，在元素外面再嵌套一层标签，父元素定宽，子元素width使用的是默认值auto，所以会自动填满父级容器，这样不管怎么设置padding和border，盒子的整体宽度都不会变化。
<div class="father">
<div class="box"></div>
</div>
.father {
width: 200px;
.box {
margin: 0 20px;
padding: 0 20px;
border: 10px solid pink;
}
}
box-sizing 属性
box-sizing属性可以改变width属性作用的盒子，默认情况下width作用于 content box，当我们将box-sizing的值设置为border-box时，这个时候width就作用于 border box 了，也就是说这时我们再设置padding和border，盒子的宽度不会改变。
width 属性 跟 height 属性的不同点
一个盒子的height属性的属性值如果是百分比，它的父级必须具有具体的高度值才会生效。
width属性则不同，就算父级元素没有设置具体的宽度，百分比值也可以生效。
