您的位置：首页 > 其它

父元素width为100%，设置padding，出现滚动条

2018-03-15 10:46 441 查看

父元素设置宽度为100%，子元素也是100%，在设置父元素padding时会出现滚动条

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父元素width为100%，设置padding，出现滚动条</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
width:100%;
background: #ccc;
padding:20px;
}
.box1{
width:100%;
background: #eee;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>

原因：元素的盒子去渲染的时候，是先确定下来content的大小，再去弄padding的大小。整个由盒子的内部向外部计算渲染。如果content是100%了，它又要想办法去弄padding来满足你，那对不起了，来个横向滚动条把，或者整个元素的边界扩张了。解决：1.父元素不设置宽度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父元素width为100%，设置padding，出现滚动条</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
/*width:100%;*/
background: #ccc;
padding:20px;
}
.box1{
width:100%;
background: #eee;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>

2.设置box-sizing:border-box

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父元素width为100%，设置padding，出现滚动条</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
width:100%;
background: #ccc;
padding:20px;
box-sizing: border-box;
}
.box1{
width:100%;
background: #eee;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>

原因是因为使用CSS3中的盒模型，设置其按照IE的标准去解析，及width=padding+border+content。就能正确显示了。
拓展：

W3C盒模型

IE盒模型

从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。两者的不同体现在width和height上IE：width=content+padding+border border-boxW3C:width=content 　　例：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，假如用IE模型解释，那么这个盒子需要占据的位置为：
宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用w3c盒子模型，那么这个盒子需要占据的位置为：
宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px。
　　那应该选择哪中盒子模型呢？当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢？很简单，就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了

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

标签：

相关文章推荐

新的分享

章节导航