div水平方向布局

• 元素的水平方向的布局
• • • 水平居中

元素的水平方向的布局

元素在其父元素中水平方向的位置由以下幾個屬性共同決定：

margin-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargin-right

一個元素在其父元素中，水平布局必須滿足以下等式：

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其父元素內容區的寬度（必須滿足）

注：

以上等式必須滿足，若相加結果使等式不成立，則稱為過度約束，

則等式會自動調整。

調整的情況：

a）若這七個值中沒有auto的情況，則瀏覽器會自動調整為margin-right

值以使等式滿足

b）這七個值中有三個值可以設置為auto

width `其值默認為auto`margin-left `其默認值為0`margin-right `其默認值為0`

---

如果某個值為auto，則會自動調整為auto的那個值以使等式成立

例：

0 + 0 + 0 + auto + 0 + 0 + 0 = 800 則 auto=8000 + 0 + 0 + auto + 0 + 0 + 200= 800 則 auto=600200 + 0 + 0 + auto + 0 + 0 + 200= 800 則 auto=400

注：

a）如果將一個寬度和一個外邊距設置為auto，則寬度會調整到最大

，設置為auto的margin會自動為0

b）如果將三個值都設置為auto，則外邊距都是0，寬度最大

水平居中

c）如果將兩個外邊距設置為auto，寬度固定值，則會將外邊距設置

為相同的值（水平居中），因此我們經常利用這個特點來使一個元素

在其父元素中水平居中

示例：

//水平居中 width:100px; margin:0 auto;

注：若子元素超出父元素大小，即等式變成0+0+0+1000+0+0+0=800，
則margin-right會被調整成-200，等式就成立了。

總結

以上是生活随笔為你收集整理的div水平方向布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。