20170612

知识点A overflow属性

正常情况下，盒子中的内容会被限制在盒子的边缘，但是有些时候，盒子中的内容会溢出，部分或者全部位于盒子的外部。这时候，overflow属性就可以解决溢出的问题。
应用于 块的容器
属性值 visible | hidden | scroll | auto | inherit。
visible：默认值，就是显示溢出的样子；
hidden：内容会在盒子边缘处被裁剪；
scroll：盒子的内容会在盒子边缘处被裁剪，但是会提供滚动机制显示被裁剪掉的部分；
auto：用户代理来确定采用何种行为，不过都建议在必要时提供一个滚动机制。
在用非flex布局做布局时，设置overflow: hidden能够将溢出的块包含到整个外边框中。

---

知识点B clip属性

overflow设置为要求裁剪内容，通过clip属性可以改变裁剪区域的形状。
属性值 auto | <shape>。
auto：默认值，不裁剪；
<shape>：有效值是rect(<top>,<right>,<bottom>,<left>)，裁剪后一个矩形，<top>表示该矩形上裁剪边框离外部盒子的上边框的距离，<right>表示该矩形右裁剪边框离外部盒子的左边框的距离，<bottom>表示该矩形下裁剪边框离外部盒子的上边框的距离，<left>表示该矩形左裁剪边框离外部盒子的左边框的距离。

---

知识点C visibility属性

除了溢出和裁剪，还可以控制元素的可见性。
应用于 所有元素
属性值 visible | hidden | collapse | inherit。
visible：默认值，默认可见；
hidden：元素中原本可见的部分（如边框、内容和背景）都会隐藏，但是它们的空间仍留在原处，也就是占据着原本的空间；
collapse：如果用于出了行、行组、列和列组之外的元素，跟hidden的效果一样，这个属性用于动态行和动态列的效果，当对行、行组、列或者列组设置这个属性值时，这个行、行组、列或者列组会消失而且不会占据原来的空间。