css常见问题
Q：css中为什么要有层叠？
A：解决模块化，作者，用户，用户代理样式冲突。
- 模块化：@import url（style/base.css）, 作者：写代码的人, 用户：浏览页面的人, 用户代理：浏览器
- CSS层叠规则（权重从小到大）：
用户代理样式 < 用户一般样式 < 作者一般样式 < 作者！important样式 < 用户！important样式
< 特异度高的覆盖特异度低的 < 特异度相同，则越往后的样式优先级越高
- 特异度规则：
内联style > id > class > 标签
CSS常用技巧
1. 使用pointer-vent：none禁用鼠标事件
使用场景：
- 点击获取验证码后，需要等待60s后才能再次单击，使用pointer-events实现禁用鼠标单击事件；
- 滚动页面时可能会碰到一些元素绑定事件，给body加上pointer-events属性可避免这个问题；
2. css选择器
- 当父元素只有一个子元素时，会被选中：
div:first-of-type:last-of-type
div:only-child
- 当父元素有多个子元素时，选中第一个：
div:not(last-of-type):first-of-type
div:not(:only-child)
3. 利用padding实现元素等比例缩放
- padding和margin的上下外边距的百分比是根据父元素的宽度来计算的，可以结合:after伪元素撑开
.parentDiv { 100px; height:100px}
.childrenDiv { 100%; padding-bottom:100%;}
或
.parentDiv { 100px; height:100px}
.childrenDiv { postion:relative; overflow:hidden;}
.childrenDiv::after { content:''; display:block; padding-top:100%;}
4. 隐藏元素
- 设置width=0，height=0，font-size=0／color=transparent
- 设置opacity=0元素本身还在，只是看不见而已
- 设置position=absolute, left:-9999px，通过定位将元素移出屏幕范围
- 设置margin=-9999px，将元素移出屏幕可视区
- 设置text-indent=-9999px，实现隐藏文字效果
- 设置z-index隐藏元素
- 通过width=0，height=0，overflow隐藏元素
- 通过visibility=hidden，元素不可见，但仍占位置
- 通过disply=none，元素被隐藏，不占位置
- 通过transform=translate（-9999px），将元素移出屏幕范围
- 通过transform=scale（0），缩放元素
- 通过transform=skew（90deg），让元素重叠
- 通过-webkit-clip-path:polygon(0px,0px,0px,0px,0px,0px,0px,0px)，将元素裁剪