詳解margin: auto
阿新 • • 發佈:2017-10-14
效果 平時 pad class 豎直 等於 strong 設置 padding
auto是margin的可選值之一。相信大家平時使用auto值時,最多的用法大概是 margin: 0 auto; 和 margin: auto;
不過你可能也發現了不論是 margin: auto; 還是 margin: 0 auto; 效果都是一樣的,都是讓 #demo 水平居中了,但縱向並沒有任何變化。
大家都知道 margin 是復合屬性,也就是說 margin: auto; 其實相當於 margin: auto auto auto auto;,margin: 0 auto;相當於 margin: 0 auto 0 auto;,四個值分別對應上右下左。
水平方向:
> 正常流中的塊級元素框的水平總和就等於父元素的width
‘margin-left‘ + ‘border-left-width‘ + ‘padding-left‘ + ‘width‘ + ‘padding-right‘ + ‘border-right-width‘ + ‘margin-right‘ = width of containing block
> 在水平格式化的“7大屬性”中,只有3個可以設置為auto: width, margin-left, margin-right;
水平方向的 auto,其計算值取決於可用空間(剩余空間)。
豎直方向:
寬度計算默認涉及包含塊(可粗略理解為父級元素),而高度計算默認涉及內部元素 。
默認行為的高度計算則是一系列“撐高”規則,而非“適應於父級”規則。
對於絕對定位元素,有以下算式:
top
+ margin-top
+ border-top-width
+ padding-top
+ height
+ padding-bottom
+ border-bottom-width
+ margin-bottom
+ bottom
= height of containing block
.father {
position: relative;
width: 100px;
height: 100px;
background -color: black;
}
.son {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 50%;
height: 50%;
margin: auto;
background-color: red;
}
詳解margin: auto