1.猫头鹰选择器
由来:通用选择器 * 和 相邻兄弟选择器 + 一起使用,像个猫头鹰一样
* + * {
margin-top: 5px;
}
li + li {
border-top: .5px solid gray;
}
应用:分页,列表,标签margin,padding,border(兼容IE8及以上)
2.区间选择器 || 前N个元素(后N个元素)选择器
前N个:nth-child(-n+3)
后N个:not(:nth-child(-n+3))
中间N个:not(:nth-child(-n+3)):not(:nth-child(-n+3))
应用:回帖里面的前两个热门回帖
兼容IE8及以上
坑:before和after和子元素选择器一起使用时必须按:nth-child(n):before的顺序写,否则不生效
3.background-image url设置备胎图片
background-iamge: url(...),url(默认图url);
应用:默认图
4.使用padding-bottom设置固定宽高比
需求过来的时候告诉你要做一个16:9或4:3的图片,你还去一个一个的计算宽高吗,用不着!
padding-bottom: 百分比
4:3 padding-bottom: 75%;
16:9 padding-bottom: 56.25%;
在less/sass/stylus里面直接使用分数表示
适用于IE9及以上
5.div垂直居中的各种奇淫技巧
背景图垂直居中
.bg {
background-image: url(...);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
父元素设置display:table(不推荐)
负数margin
.element
{
position
:
relative
;
top
:
50%
; margin-top: -元素的高度;
}
利用动画效果,即使不知道子元素的高度也可以使用
.element
{
position
:
relative
;
top
:
50%
; transform
:
translateY(
-50%
);}
不适用于使用了transition属性的元素
flex布局
.father
{
display: flex;
align-items: center;
}