浅谈box-sizing的用法

box-sizing,css3新属性,为了改变ie浏览器的盒模型遗留的width(名副其实)bug

属性:content-box | border-box

两种属性的用法和区别:

<!doctype html>
<html>
<head lang="en">
    <meta charset="UTF-8">
</head>
<style type="text/css"> *{ margin: 0; padding: 0; } .border-box{ width: 50%; height: 100px; padding: 20px; border: 5px solid blue; background: green; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } ._float{ float: left; } .content-box{ width: 50%; height: 100px; padding: 20px; border: 5px solid blue; background-color: red; box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } </style>
<body>
    <div class="border-box"></div>
    <div class="border-box"></div>
</body>
</html>


结果如下

为什么会有这么差异,他们的区别是什么,我们看一下他们的盒模型
浅谈box-sizing的用法_第1张图片
浅谈box-sizing的用法_第2张图片

当属性为content-box时,盒子的真实width = width+padding +border = 150px;
当属性为border-box时,盒子的真实width = 原width = 100px;

那么属性有什么作用呢….
大家可以想一想,如果用border-box定义盒子时,boder不影响自己设置width,是多么开心的一件事,比如:两列式布局

这里写图片描述

当然手机端用处会更多,笔者就想了这么点。

你可能感兴趣的:(css3,box-sizing)