盒子布局
盒子的水平布局
-
元素水平方向的布局：
元素在其父元素中，水平方向的位置由以下幾個屬性共同決定-
margin-left
-
border-left
-
padding-left
-
width
-
padding-right
-
border-right
-
margin-right
上述幾個屬性對應值的和=其父元素內容區的寬度（必須滿足）
如果相加結果使等式不成立，則稱為過渡約束，則等式會自動調整
-
調整情況：
這七個值中有三個值可設定為auto-
width 默認值為 auto
-
margin-left 默認值 0
-
margin-right 默認值 0
-
如果七個值中沒有auto的情況，則瀏覽器會自動調整margin-right的值使等式滿足
-
如果某個值為auto，則會自動調整為auto的那個值以使等式成立
-
如果將一個寬度和一個外邊距設定為auto，則寬度會調到最大，設定為auto的外邊距自動為0
-
如果將三個值都設定為 auto ，則外邊距都是0，寬度最大
-
如果將外邊距都設定為auto ，寬度為固定值，則外邊距設定為相同的值
利用這一特點來使一個元素在其父元素中水平居中width:100px; margin:0 auto; /*水平居中*/
-
-
-
-
盒子的垂直布局
- 默認情況下：父元素的高度被內容撐開
子元素是在父元素的內容區中排列的- 如果子元素的大小超過了父元素，則子元素會從父元素中溢位
使用overflow 屬性設定父元素如何處理溢位的子元素- 可選值
- visible 默認值 子元素會從父元素中溢位，在父元素外部的位置溢位
- hidden 溢位的內容將會被裁剪，不會顯示
- scroll 生成兩個滾動條，通過滾動條來查看完整的內容
- auto 根據需要生成滾動條
- overflow-x：單獨處理水平方向
- overflow-y：單獨處理垂直方向
- 可選值
- 如果子元素的大小超過了父元素，則子元素會從父元素中溢位
外邊距折疊問題
-
相鄰的垂直方向外邊距會發生重疊現象
-
兄弟元素：
- 兄弟元素之間相鄰，垂直外邊距會取兩者之間的最大值（兩者都為正值）
特殊情況：如果相鄰的外邊距一正一負，則取兩者之和
? 都是負值，則取兩者中絕對值較大的
-
父子元素：
- 父子元素間相鄰外邊距，子元素的會傳遞給父元素（上外邊距）需進行處理
- 處理方式詳見浮動中高度塌陷的解決方案
行內元素的盒模型：
-
-
行內元素不支持設定寬度和高度
-
行內元素可以設定 padding ，但是垂直方向 padding 不影響頁面的布局
-
行內元素可以設定 margin ，但是垂直方向 margin 不影響頁面的布局
-
行內元素可以設定 border ，但是垂直方向 border 不影響頁面的布局
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/280203.html
標籤：其他
上一篇：網頁布局之盒子模型