浏览 264
分享
1属性书写顺序
- 遵循先布局后内容的顺序。
.g-box {
display: block;
float: left;
width: 500px;
height: 200px;
margin: 10px;
padding: 10px;
border: 10px solid;
background: #aaa;
color: #000;
font: 14px/1.5 sans-serif;
}
这个应该好理解,比如优先布局,我们知道布局属性有 display, float, overflow 等等;内容次之,比如 color, font, text-align 之类。
- 组概念。
拿上例的代码来说,如果我们还需要进行定位及堆叠,规则我们可以改成如下:
.g-box {
display: block;
position: relative;
z-index: 2;
top: 10px;
left: 100px;
float: left;
width: 500px;
height: 200px;
margin: 10px;
padding: 10px;
border: 10px solid;
background: #aaa;
color: #000;
font: 14px/1.5 sans-serif;
}
从代码中可以看到,我们直接将z-index, top, left 紧跟在 position 之后,因为这几个属性其实是一组的,如果去掉position,则后3条属性规则都将失效。
- 私有属性在前标准属性在后
.g-box {
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-o-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}
当有一天你的浏览器升级后,可能不再支持私有写法,那么这时写在后面的标准写法将生效,避免无法向后兼容的情况发生。
评论列表