很多人css數值(百分比|負值)基準分不清,今天給你講講
https://www.cnblogs.com/coderhf/p/13267680.html
width height 百分比
當元素的height、width設定為百分比時,分別基於包含它的塊級物件的高度、寬度。這個是常規百分比的含義。
<div class="container">
<div class="inner">注意這裡</div>
<div class="divider">我是分割線</div>
</div>
.container{
width: 500px;
height: 300px;
border: 1px solid grey;
}
.inner{
background: lightblue;
text-align: center;
width: 50%;
height: 50%;
}
.divider{
border-top: 1px solid lightblue;
text-align: center;
}
margin 百分比
假設一個塊級容器,寬 500px,高 300px,塊級子元素定義 margin:10% 5%;
,你覺得 margin 的 top, right, bottom, left 計算值最終是多少?
我們來實際看一下
<div class="container">
<div class="inner">注意這裡</div>
<div class="divider">我是分割線</div>
</div>
.container{
width: 500px;
height: 300px;
border: 1px solid grey;
}
.inner{
margin: 10% 10%;
background: lightblue;
text -align: center;
}
.divider{
border-top: 1px solid lightblue;
text-align: center;
}
結果出來了,50px 50px 50px 50px,並不是50px 30px 50px 30px
為什麼
CSS權威指南中的解釋:
我們認為,正常流中的大多數元素都會足夠高以包含其後代元素(包括外邊距),如果一個元素的上下外邊距是父元素的height的百分數,就可能導致一個無限迴圈,父元素的height會增加,以適應後代元素上下外邊距的增加,而相應的,上下外邊距因為父元素height的增加也會增加。
margin
的百分比值參照其包含塊的寬度進行計算。
當書寫模式變成縱向的時候,其參照將會變成包含塊的高度。我們改變一下上面例子中的 CSS 書寫模式:
.container{
width: 500px;
height: 300px;
border: 1px solid grey;
writing-mode: vertical-lr;
}
這時的結果為:30px 30px 30px 30px
也就是說書寫模式影響 margin 百分比的參照物件。
padding 百分比
同上 Î
舉個例子看看效果。注意,這是縱向排列的例子。
注意這裡
我是分割線
同上一個例子相比, 左側元素佔位區域並沒有擴大,僅僅是由於margin
改為padding
導致背景區域擴大而已。
因此,padding的百分比不是相對於自身,而是當書寫模式為預設橫向排列時,相對最近父元素的寬度,書寫模式為writing-mode: vertical-lr;
縱向排列時,百分比相對於父元素高度
width、padding 聯合百分比
單用一個很簡單,但如果聯合,可能就會有問題了。這裡我不禁要問一句:
兄弟,你聽過盒模型麼?
-
W3C的標準盒模型
box-sizing: content-box
,預設屬性 設定的width或height是對 實際內容(content)的width或height進行設定,內容周圍的border和padding另外設定 -
怪異盒模型
box-sizing: border-box
設定的width或height是對 實際內容(content)+內邊距(padding)+邊框(border)之和
現在,我們來看個栗子,其中內部元素width
設為100%
, padding
設為10%
<div class="container">
<div class="inner"><div class="text">注意這裡</div></div>
<div class="divider">我是分割線</div>
</div>
.container{
width: 500px;
height: 300px;
border: 1px solid grey;
}
.inner{
background: lightblue;
text-align: center;
width: 100%;
padding: 10% 10%;
box-sizing: content-box; // 補上這裡是因為有些環境預設不是標準盒模型
}
.divider{
border-top: 1px solid lightblue;
text-align: center;
}
.text{
background: yellow;
}
在標準盒模型下,width: 100%; padding: 10% 10%;
會導致內部元素溢位,如果遇到這種情況,一般都會使用怪異盒模型,即設定box-sizing: border-box
,這時候width
的值是會包含padding
的距離的。你可以自己開啟控制檯試試,這裡就不舉例了。
top、left、right、bottom 百分比
還是看圖說話
<div class="container">
<div class="inner"></div>
</div>
.container{
width: 500px;
height: 300px;
border: 1px solid grey;
position: relative;
}
.inner{
width: 200px;
height: 100px;
background: lightblue;
top:10%;
left: 10%;
position: absolute;
}
可以很明顯的看出,left相對於父元素寬度,top相對於父元素高度。同理可推出right相對於父元素寬度,bottom相對於父元素高度。
translate百分比
在translate 函式當中使用百分比是以該元素自身的寬高作為基準。
當子元素的width和height未知時,無法通過設定margin-left:-width/2和margin-top:-height/2來實現,這時候可以設定子元素的transform: translate(-50%,-50%)
。
<div class="container">
<div class="inner"></div>
</div>
.container{
width: 500px;
height: 300px;
border: 1px solid grey;
position: relative;
}
.inner{
width: 50%;
height: 50%;
background: lightblue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
translate 屬性和絕對定位、相對定位屬性加上 top、left 數值都可以使元素產生位移,但存在細微差別,表現在offsetLeft 和 offsetTop 屬性。
使用絕對定位、相對定位屬性加上 top、left ,會影響offsetTop和 offsetLeft 的值;
使用 translate 的offsetTop和 offsetLeft 與沒有產生位移的元素沒有區別,即無論translate 的值為多少,offsetTop和 offsetLeft 的值都是固定不變的。
margin為負值
-
margin-left,margin-right為負值
-
元素本身沒有寬度,會增加元素寬度
<div class="container">
<div class="inner">裡層的元素設定了margin-right:-100px</div>
</div>
.container{
width: 500px;
height: 200px;
border: 1px solid grey;
margin-left: 100px;
}
.inner{
height: 100px;
background: lightblue;
margin-left: -100px;
}
裡層的元素設定了margin-left:-100px
-
元素本身有寬度,會產生位移 補充
inner
元素寬度屬性
.inner{
height: 100px;
background: lightblue;
margin-left: -100px;
width: 100%;
}
裡層的元素設定了margin-left:-100px
-
margin-top為負值,不管是否設定高度,都不會增加高度,而是會產生向上的位移
.inner{
height: 100px;
background: lightblue;
margin-left: -100px;
width: 100%;
}
裡層的元素設定了margin-top:-100px
-
margin-bottom為負值的時候不會位移,而是會減少自身供css讀取的高度.
<div class="container">
<div class="inner">裡層的元素設定了margin-bottom:-100px</div>
<div>這裡是下一個元素</div>
</div>
.inner{
height: 150px; // 此處height變為150px
background: lightblue;
margin-bottom: -100px;
width: 100%;
}
裡層的元素設定了margin-bottom:-100px
這裡是下一個元素
那麼,你覺得負值改為負百分比又是什麼情況呢?歡迎留言
很遺憾,padding不允許指定為負,指定了也無效~