1. display和visiblity
对于 CSS 里的 visibility 属性，通常其值被设置成 visible 或 hidden。
visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于：
- 1、display:none 元素不再占用空间。
- 2、visibility: hidden 使元素在网页上不可见，但仍占用空间。
设置元素 visibility: collapse 后，一般的元素的表现与 visibility: hidden 一样，也即其会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group、table column group 等，其表现却跟 display: none 一样，也即其占用的空间会释放。
display: block;
- 块元素：宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
- 在前后都是换行符。总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
display: inline
- 和相邻的内联元素在同一行;
- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，由内容撑起;
display:inline-block
- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性，常将所有<li>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了
利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
2. overflow
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow属性有以下值：'
- visible 默认值。内容不会被修剪，会呈现在元素框之外
- hidden 内容会被修剪，并且其余内容是不可见的。
- scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
3. position
position 属性的五个值：
- static HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
- relative 作为其后代绝对定位基准
- fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
- absolute: 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
- sticky: 依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
重叠元素
使用定位时可能出现元素的重叠，z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
4. box-size
box-sizing 属性可以被用来调整width和height的计算方式
content-box是默认值。标准盒子模型。 width和 height只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距、边框和外边距都在这个盒子的外部。 比如说，.box { 350px; border: 10px solid black;}在浏览器中的渲染的实际宽度将是 370px。border-boxwidth和 height属性包括内容，内边距和边框，但不包括外边距。