引言:
有可能你会在你的css布局中这么写:
.text{
font-size: 20px;
line-height: 20px;
color: #ffffff;
background: #3397ff;
margin-top: 40px;
width: 200px;
border: 1px solid #3397ff;
}
<div class="box">
<p class="text">css3 奇技淫巧</p>
</div>
这种情况要是 font-size
改变,将会顺带需要改动几处代码,line-height
,margin-top
,width
等
1、使用rem或em
em
是相对于父元素的font-size
做出改变的
.box{
font-size: 20px;
}
.text{
font-size: 1em;
line-height: 1em;
color: #ffffff;
background: #3397ff;
margin-top: 2em;
width: 20em;
border: 1px solid #3397ff;
}
rem
是相对于html的font-size
做出改变的
body,html {
font-size: 20px;
}
.text{
font-size: 1em;
line-height: 1em;
color: #ffffff;
background: #3397ff;
margin-top: 2em;
width: 20em;
border: 1px solid #3397ff;
}
2、使用 currentColor
currentColor
可以说是css的一个变量,会被解析为 clolor
的一个值,所以下面我们就可以给跟
color同样值使用currentColor
,来减少以后代码变动改动的地方:
.text{
color: #3397ff;
border: 1px solid currentColor;
}
3、使用 inherit
inherit
继承的意思,它会继承来着父元素的对应值
.box{
font-size: 20px;
color: #3397ff;
background: #333333;
border: 1px solid currentColor;
}
.text{
line-height: 2em;
margin-top: 2em;
width: 20em;
color:inherit;
background:inherit;
border:inherit;
}
4、使用预处理器
@mixin borderRadius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}