一. 可继承属性&不可继承属性
<1> 有继承性的属性
(1) 字体有关
- font-family
- font-weight
- font-size
- font-style
(2) 文本修饰
- text-indent 文本缩进
- text-align 文本水平对齐
- line-height 行高
- word-spacing 单词之间的间距
- letter-spacing
- text-transform
- color
(3) 元素可见性
visibility
(4) 列表
- list-style
(5) 光标
- cursor
<2> 无继承性的属性
(1) display
二. 元素的隐藏与显示
| 方式 | 是否占有位置 | 是否响应绑定事件 |
|---|---|---|
| display：none | 不占位置 | 不响应 |
| visibility：hidden | 占位置 | 不响应 |
| opacity | 占位置 | 响应 |
| position：absolute | 占位置，把元素移到可视化区域之外 | / |
| z-index | 负值，让其他元素盖住它 | / |
| transform：scale(0,0) | 占位置，将元素缩放为 0 | 不响应 |
补： display：none 与 visibility：hidden 的区别
(1) 渲染方面：
-
display：none会让元素从渲染树中完全消失，即不占有位置！！ -
visibility：hidden渲染的元素还占有原来的位置！！！只是内容不可看 -
所以关于修改两属性的值：
- 修改`display：none`的值，会造成文档的重拍，因为要重新给`display：none`分配位置！ - 修改`visibility：hidden`的值，只会造成本元素的重绘，并不会造成重拍，因为它本就占有位置
两者子元素问题：
- 因为
display：none是非继承属性，所以子节点也会随着父元素消失，不占位置的消失 - But
visibility：hidden是继承属性，而子孙元素的消失是因为继承了父元素的visibility：hidden属性，所以如果设置子元素visibility:visible就可以让子元素重现！！！
