第三章
3.2 width/height作用的具体细节
3.2.1 深藏不露的width:auto
当我们对元素设置width:100%时,实际作用的是contex-box，此时元素的实际占用尺寸是在父元素的宽度基础上加上自身padding、margin以及border。
- 此时可以使用“宽度分离”进行处理，即在需要与父元素宽度一致的元素外包裹一个div，使包裹元素的width为100%，被包裹元素使其width：auto自动填充，此时无论怎么设置被包裹元的padding、margin以及border，都不会超出父元素的范围
- 另一种做法使添加CSS属性box-sizing，最常用的值为border-box。设置此值后，设置的width是包含padding以及border的宽度的。(书中表示主要用途是使用在\
3.2.6 关于height 100%
例子2-10中,为什么box要设置white-space: nowrap;因为此时作者想要展示此时的box宽度是由图片加上文字的宽度得来的，但是因为文字所在的容器设置了width：100%使得父容器展示完图片后没有足够的空间，所以文字的块会进行换行。加上white-space: nowrap;更能体现出父容器box的宽度是怎么来的，去掉white-space: nowrap;后，文字块回到应在的位置，与box宽度一致。
如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto
所以此时想要高度100%有效果可以使用如下方式
- 设置显式的高度值
- 使用绝对定位:当为绝对定位时宽高百分比计算是相对于padding box，非绝对定位就为contex box计算。
第四章
4.1 深入理解content
content与替换元素
替换元素的特点有：内容可替换、基本样式外部CSS很难改变，有着自己的尺寸（基线也就是下边缘）。常见的替换元素img,ifram,video,select,input->range|file|hidden,button,textarea.
元素的固有尺寸不能被改变img标签的扩展
4.2 温和的padding属性
内联元素（inline）在使用padding时，直观上看不出变化，但是加上背景颜色后就能明显看到尺寸发生了变化，但是没有对布局造成作用。出现层叠效果。但父元素再设置overflow:auto;则会出现滚动条。
非替换的内联元素，不会将padding,margin,border加入行盒高的计算。
padding会导致元素换行，换行后可能会覆盖元素