塊元素設(shè)置margin:0 auto為什么會居中?

首先解釋一下auto自適應(yīng)

行盒的width和height的auto它是適應(yīng)我們的內(nèi)容,內(nèi)容多大寬高多大塊(塊盒的高度也是這樣),

塊盒的width表示自適應(yīng)父元素內(nèi)容區(qū)(準確來說是包含塊)計算內(nèi)容區(qū)的剩余空間做為值

margin左右為auto也是自適應(yīng)父元素內(nèi)容區(qū)

例子:

pareant{

????width:400px;?

????height:400px;

????background:red

}

child{

????width:100px;

????height:100px;

????background:linghtblue;

????margin-right:auto

}

<div class="parent">

????<div class="child"></div>

</div>

水平方向能設(shè)置為auto的盒模型屬性:padding(先不考慮),margin-left,margin-right,width

以上面例子為參考子元素寬占父元素100px 也就是說父元素內(nèi)容區(qū)剩余300px哪margin-right為auto就等于300.

如果子元素寬度和外邊距都是auto的情況,

哪子元素寬度(width)占用剩余空間,右外邊距(margin-right)為0.

在來說說為什么居中:你想想啊子元素寬度固定,margin左右外邊距都為auto值相等都是占用父元素的剩余空間,哪它不就平分剩余空間了

也就是說左右外邊距相等不就居中了嗎

在來解釋塊元素為什么獨占一行?

首先塊元素的盒模型水平方向上的屬性(margin padding border content)必須加起來要等于父元素的內(nèi)容區(qū)的寬度(不然我怎么獨占一行對不對?)

等式:margin-left+border-left+padding-left+width+margin-right+border-right+padding-right=其父元素內(nèi)容區(qū)的寬度

以上等式必須滿足（因為它要獨占一行）,如果相加結(jié)果不成立,則過渡約束,則等式會自動調(diào)整

?如果這7個值沒有auto的情況,則瀏覽器會自動調(diào)整margin-right值以使等式滿足（讓margin-right等于auto來吸收剩余空間因為默認元素從左往右排列的所以調(diào)整最后一個值外邊距）

?-?這7個值中有三個值可以設(shè)置auto ：width margin-left margin-right

?-?如果一個寬度和一個外邊距設(shè)置為auto,則寬度會調(diào)整到最大(width計算剩余空間),設(shè)置為auto的外邊距會自動為0

?-?如果三個值都設(shè)置為auto,這外邊距都是0,寬度為最大(同樣width計算剩余空間)

?-?如果將兩個外邊距設(shè)置為auto,寬度固定值,則外邊距設(shè)置為相同的值（值相同平分剩余空間）

? ? 所以經(jīng)常用這個特點來使一個元素在父元素中水平居中?

有什么問題歡迎指正