溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近在學習寫網頁，在用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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
