《CSS 权威指南（第三版）》阅读随笔
定位
利用定位，可以准确地定义元素框相对于其正常位置应该出现在哪里，或者相对于父元素、另一个元素或者浏览器窗口的位置。
基本概念
定位类型
在 CSS 中使用 position 属性来控制元素定位，常用的定位有：
- static：元素框正常生成；
- relative：元素框偏移一定距离；
- absolute：元素框会从文档流中删除，并相对于其包含块定位；
- fixed：类似于 absolute，不过其包含块为视窗。
包含块
上节提到，浮动元素的包含块是其最近的块级祖先元素，对于定位元素来说，情况要稍微复杂一些：
- 根元素（html 或者 body 视代理不同有所区别）也称为初始包含块；
- 对于非根元素，当 position 值为 static 或者 relative 时，其包含块由最近的块级框、表单元格和行内块祖先框的内容边界构成；
- 对于非根元素，当 position 值为 absolute 时，其包含块为最近的 position 不是 static 的祖先元素。
偏移属性
针对于 relative、absolute 和 fixed 等三种定位机制，可以使用 top、right、bottom、left 等偏移属性来描述元素相对于其包含块的偏移量，其中偏移量可以是百分比也可以是单位数值。
.center { color:red;position: absolute;top:50%;right:0;bottom:0;left:50%; } /* 一个相对于包含块，位于右下角的红色方块 */
宽度和高度
设置宽高
在使用偏移量定位元素时，即使不设置宽高，也会隐含生成，相当于默认的 auto 值。当然在设置偏移量的同时，仍然可以自定义宽高，此时的宽高可能超出其包含块。
限制宽高
如果希望对元素的宽高加以限制，可以使用 min-height、min-width、max-height、max-width 等属性。顾名思义，这些属性可以在设置元素的宽高后，仍对其进行最大、最小方面的限制。例如使用百分比设置了宽度以后，再通过单位距离来限制宽度，反之亦然。
内容溢出和裁剪
溢出
当元素内容超过元素本身的大小时，就会溢出元素本身，此时需要根据实际情况，采用不同策略来应对溢出。在 CSS 中可以使用 overflow 属性来控制溢出行为：
- visible：对于溢出的内容照常展示；
- hidden：隐藏溢出部分；
- scroll：对于超出元素的部分，可以通过加滚动条的方式来滚动展现；
- auto：让代理决定如何控制溢出；
内容裁剪
使用 CSS 的 clip 属性可以自定义裁剪内容区域，并以矩形方式进行裁剪：
.center { clip: reat(10px,40px,40px,10px;) }
其中 reat 传入的四个参数值，前两个参数代表待裁剪矩形左上角距离包含块上边界和左边界的距离，后两个参数代表待裁剪区域右下角距离包含块上边界和左边界的距离，且只能设置单位数值，不可用百分比。
元素可见性
visibility 属性可以控制元素是否可见：
- visible：可见；
- hidden：隐藏，但仍旧在文档流中，占据一定位置；
- collapse：用在表格中时，此值可删除一行或者一列但不影响元素布局；除此之外，相当于 hidden 值。
visibility 属性是可继承的，且不可见父元素中可以包含可见子元素。
