CSS進階（2）—— width,height如此高深,難道你真懂得

本節內容主要針對《CSS world》第三章——流、元素與基本尺寸的內容進行了一些提取與歸納。 不可否認的是《CSS world》是一本很是好的書，但就看完這一章的感覺而言，ZXX還不足以被稱之爲一個很是好的做者（純屬我的觀點）。做者想經過不斷地拋出問題，以及給出相應解決方案的方式，引導式的帶領讀者進入CSS的世界。然而CSS世界每一個「個體」之間的關聯性過於強烈的特性致使很難單獨的去講某一個特性，所以第一遍看的時候會有不少不明白的地方，不過我也不擔憂，學1+1的時候也以爲難，後來學了1*1，1+1看起來就簡單了。

1.元素的內外盒子

HTML中只有兩種元素，塊級元素和內聯元素。塊級元素擁有「換行」的特性，通常用於結構（骨架），內聯元素可以同行顯示，通常用於內容展現。須要注意的是，塊級元素並非指「display:block」的元素，一樣的，內聯元素也不僅僅是「display:inline"的元素。可是，這兩句話反過來講是能夠的。那麼是否是指，塊級元素包含了"display:block/table/list-item"之類的元素呢？也不是！

這裏咱們須要藉助一個經常使用的設置——display:inline-block來引出一個概念，就是每一個HTML標籤或者說元素，都包含了內、外兩層。inline-block的特性是，"外層盒子"用了內聯元素的特性——能夠和其餘內聯元素同行顯示，而"內層盒子"則藉助了塊級元素的自適應寬度的特性，而且可以設置容器的高度。

藉助inline-block元素的內外盒子的概念，就能夠得出，display:block=> display:block-block，他是由外在的塊級盒子和內在的塊級盒子組成的。display:inline元素也是同理。

2.list-item中特殊的「附加盒子」

display:list-item是li標籤的默認屬性，一般顯示爲一個F12沒法選中的小圓點，事實上查閱一下list-style的屬性，你會發現有不少不只僅是小圓點，還有諸如1234排序的這種標記，但因爲其不服從管教的特性，一般咱們會將list-style置爲none。咱們都知道，list-style元素隸屬於「塊級元素」，然而list-item因爲其特殊性質，在塊級元素以外還有一個"附加盒子"，學名"標記盒子"（marker box），專門用來放圓點、數字這種標記盒子，所以全部的塊級元素在「主塊級盒子」的基礎上，list-item還有其特殊的一個附加盒子。關於這個特性，我的以爲有點印象就好，實際項目中list-item幾乎是棄用的存在。

3.深藏不露的width：auto

若是沒有手動設置width，也就是width設爲默認值auto，根據不一樣的元素，會表現出不一樣的特性。

• 首先是最多見的塊級元素，如div、p標籤這些元素的默認寬度就是100%於父容器，這裏咱們先不討論高度，咱們能夠稱這種特性爲充分利可用空間。
• 第二個特性是子元素的收縮與父元素的包裹（原文中這裏用收縮與包裹，彷佛有些不太恰當），典型表明是浮動、絕對定位、inline-block元素、table元素，這種特性在後面會一一展開，這裏很少贅述。
• 收縮到最小，則會中最容易出如今table-layout爲auto的表格中。有興趣的能夠去這個連接試一下（地址）
• 超出容器限制。在父元素寬度固定的狀況下，子元素的寬度通常是不會超過父元素的，除非有一些特殊狀況，如連續的特別長的英文單詞，或者是內聯元素被設置了white-space:nowrap。有興趣的能夠去這個連接試一下（地址）

4.淺析元素的包裹性

元素的包裹性在上一點的第二條中有提到，這裏爲何要說淺析，由於在後續講到浮動，定位的時候都會牽扯到元素的包裹特性，所以這裏只做一些概念的瞭解和簡單的應用。首先什麼是元素的"包裹性"，顧名思義，就是包裹和自適應性，所謂自適應性，指的是在指定父容器寬度（注意這裏的指定不必定是具體指明）的內部子元素的尺寸由他自己決定。換句話說，內部子元素彷佛有個max-width：「父容器寬度」的感受。固然，在子元素的min-width大於father.width的時候，這條準則不適用。當子元素的內容寬度即將超出父元素的寬度時，就會自動換行，聽起來很正常，實際上則大有用途，並且在這條法則遇到float和絕對定位的時候會遇到不少看似不怎麼正常的狀況，在後面講到這部份內容的時候還會具體描述。

5.利用元素包裹性，實現文字較少時居中對齊，文字較多時，內容左對齊

利用元素的包裹性，咱們能夠作一個簡單的需求，如：咱們但願在一個肯定寬度的元素內文字內容少的時候文字居中對齊，而文字內容多的時候文字左對齊。在文字少的時候，inline-block元素的外層盒子是inline元素，而inline元素在block元素中能夠用text-align：center居中對齊。當inline-block元素內部的寬度 ==> 父元素寬度的時候，會自動換行，這時候咱們利用inline-block內部的塊級元素特性，給內層盒子添加text-align:left，這樣子元素相對於外部的總體表現老是總體居中，而其自身的表現則是文字居左，最終代碼以下。

<!-- 文字少居中顯示，文字多居左顯示 -->
<div class="box">
    <div class="content">少許文字</div>
</div>
<div class="box">
    <div class="content">許多文字許多文字許多文字許多文字</div>
</div>
<style> .box{ width: 200px; text-align: center; background: #1A95FF; } .box>.content{ margin:20px 0; display: inline-block; text-align: left; background: #E6A23C; } </style>
複製代碼

因爲markdown編輯器支持標籤語言，所以咱們能夠直接預覽最終效果以下（小提示：你能夠經過瀏覽器直接檢查下面的元素看到CSS樣式）

少許文字

許多文字許多文字許多文字許多文字

6.width值的做用對象

關於盒模型的四層這裏簡單複述一下，從內到外分別是content-box,padding-box,border-box和透明的margin-box。通常狀況下，width是直接做用給content-box的，這樣每每會致使咱們在佈局的時候添加padding和border的時候，致使元素總體的寬高變大。如咱們從設計稿上獲取一個width:100px，padding:10px,border:1px的元素，最終咱們須要經過width - paddingLeft - paddingRight - boderLelft - borderRight去計算content-width。這樣未免太過麻煩。所以CSS提供了border-box模型方便咱們進行開發。事實上box-sizing:border-box改變的就是width的做用對象。原來width只做用於content-box，用了boder-box後，width = padding + border + content 。

7.width:100%究竟是多寬——百分比的動態計算是怎麼回事

其實在原文中是沒有這一章節的，只有相似的內容。首先這個問題是什麼意思，來看一個例子，若是有個inline-block特性的父元素的寬度是auto，他包含兩個用百分比計算寬度的子元素A和B，A的寬度是50%，B的寬度也是50%，但AB裏面的內容不相等，那麼實際會產生什麼效果呢？眼見爲實。

<!-- 百分比計算問題 -->
<div class="f_box">
    <span class="box_a">我是A元素</span>
    <span class="box_b">我是B元素我是B元素</span>
</div>
<style> .f_box{ display: inline-block; height: 100px; background: #F56C6C; white-space: nowrap; } .box_a{ width:50%; background: #E6A23C; display: inline-block; } .box_b{ width:50%; background: #67c23a; display: inline-block; } </style>
複製代碼

因爲markdown編輯器支持標籤語言，所以咱們能夠直接預覽最終效果以下（小提示：你能夠經過瀏覽器直接檢查下面的元素看到CSS樣式）

我是A元素 我是B元素我是B元素

致使上面結果的緣由是因爲父元素包含的兩個子元素寬度都是百分比寬度，所以他們的寬度都依賴於父元素的width乘百分比獲得，而父元素的寬度是auto，auto乘百分比=NaN。固然在實際計算的時候，並不是如此，並且父元素的寬度已經經過auto計算獲得了。這事實上跟瀏覽器的渲染順序有關係，關於渲染機制，我以前有寫一篇文章大概理了一下瀏覽器的渲染過程，固然人沒有今天這個這麼細緻，在本例中，你只須要知道dom內容是從上往下，從外往內渲染便可。你能夠這麼理解，當渲染到父元素的時候，子元素的寬度=auto（其實是依賴父元素寬度的百分比），所以父元素遵循圖文至高法則，獲得A,B元素content區域的寬度加一加做爲本身的最終的寬度，有了這個通過auto獲得的寬度後，再和子元素的百分比進行計算，子元素相應的寬度就出來了，在本例中，A的內容比較少，所以寬度還有冗餘，而B的內容多了一些，則超出width區域了。

8.height：100%有時候爲何不生效？

關於height：auto的問題這裏不過多敘述，一般狀況下，因爲瀏覽器的寬度有限，所以在設計的時候width：auto比height複雜得多，有些人可能以爲換行屬於高度分配的一部分，事實上換行是由於寬度不夠才致使的，高度改變只是其表現形式而已。對於height：auto來講，只要記錄每一個元素高度，疊加便可，固然某些特殊的屬性如float，margin致使的疊壓問題等，會在後面單獨說明。

下面來說講重點，也是height和width一個比較明顯的區別，就是對百分比單位的支持。對於width屬性，就算其父元素是width：auto（固然這個樣式不須要顯示聲明），其百分比值也是能夠支持的。可是對於height的百分比屬性，若是其父元素是height爲auto，那麼只要子元素在文檔流中（如float，絕對定位均可以使元素脫離文檔流），其百分比值就徹底沒用了。

爲何會這樣呢？由於在規範中給出了答案。原文這樣描述：若是包含塊的高度沒有顯示指定，而且該元素不是絕對定位，則計算值爲auto。也就是子元素的100%*auto=NaN，因此計算結果無效。所以非絕對定位元素要使用height：100%，要不斷的給父級，父級的父級添加height：具體值，纔會生效，好在這種狀況不會不少。

那麼寬度爲何能夠支持呢？由於包含塊的寬度取決於該元素的寬度，其行爲是「未定義」的，也就是不一樣的瀏覽器能夠有不一樣的特性，好在你們都想到一塊去了，最終的佈局效果在各個瀏覽器下都是一致的。就是按照包含塊真實的計算值做爲百分比計算的基數。

9.height:100%在絕對定位元素和非絕對定位元素表現的不一樣點

剛纔已經說明了若是讓非絕對定位元素height百分比生效的方法，就是顯示聲明其父元素的高度。那麼height：100%究竟是多高呢？咱們已經知道了寬度的做用對象在普通盒模型裏是content，那麼height：100%是否是也是指content-height*100%呢？答案是，在非絕對定位的子元素中是這樣，但在絕對定位元素中，計算百分比的時候會以父級元素的content-height + padding-height做爲基數。這只是個注意點，眼見爲實就好。

<div class="box">
    <div class="child">高度100px</div>
</div>
<div class="box rel">
    <div class="child">高度160px</div>
</div>
<style> .box { height: 160px; padding: 30px; box-sizing: border-box; background-color: #F56C6C; } .child { height: 100%; background: #E6A23C; } .rel { position: relative; } .rel > .child { width: 100%; position: absolute; } </style>
複製代碼

因爲markdown編輯器支持標籤語言，所以咱們能夠直接預覽最終效果以下（小提示：你能夠經過瀏覽器直接檢查下面的元素看到CSS樣式）

高度100px

高度160px

10.min/max-width/height的初始化探究

關於min/max-width/height是作什麼，從字面上理解就能夠，規定元素的最大最小基本尺寸。一般用於自適應佈局方案。與基本尺寸（width，height）不一樣的是，min/max-width/height的初始值要相對複雜一些。根據做者的測試，min-width/height的初始值是auto，max-width/height的初始值是none。下面咱們寫兩個例子，來證實一下爲何min-的初始值是auto而不是0，max-的初始時none而不是auto。

首先是min-，這個例子會很是好理解，只須要用下面的CSS證實便可

<style> .box{ transtion:min-height .3s; } .box:hover{ min-height:300px; } </style>
複製代碼

若是min-height默認爲0的話，當咱們鼠標移入box時，應該會有連續0-300px的動畫出現，然而事實是，高度是忽然增長的，沒有過渡，所以min-height默認應該是auto，固然你也能夠寫一下證實一下。

<style> .box{ min-height:0px; transtion:min-height .3s; } .box:hover{ min-height:300px; } </style>
複製代碼

當聲明min-height爲0的時候，過渡效果就出現了。那麼max-默認爲何不是auto呢？借用做者的例子，已知父元素的width是400px，子元素的width是800px，若是你沒有聲明max-width，且他的默認值符合猜測auto的話，那麼max-width的值應該是400px,那麼這個max-width的默認值便會覆蓋width的值，width：800px就不生效了，實際上並不會這樣，所以咱們能夠得出max-width:none的結論。

11.min > max > !important

原文標題，超越！important，超越最大 —— 標題狗!

其實就是一個覆蓋問題，CSS世界中權重"最大"的是!important,嗎？其實還有特例，好比今天要說的min-,max-，若是你設置了width：100px，並給他買了個保險!important ===> width:100px!important; 然而遇到了max-width:50px，最後寬度的值依舊是50px，!important失效。當min-width>max-width的時候，這個時候聽誰的呢？聽min-width的，因此記住min>max>!important便可。

12.利用max-height的原理實現元素的展開效果

展開收起」是網頁中比較常見的操做，以前我一直用改變height的方式去作，雖然須要動態計算height，但也勉強能用，如今有一種更好的方法，讓height從一個比較小的值變成"auto"。我之前也這麼作過，發現沒有動畫，由於auto - 0 =NaN,所以是不會有動畫。若是能讓auto變成一個具體的值就行了，就像我以前提到的動態計算height的值。如今咱們能夠用max-height的自適應性來解決這個問題。咱們只須要設定爲保證比展開內容高度大的值就能夠，由於max-height值比height計算值大的時候，元素的高度就是height的計算高度。眼見爲實

<!-- 展開效果 -->
<div class="father">
	<div class="son">1</div>
	<div class="son">2</div>
	<div class="son">3</div>
	<div class="son">4</div>
	<div class="son">5</div>
</div>
<style> .father{ max-height: 20px; overflow: hidden; transition: 0.5s linear; /*background: green;*/ } .father:hover{ max-height: 200px; /*background: red;*/ } .son{ height: 20px } </style>
複製代碼

效果連接點這裏

不忘初心，方得始終

本文的內容到此就結束了，喜歡博主的童鞋能夠掃描二維碼加博主好友~ 也能夠掃中間二維碼入駐博主的粉絲羣（708637831）~固然你也能夠掃描二維碼打賞並直接包養帥氣的博主一枚。