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

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

width height 百分比

當元素的height、width設定為百分比時，分別基于包含它的塊級物件的高度、寬度，這個是常規百分比的含義，

 <div >
   <div >注意這里</div>
   <div >我是分割線</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 >
   <div >注意這里</div>
   <div >我是分割線</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 >
   <div ><div >注意這里</div></div>
   <div >我是分割線</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 >
   <div ></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 >
   <div ></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 >
   <div >里層的元素設定了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 >
   <div >里層的元素設定了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前端高級工程師資料庫，看完學的更加快，知識更牢固，你值得擁有（持續更新）~

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7068.html

標籤：Html/Css

上一篇：我：CSS垂直居中還有什么另類方法？求職者：不太了解了

下一篇：CSS（五）- 背景與邊框 - 邊框圓角與陰影基礎用法