为什么子容器设置了width:100%但还是超出了父容器的宽度
·
设置一个父元素和一个子元素，给子元素加上width:100%，继承父元素的宽度：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,html{
padding: 0;
margin: 0;
}
.parent{
height: 100px;
background-color: red;
}
.son{
width: 100%;
/* margin: 0 20px; */
height: 50px;
background-color: orange;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
不加边距的时候页面是正常的：
加上外边距之后，就会出现子元素宽度超出父元素宽度，并且页面出现横向的滚动条：
width:100%表示子元素继承父元素的宽度，box-sizing默认是content-box，所以width只表示内容区域的宽度，子元素加了外边距之后整个宽度就比父元素的大了。
如果想要不超出父元素宽度，可以指定子元素的宽度，或者不设置宽度（子元素宽度会自动调整为父元素的剩余可用宽度）
.son{
/* width: 100%; */
margin: 0 20px;
height: 50px;
background-color: orange;
}
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
8
0- 0
已为社区贡献2条内容
所有评论(0)