css 知识点总结
# css 知识点总结
# display:none;visibility:hidden;opacity:0;之间的区别
- 空间占据
display:none 隐藏后不占据额外空间，它会产生回流和重绘，而
visibility:hidden 和 opacity:0 元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。
- 子元素继承
display:none 不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，皮之不存，毛之安附~~
visibility:hidden 会被子元素继承，可以通过设置子元素 visibility:visible 使子元素显示出来
opacity: 0 也会被子元素继承，但是不能通过设置子元素 opacity: 0 使其重新显示
- 事件绑定
display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；
visibility:hidden 元素上绑定的事件也无法触发；
opacity: 0 元素上面绑定的事件是可以触发的。
- 过渡动画
transition 对于 display 肯定是无效的；
transition 对于 visibility 也是无效的；
transition 对于 opacity 是有效
# line-height: 150%与 line-height: 1.5 区别
有单位（包括百分比）与无单位之间的区别：
有单位时，子元素继承了父元素计算得出的行距；
无单位时继承了系数，子元素会分别计算各自行距（推荐使用）。
# transform:scale() 和 zoom 区别
zoom 左上角缩放，scale 默认中心缩放；scale 可通过
transform-origin: 0 0来改变缩放焦点zoom 缩放不可以是负数，scale 可以是负数（详细用法请参考 MDN）
zoom 缩放之后不占文档流，下方的元素会自动上移；scale 缩放之后会仍然占据文档流(类似 position：relative)
zoom 缩放之后，用 js 获取元素的宽高仍然是缩放之前的宽高；scale 缩放之后，用 js 获取是缩放之后的宽高。
由于对文档流的影响，zoom 会引起整个页面的重绘；而 scale 只改变的缩放的元素
兼容性：zoom 不是 css 的标准属性，Firefox 和 Opera Mini 不支持，tranform:scale(x) 则是 css 的标准属性，除 Opera Mini 外，得到了几乎所有标准浏览器的支持。ie 浏览器是在 ie11 后开始支持，不过 ie9 和 ie9 以后的浏览器都支持带前缀的属性-ms-transform。如果你的网页要兼容 ie8 及其以前的 ie 浏览器，就需要做兼容性处理
# text-align 作用
text-align 对文本有作用。
text-align 对行内元素有作用。
text-align 对行内块元素有作用。
touch-action: none; 这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发。
# z-index 不起作用的情况
当前设置 z-index 元素为浮动元素
当前设置 z-index 元素的父元素 position 属性为 relative
当前设置 z-index 元素没有定位（static 定位除外）
# css 预处理器 和 css 区别
css 预处理器 可以嵌套书写
css 预处理器有 变量和样式复用机制
# css 疑问
margin: auto 为什么会实现居中
overflow: hidden 为何能实现 BFC