文/小魔女
使用demo
div {
-ms-transform: rotate(0);
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
「CSS前缀自动补全:autoprefixer」
❝已知: margin:20px; border:10px; padding:10px; width:200px; height:50px; ❞
标准盒模型:
1. 占用宽:
margin*2+padding*2+border*2+width
= 20*2+10*2+10*2+200 = 280
2. 占用高:
margin*2+padding*2+border*2+height
= 20*2+10*2+10*2+50 = 130
3. 盒子实际宽度:
padding*2+border*2+width
= 10*2+10*2+200 = 240
4. 盒子实际高度
padding*2+border*2+height
= 10*2+10*2+50 = 90
怪异盒模型:
1. 占用宽:
margin*2+width
= 20*2+200 = 240
2. 占用高:
margin*2+height
= 20*2+50 = 90
3. 盒子实际宽度:
width = 200
4. 盒子实际高度
height = 50
「IE8及更早版本不兼容问题解决方案:在HTML页面声明 」
❝BFC(块状格式化上下文,独立的盒子,布局不受外部影响,但是如果同一个BFC中,同级块状元素的margin-top和margin-bottom会重叠) ❞
只要元素满足下面的任一条件,都会触发BFC特征。
解决问题:
❝元素被当成行内元素排版时,元素直接的空白符会被浏览器处理,根据white-spack的处理方式(默认是normal,合并多余空白),Html代码在回车换行时被转成一个空白符,在字体不为0的情况下,空白符占据一定宽度,所以inline-block元素之间就出现了空隙。 ❞
复现
<ul>
<li>首页</li>
<li>登陆</li>
<li>资源</li>
<li>社区</li>
<li>帮助</li>
</ul>
解决办法:
.clearfix:after {
display: block;
height: 0;
visibility: hidden;
clear: both;
content: '';
}
.clearfix{ //IE6模式下
zoom:1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: '';
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; //兼容IE6下
}
「优先级相同时会发生什么? 样式被覆盖」
「normalize.css是一个css reset的替代方案。」
ul>li:nth-child(2n+1) {
background-color: red;
}
ul>li:nth-child(2n) {
background-color: yellow;
}
ul>li:first-child {
border-top: none;
}