New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[css] 第106天 CSS中的calc()有什么作用? #1006
Comments
calc使得开发者能够使用四则运算表达式来填写CSS属性。 px、%、em等不同单位的数值均可参与计算,浏览器会进行自动转换。 |
坑: 当使用calc的时候,运算符号 左右需要有空格的哦,否则,属性不生效。例如: width: calc(100% - 30px); |
@HuoXiaoYe 很棒,细节关注得很到位哦! |
用来计算长宽的属性,非常好用,百分比,px,vh/vm都可参与计算, |
在less使用中某些情况是无效的 |
还需要加单引号吗? |
可以很灵活的计算盒子的长宽,支持加减乘除,单位支持百分比、px、em、rem等,加减运算符左右必须有空格,乘除可以没有,但是一般建议保留空格 |
水平垂直居中 <div class="d0">
<div class=d1""></div>
</div> .d0{
position: relative;
width: 300px;
height: 300px;
border: 1px solid red;
}
.d1{
position: absolute;
width: 100px;
height: 100px;
border: 1px solid blue;
left: calc(50% - 50px);
top: calc(50% - 50px);
} |
用于动态计算css长度,在响应式布局中有用到 |
动态计算css长度单位,计算的时候需要在运算符合前有左右空格 IE9才开始支持 |
第106天 CSS中的calc()有什么作用?
The text was updated successfully, but these errors were encountered: