最近在学习写网页,在用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,所以出现的情形是这样的:
可以看到右布局排在了左布局的下面。本次博文就写到这里,希望大家可以支持。
时间: 2024-10-24 22:16:07