最近在学习写网页，在用html标记语言和css布局时，发现css布局中的margin，padding会使整个布局变大，最后在研究了css盒模型时找到了答案。
主要原因是margin定义了模块的外边距，padding定义了模块的内边距，如果在布局时没有把两块边距像素考虑到整个布局中，并且在父布局里宽高都设置为固定，此时会发生的事情就是：在整个父布局中如果宽度容纳不下子布局，那么子布局会撑出整个父布局，例如：
<div id="container"> <div id="header"></div> <div id="main"> <div id="left"></div> <div id="rigt"></div> </div> <div id="footer"></div> </div>
布局如上，container为父布局，其余全部为子布局，当我的子布局header设置的宽度超过container设置的宽度时，代码如下：
#container{
width: 820px;
height: auto;
background: white;
margin:0 auto;
background: yellow;
}
#header{
width: 840px;
height: 50px;
background: green;
margin: 10px 0px 0px 10px;
}会发生如下情形：
可以看到绿色的部分已经超出了***部分，如果并排的两个子布局总宽度超过了父布局的宽度，则会发生右边的布局会自动排到左边布局的下面，代码如下：
#left{
width: 200px;
height: 200px;
background: red;
float: left;
margin: 10px 10px;
}
#rigt{
width: 600px;
height: 200px;
background:blue;
float: left;
margin: 10px 10px;
}这里左布局宽度200px，右布局宽度600px，加上margin的边距一共是830px，超过了父布局的820px，所以出现的情形是这样的：
可以看到右布局排在了左布局的下面。本次博文就写到这里，希望大家可以支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
