读《CSS世界》总结(1)----width与height
这几天读了张鑫旭写的《CSS世界》，虽然在网上褒贬不一，但在我的实际体验之后，amazing啊！感觉还是非常不错的，对我的css进阶提供了很大的帮助，发现了许多曾未发现的细节，以下为第三章的读书总结!
一.盒子
1.盒子作用的具体细节
CSS世界中每个元素都有内外两个盒子，分别由内外两个盒子组成。例如：对于inline-block元素，它既具有内联元素的性质，又具有块级元素的性质，实际上它是由外在的内联盒子和内在的块级容器盒子组成。inline元素它是由外在的内联盒子和内在的内联容器盒子组成…
2.height与width作用在哪个盒子上？？
作用在内在的容器盒子上
二.width
1.神奇的width:auto
width:auto作为一个默认值却是一个深藏不露的家伙，对不同性质的盒子，它的作用方式也不同：
对于div这类的块级元素，它会直接撑满容器，充分利用可用空间，表现为外部尺寸
对于行块元素，它会表现为收缩性与包裹性，大小由内部决定，表现为内部尺寸
最小尺寸，没遇到过，不清楚啥情况，遇到了再说。
2.width作用的具体细节
width是作用在内部盒子上的，内部盒子是由许多部分构成的，包括margin，border，padding，content且margin永远是透明的，默认情况下width会直接作用在content-box上，这就造成了设置了padding 和border之后元素的大小会变大的问题，一般会有两种解决方案：
（1）宽度分离原则
多嵌套一层盒子，为父级盒子设置一个你想要的宽度！子级盒子自动撑满，这样在设置了padding和border 也不用担心盒子被撑大，内部容器会响应式的缩小！这是不是有点像某个属性？没错，它就是接下来要讲的！
（2）box-sizing属性
将box-sizing设置为border-box后，width 的作用区域被改变，默认状态下它是作用在contente-box上的，修 改后，它将作用在border-box上。
三.height
1.简单的height:auto
height:auto就是内部元素堆了多高，它就有多高
2.为何height:100%会无效？
当为一个元素设置hegiht:100%时，若父级元素没有设置具体的高度，并且该元素不是绝对定位，则height:100%将被解释为height:auto。因为父级元素没有设置高度值，它的heght就是auto，auto与百分比是无法相互计算的。为何width支持这样写，而height不行呢？其实这种叫做未定义行为，没有标准的处理方式，全凭浏览器厂商自己决定，但现在所有的浏览器都支持这样写。
如何让元素支持height:100%呢？
（1）为父级盒子设定具体有效的高度值
（2）使用绝对定位
值得一提的是，使用绝对定位时，height:auto就会有计算值，即使父级height为auto也会有，但当它绝对定位时，它的宽高百分比是相对与padding-box的
如果这篇文章对你有帮助，可以bilibili关注一波 ~ ！此外，如果你觉得本人的文章侵犯了你的著作权，请联系我删除~谢谢！