父元素width为100%，设置padding，出现滚动条
程序员文章站
2024-02-23 08:26:28
...
父元素设置宽度为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>解决：
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-box
W3C: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 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了
上一篇： redis实现多进程数据同步工具代码分享
下一篇： 详解Mybatis中的select方法