CSS技术详解

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)，将元素裁剪