今天為什么要給大家講解這個(gè)東西呢，因?yàn)閏ss這部分辫秧，尤其是數(shù)值這部分感覺非常簡(jiǎn)單束倍，但是尤其是簡(jiǎn)單的，卻很多人根本就沒有弄懂。所以今天就來講一下css的數(shù)值問題吧绪妹。大家還是好好聽一下吧甥桂。
width height 百分比
當(dāng)元素的height、width設(shè)置為百分比時(shí)邮旷，分別基于包含它的塊級(jí)對(duì)象的高度黄选、寬度。這個(gè)是常規(guī)百分比的含義婶肩。
<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 百分比
假設(shè)一個(gè)塊級(jí)容器办陷，寬 500px，高 300px律歼，塊級(jí)子元素定義 margin:10% 5%;民镜，你覺得 margin 的 top, right, bottom, left 計(jì)算值最終是多少？
我們來實(shí)際看一下
<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;
}
結(jié)果出來了险毁，50px 50px 50px 50px制圈，并不是50px 30px 50px 30px
為什么
CSS權(quán)威指南中的解釋：
我們認(rèn)為，正常流中的大多數(shù)元素都會(huì)足夠高以包含其后代元素（包括外邊距）畔况，如果一個(gè)元素的上下外邊距是父元素的height的百分?jǐn)?shù)鲸鹦，就可能導(dǎo)致一個(gè)無限循環(huán)，父元素的height會(huì)增加跷跪，以適應(yīng)后代元素上下外邊距的增加亥鬓，而相應(yīng)的，上下外邊距因?yàn)楦冈豩eight的增加也會(huì)增加域庇。
margin 的百分比值參照其包含塊的寬度進(jìn)行計(jì)算。
當(dāng)書寫模式變成縱向的時(shí)候覆积，其參照將會(huì)變成包含塊的高度听皿。我們改變一下上面例子中的 CSS 書寫模式：
.container{
width: 500px;
height: 300px;
border: 1px solid grey;
writing-mode: vertical-lr;
}
這時(shí)的結(jié)果為：30px 30px 30px 30px
也就是說書寫模式影響 margin 百分比的參照對(duì)象。
padding 百分比
同上 ?
舉個(gè)例子看看效果宽档。注意尉姨，這是縱向排列的例子。
注意這里
我是分割線
同上一個(gè)例子相比吗冤， 左側(cè)元素占位區(qū)域并沒有擴(kuò)大又厉，僅僅是由于margin 改為padding 導(dǎo)致背景區(qū)域擴(kuò)大而已。
因此椎瘟，padding的百分比不是相對(duì)于自身覆致，而是當(dāng)書寫模式為默認(rèn)橫向排列時(shí)，相對(duì)最近父元素的寬度肺蔚，書寫模式為writing-mode: vertical-lr; 縱向排列時(shí)煌妈，百分比相對(duì)于父元素高度
width、padding 聯(lián)合百分比
單用一個(gè)很簡(jiǎn)單，但如果聯(lián)合璧诵，可能就會(huì)有問題了汰蜘。這里我不禁要問一句：
兄弟，你聽過盒模型么之宿？
- W3C的標(biāo)準(zhǔn)盒模型
box-sizing: content-box族操，默認(rèn)屬性 設(shè)置的width或height是對(duì) 實(shí)際內(nèi)容（content）的width或height進(jìn)行設(shè)置，內(nèi)容周圍的border和padding另外設(shè)置 - 怪異盒模型
box-sizing: border-box設(shè)置的width或height是對(duì) 實(shí)際內(nèi)容（content）+內(nèi)邊距（padding）+邊框（border）之和
現(xiàn)在比被，我們來看個(gè)栗子色难，其中內(nèi)部元素width設(shè)為100%， padding設(shè)為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; // 補(bǔ)上這里是因?yàn)橛行┉h(huán)境默認(rèn)不是標(biāo)準(zhǔn)盒模型
}
.divider{
border-top: 1px solid lightblue;
text-align: center;
}
.text{
background: yellow;
}
在標(biāo)準(zhǔn)盒模型下姐赡，width: 100%; padding: 10% 10%; 會(huì)導(dǎo)致內(nèi)部元素溢出莱预，如果遇到這種情況，一般都會(huì)使用怪異盒模型项滑，即設(shè)置box-sizing: border-box依沮，這時(shí)候width的值是會(huì)包含padding的距離的。你可以自己打開控制臺(tái)試試枪狂，這里就不舉例了危喉。
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相對(duì)于父元素寬度严蓖，top相對(duì)于父元素高度薄嫡。同理可推出right相對(duì)于父元素寬度，bottom相對(duì)于父元素高度颗胡。
translate百分比
在translate 函數(shù)當(dāng)中使用百分比是以該元素自身的寬高作為基準(zhǔn)毫深。
當(dāng)子元素的width和height未知時(shí)，無法通過設(shè)置margin-left:-width/2和margin-top:-height/2來實(shí)現(xiàn)毒姨，這時(shí)候可以設(shè)置子元素的transform: translate(-50%,-50%)哑蔫。
<div class="container">
<div class="inner"></div>
</div>
復(fù)制代碼
.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 屬性和絕對(duì)定位、相對(duì)定位屬性加上 top弧呐、left 數(shù)值都可以使元素產(chǎn)生位移闸迷，但存在細(xì)微差別，表現(xiàn)在offsetLeft 和 offsetTop 屬性俘枫。
使用絕對(duì)定位腥沽、相對(duì)定位屬性加上 top、left 崩哩，會(huì)影響offsetTop和 offsetLeft 的值巡球；
使用 translate 的offsetTop和 offsetLeft 與沒有產(chǎn)生位移的元素沒有區(qū)別言沐，即無論translate 的值為多少，offsetTop和 offsetLeft 的值都是固定不變的酣栈。
margin為負(fù)值
- margin-left,margin-right為負(fù)值
- 元素本身沒有寬度险胰，會(huì)增加元素寬度
<div class="container">
<div class="inner">里層的元素設(shè)置了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;
}
里層的元素設(shè)置了margin-left:-100px
- 元素本身有寬度，會(huì)產(chǎn)生位移 補(bǔ)充
inner元素寬度屬性
.inner{
height: 100px;
background: lightblue;
margin-left: -100px;
width: 100%;
}
里層的元素設(shè)置了margin-left:-100px
- margin-top為負(fù)值矿筝，不管是否設(shè)置高度起便，都不會(huì)增加高度，而是會(huì)產(chǎn)生向上的位移
.inner{
height: 100px;
background: lightblue;
margin-left: -100px;
width: 100%;
}
里層的元素設(shè)置了margin-top:-100px
- margin-bottom為負(fù)值的時(shí)候不會(huì)位移,而是會(huì)減少自身供css讀取的高度.
<div class="container">
<div class="inner">里層的元素設(shè)置了margin-bottom:-100px</div>
<div>這里是下一個(gè)元素</div>
</div>
.inner{
height: 150px; // 此處height變?yōu)?50px
background: lightblue;
margin-bottom: -100px;
width: 100%;
}
里層的元素設(shè)置了margin-bottom:-100px
這里是下一個(gè)元素
那么窖维，你覺得負(fù)值改為負(fù)百分比又是什么情況呢榆综？歡迎留言
padding 為負(fù)值
很遺憾，padding不允許指定為負(fù)铸史，指定了也無效～
更多優(yōu)質(zhì)文章請(qǐng)關(guān)注我的知乎：打造小白進(jìn)階web前端高級(jí)工程師資料庫鼻疮，看完學(xué)的更加快，知識(shí)更牢固琳轿。你值得擁有（持續(xù)更新）~
