border-box之全局问题解析

关注

原创最新推荐文章于 2026-08-07 10:57:51 发布 692 阅读 AI 写同款· GEO 优化 ›

【高频考点精讲】CSS盒模型深入剖析：border-box到底如何影响你的布局计算？ border-box就像CSS世界里的"防呆设计"，让我们的布局工作更加符合直觉。但全栈老李还是要提醒大家，理解底层原理比记住某个属性更重要。下次当你为布局头疼时，不妨先检查下box-sizing的设置，说不定问题就迎刃而解了。关于盒模型还有什么疑问，欢迎在评论区交流。下期我们会讲另一个布局神器——Flexbox，记得关注哦！阅读详情

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
*{
margin:0;
padding: 0;
}
.wrapper{
width: 960px;
margin-left: auto;
margin-right: auto;
color: #fff;
font-size: 30px;
text-align: center;
}
#header{
height: 100px;
background: #38382e;
margin-bottom: 10px;
border: 10px solid red;
padding: 10px;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

}
.sidebar{
float: left;
width: 220px;
margin-right: 20px;
margin-bottom: 10px;
height: 300px;
background: #5d33cf;
border: 10px solid red;
padding: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.content{
float: left;
width: 720px;
height: 300px;
background: #c8ca30;
margin-bottom: 10px;
border: 10px solid red;
padding: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#footer{
background: #cc4ad5;
height: 100px;
clear: both;
border: 10px solid red;
padding: 10px;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="header">页眉</div>
<div class="sidebar">侧边栏</div>
<div class="content">主内容</div>
<div id="footer">页脚</div>
</div>
</body>
</html>