很多人css數值(百分比|負值)基準分不清，今天給你講講

今天為什麼要給大家講解這個東西呢，因為css這部分，尤其是數值這部分感覺非常簡單，但是尤其是簡單的，卻很多人根本就沒有弄懂。所以今天就來講一下css的數值問題吧。大家還是好好聽一下吧。

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為負值

1. 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

1. margin-top為負值，不管是否設置高度，都不會增加高度，而是會產生向上的位移

 .inner{
   height: 100px;
   background: lightblue;
   margin-left: -100px;
   width: 100%;
 }

裡層的元素設置了margin-top:-100px

1. 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 為負值

很遺憾，padding不允許指定為負，指定了也無效～

更多優質文章請關註我的知乎：打造小白進階web前端高級工程師資料庫，看完學的更加快，知識更牢固。你值得擁有（持續更新）~