您的位置:首页 > Web前端 > CSS

CSS3 calc()的运用

2016-04-28 11:46 716 查看
知道总宽度是100%,在这个基础上减去boder的宽度(5px * 2 = 10px),在减去padding的宽度(10px * 2 = 20px),即"100% - (10px + 5px) * 2 = 30px"
,最终得到的值就是div.box的width值:

<div class="demo">
<div class="box"></div>

</div>

.demo {
width: 300px;
background: #60f;
padding: 3px 0;

}

.box {
background: #f60;
height: 50px;
padding: 10px;
border: 5px solid green;

width: 90%;/*写给不支持calc()的浏览器*/
width:-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px) * 2);
width: calc(100% - (10px + 5px) * 2);

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: