《CSS世界》心得

最近抽了一些时间学习了张鑫旭写的《CSS世界》这本书，一个很直观的感受就是这本书写的很系统。里面的知识点解决了我在项目中遇到的一些困惑，因此把一些point记录下来以便日后查看

所谓内部尺寸是指元素的尺寸由内部元素来决定，典型的例子就是inline-block元素。而包裹性是指只要你设置了一个宽度，里面的内容再多，它也不会超出容器设定好的宽度，而是表现为内容换行

那么根据包裹性可以实现什么效果呢？举个例子：某个模块内部的文字内容是动态的，当文字少的时候要求居中显示，文字多的时候左对齐，那么该如何实现呢？

作者给出了如下答案：

.box {
    text-align: center;
}
.content {
    display: inline-block;
    text-align: left;
}

所谓宽度分离原则就是指CSS中width属性不和影响宽度的padding/border属性共存（在box-sizing: content-box情况下），这个时候写法上需要width单独占用一层标签，其他的属性位于宽度标签里的子标签。eg:

.father {
    width: 180px;
    margin: 20px;
}
.children {
    padding: 20px;
    border: 10px solid #000;
}

See the Pen RQxoXM by abcdGJJ (@abcdGJJ) on CodePen.

这样一来，容器的宽度永远是你设置的180px，不会因为padding/border的改变而改变，我个人认为这是一种hack的写法

那么这么写能生效的原因是什么呢？实际上归功于width: auto。对于块状元素，如果width: auto，则元素会如水流般充满整个容器，而一旦设定了宽度具体数值，则元素的流动性就会被阻断，不会自动充满容器

对于height属性，如果父元素的height为auto，只要子元素在文档流中，其百分比值就完全被忽略了，即使设置上了百分比值，也不会起作用的。想要起作用有两种方法：

1
2
3

html, body {
    height: 100%;
}

div {
    height: 100%;
    position: absolute;
}

有一点要注意：绝对定位宽高百分比相对于padding-box进行计算，也就是会把padding的大小计算在内；而非绝对定位元素是相对于content-box计算的。例如：查看例子