您的位置：首页 > 其它

box-sizing:border-box;和 box-sizing:content-box；

2016-01-27 10:38 489 查看

不同的浏览器解析页面方式稍有不同，就会出现兼容问题。

如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cls{
width: 300px;
height: 200px;
border: 4px solid red;
padding: 2px;
}
</style>
</head>
<body>
<div class="cls"></div>
</body>
</html>

IE：解析盒子模型 box-sizing:border-box

width=288+2*2=300

可以看出来实际宽度的区域设置的是300px，现在只显示288px，这里看出padding所占的2px是从原来宽度300px中减去的，

主流浏览器：解析盒子模型 box-sizing:content-box;（默认）

显示正常和定义的宽度相互吻合

使用场景：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cls{
width: 300px;
height: 200px;
clear: both;
border: 1px solid #000;
}
.c1{
width: 150px;
height: 200px;
background-color: yellow;
}
.c2{
width: 150px;
height: 200px;
background-color: red;
}
.cls div{
float: left;
}
</style>
</head>
<body>
<div class="cls">
<div class="c1"></div>
<div class="c2"></div>
</div>
</body>
</html>

显示：

//注意这时我们给右侧红色的div添加3px的boder

.c2{
width: 150px;
height: 200px;
background-color: red;
border: 3px solid #AABBCC;
}

效果图：

原因：盒子模型默认的解析方式是 box-sizing:content-box;（默认）padding和boder不会计算进width

父元素div的widht=300px，左侧黄色div width=150px，右侧宽度 div width=150px 和boder3px，

子元素的总体大于父元素300px。

解决方式

为右侧div添加 box-sizing:border-box

效果图：

将添加的boder的宽度添加到宽度里面，就解决。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 浏览器

相关文章推荐

新的分享

章节导航