css---计算页面的的宽度和长度

我们在写前端页面的时候,会遇到这样的情况,就是一个div设置宽度100%,设置左右边距10像素,这样的布局,在里面嵌套的div的宽度设置100%,这样写的话,里面的宽度是和外面的宽度一致的,同样是100%的宽度。

而我们想要的就是里面的宽度是100%-20的宽度,很多时候我们会用JS来做,其实我们可以用css来做。

width: calc(100% - 20px);

CSS calc() 函数 :calc() 函数用于动态计算长度值。

● 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);

● 任何长度值都可以使用calc()函数进行计算;

● calc()函数支持 "+", "-", "*", "/" 运算;

● calc()函数使用标准的数学运算优先级规则;

猜你喜欢

转载自www.cnblogs.com/e0yu/p/10455884.html