css中的流，元素，基本尺寸

流 元素 基本尺寸

流之因此影響整個css世界，是由於它影響了css世界的基石 --HTML

HTML 常見的標籤有雖然標籤種類繁多，但一般咱們就把它們分爲兩類： 塊級元素（block-level element）和內聯元素（inline element）。

1.塊級元素

1.1 概念相關

「塊級元素」對應的英文是 block-level element，常見的塊級元素有 div,li,table等。

塊級元素和 display：block 不是一個概念

例如塊級元素 li 和 table ，他們的 display 的值分別爲 list-item 和 table

塊級元素具備換行性質，也就是一個水平流上只能單獨顯示一個元素，多個塊級元素則換行顯示；

因爲這種 換行性質，理論上塊級元素均可以配合 clear 屬性來清除浮動帶來的影響

.clear:after {
 content: '';
 display: table; // 也能夠是 block，或者是 list-item
 clear: both;
}

實際開發中，display的值要麼是block，要麼是table，並不會使用list-item

1.2 爲何 list-item會出現項目符號

全部的塊級元素都有一個主盒子，而list-item除了主盒子，還有一個附加盒子

list-item 之因此會出現項目符號(小黑點)，是由於生成了一個附加盒子，學名爲 「標記盒子」，專門來存放圓點，數字這些項目符號

IE不支持display：list-item 的緣由可能就是由於IE沒法建立 這個標記盒子的緣由。

1.3 display:inline-block

display:inline-block 咱們能夠把一個這樣的元素分爲兩個部分組成，外在的inline內聯盒子，裏面的block塊級盒子組成。這樣，因爲外在的外聯盒子，它的呈現方式既能夠和文字等元素同爲一行，又由於內在的塊級盒子，它能夠設置元素的寬高。

因而，按照display的屬性值不一樣

display	外盒子	內盒子
block	block	block
inline	inline	inline
inline-block	inline	block
table	block	table
inline-table	inline	table

外盒子影響着流的走向，內盒子控制元素的基本屬性

2. width/height 做用的具體細節

咱們在上面已經說過， width/height等屬性做用在內盒子中，也就是容器盒子中。接下來咱們說一下具體的做用細節。

流特性體如今水平方向上，咱們來討論width

2.1 width:auto

width的默認值就是auto

• 充分利用空間 -- div的默認寬度通常都是100%

• 收縮和包裹

• 收縮到最小 -- min-content

  當每一列空間都不夠的時候，文字能斷就斷，但中文是隨便斷的，英文單詞不能斷。

• 超出容器限制

  沒有相關設置的狀況下，通常元素不會主動超過父級寬度容器，除非一些特殊狀況

  例如：內容而很長的連續英文和數字

  ​ 或者內聯元素被設置了 white-space:nowrap 屬性

在 CSS 世界中，盒子分「內在盒子」和「外在盒子」，顯示也分「內部顯示」和「外部顯示」，一樣地，尺寸也分「內部尺寸」和「外部尺寸」。

上述的width：auto 的四條特性裏面，是默認寬度 100%顯示，是「外部尺寸」，其他所有是「內部尺寸」。而這惟一的**「外部尺寸」，是「流」的精髓所在。**

2.2 外部尺寸與流體特性

1. 正常流寬度。

   當咱們在一個容器裏倒入足量的水時，水必定會均勻鋪滿整個容器。

   a {
    display: block;
    width: 100%;
   }

   默認爲inline的a元素display設置爲block，自己就是表示寬度鋪滿整個父級，後面的100%寬度就不用再加了。

   做者總結過一套三無準則: 無寬度，無圖片，無浮動。

   其中無寬度的緣由就是由於一旦外部尺寸的塊級元素設置了寬度，其流動性就丟失了。

2. 格式化寬度

   格式化寬度僅出如今「絕對定位模型」中，也就是出如今 position屬性值爲 absolute 或 fixed 的元素中。在默認狀況下，絕對定位元素的寬度表現是「包裹性」，寬度由內部尺寸決定

   可是有一種狀況其寬度是由外部尺寸所決定的，例如：

   div { position: absolute; left: 20px; right: 20px; }

   假設該元素最近的具備定位特性的祖先元素的寬度是 1000 像素，則這個元素的寬度是 960（即 1000−20−20）像素。

2.3 內部尺寸與流體特性

所謂「內部尺寸」，簡單來說就是元素的尺寸由內部的元素決定，而非由外部的容器決定。

如何判斷一個元素是否爲內部尺寸呢？

​ 假如這個元素裏面沒有內容，寬度就是 0，那就是應用的「內部尺寸」。

「內部尺寸」有下面 3 種表現形式：

1. 包裹性。

   「包裹性」，除了「包裹」，還有「自適應性」。「自適應性」是區分後面兩種尺寸表現很重要的一點。自適應，指的是元素尺寸由內部元素決定。

   按鈕就是 CSS 世界中極具表明性的 inline-block 元素，可謂展現「包裹性」最好的例子，具體表現爲：按鈕文字越多寬度越寬（內部尺寸特性），但若是文字足夠多，則會在容器的寬度處自動換行（自適應特性）。

   「包裹性」對實際開發的做用

   請看這個需求：頁面某個模塊的文字內容是動態的，多是幾個字，也多是一句話。然 後，但願文字少的時候居中顯示，文字超過一行的時候居左顯示。該如何實現？

   官方演示代碼鏈接

2. 首選最小寬度

   在 CSS 世界中，圖片和文字的權重要遠大於佈局，所以，CSS 的設計者顯然是不會讓圖文在 width:auto 時寬度變成 0 的，此時所表現的寬度就是「首選最小寬度」。

   • 漢字最小寬度是每一個字的寬度

   • 英文最小寬度是由連續的英文字符單元決定，終止於空格，短橫線及其餘非字母符號

     想讓英文字符和中文同樣一個字符爲最小寬度，可使用css中的 word-break:break-all 屬性

   • 相似圖片這樣的替換元素的最小寬度就是該元素內容自己的寬度

3. 最大寬度

   最大寬度就是元素能夠有的最大寬度。

   若是內部沒有塊級元素或者塊級元素沒有設定寬度值，則「最大寬度」其實是最大的連續內聯盒子的寬度。

2.4 width 值做用的細節

對於一個元素，咱們設定其寬度爲 100px，以下：div { width: 100px; } 請問，100px 的寬度是如何做用到這個元素上的？

width 是做用在「內在盒子」上的,實際上，這個內在盒子是由不少部分組成 --- 盒子模型

咱們的這個「內在盒子」又被分紅了 4 個盒子，分別是 content box、padding box、border box和 margin box

「margin 的背景永遠是透明的」，所以不可能做爲 backgound-clip 或 backgroundorigin屬性值出現。margin 一旦設定具體寬度和高度值，其自己的尺寸是不會因 margin值變化而變化的。

width寬度做用在content盒子上

假設一個盒子的css以下：

div { width: 100px; padding: 20px; border: 20px solid; }

那麼它的寬度就變成了 100 + 20x2 + 20x2 = 180 px 了

合情合理，可是這種機制會致使如下問題：

1. 流動性丟失
2. 與現實世界表現不一致的困擾

有沒有什麼辦法能避免這種盒子計算而致使的錯位問題呢，方法之一就是採用書寫方式約束，使用「寬度分離原則」

2.4 CSS流體佈局下的寬度分原則

所謂「寬度分離原則」，就是 CSS 中的 width 屬性不與影響寬度的 padding/border（有時候包括 margin）屬性共存

如何實現？

分離，width 獨立佔用一層標籤，而padding、border、margin 利用流動性在內部自適應呈現。

例子：

這裏有一個div盒子

• 常規佈局

  .box {
   width: 100px;
   border: 1px solid;
  }

  此時寬度爲102像素，咱們如今但願元素內邊框有20像素的留白，咱們通常會想到的解決辦法是加padding的值

  .box {
   width: 100px;
   padding: 20px;
   border: 1px solid;
  }

  ok 此時有了留白，可是咱們發現寬度變成了 102 + 40 = 142px, 咱們常規的會使用減小寬度來實現咱們的要求

  .box {
   width: 60px; // 經過計算，減去 40 像素
   padding: 20px;
   border: 1px solid;
  }

  要求實現了，可是若是咱們是經過計算，才能達到咱們想要的，之後的調試會有更多的麻煩。

• 寬度分離

  .father {
   width: 102px;
  }
  .son {
   border: 1px solid;
   padding: 20px;
  }

  嵌套一層標籤，父元素定寬，子元素由於 width 使用的是默認值 auto，因此會如水流般自動填滿父級容器。

  寬度仍是 102 像素，子元素的 content box 自動變成了 60 像素，和上面反例的表現同樣。

  也就是說，使用「寬度分離」後，我們不須要燒腦子去計算了，並且頁面結構反而更穩固。

  這個作法的惟一缺點就是要多嵌套一層html標籤，和對開發者極高的css要求水平。

  針對這中狀況，有沒有即無需計算，又不用額外的套用標籤而實現呢？ ----> box-sizing

2.5 改變width/height 做用細節的 box-sizing

box-sizing 被直譯爲「盒尺寸」，實際上，其更準確的叫法應該是「盒尺寸的做用細節」，或者說得更通俗一點，叫「width 做用的細節」，也就是說，box-sizing 屬性的做用是改變 width 的做用細節。

正常狀況下width做用在盒模型中的四個盒子中的content盒子上，box-sizing的做用就是能夠把width做用的盒子變成其餘的幾個盒子上，有如下幾種寫法

.box1 { box-sizing: content-box; } /* 默認值 */
.box2 { box-sizing: padding-box; } /* Firefox 曾經支持 */
.box3 { box-sizing: border-box; } /* 全線支持 */
.box4 { box-sizing: margin-box; } /* 從未支持過 */

拿 .box3 { box-sizing: border-box; } 來講，就是把原來的寬度做用對象從content-box轉到了border-box

.box {
 width: 100px;
 box-sizing: border-box;
}   
此時這個盒子的寬度是100px

.box {
 width: 100px;
 box-sizing: border-box;
 border: 1px solid;
} 
這事的寬度仍是100px

2.6 height: auto 和 height: 100%

寬度稀缺，高度無限，因此在css中高度較寬度更簡單純潔

height: auto

全部的元素盒子在頁面中表現的每一個有多高，加在一塊兒，就是最終的高度值

height: 100%

height 和 width 還有一個比較明顯的區別就是對百分比單位的支持。對於 width 屬性，就算父元素 width 爲 auto，其百分比值也是支持的，可是對於 height 屬性，若是父元素height 爲 auto，只要子元素在文檔流中，其百分比值徹底就被忽略了。

對於普通文檔流中的元素，百分比高度值要想起做用，其父級必須有一個能夠生效的高度值。

爲什麼父級沒有具體高度值的時候，height:100%會無效？

若是包含塊的高度沒有顯式指定（即高度由內容決定），而且該元素不是絕對定位，則計算值爲auto。一句話總結就是：由於解釋成了 auto。要知道，auto 和百分比計算，確定是算 不了的。

如何讓元素支持 height:100%效果

1. 設定顯式的高度值。這個沒什麼好說的，例如，設置 height:600px，或者能夠生效的百分比值高度。

   html, body {
    height: 100%;
   }

2. 使用絕對定位。

   div {
    height: 100%;
    position: absolute;
   }

   此時的 height:100%就會有計算值，即便祖先元素的 height 計算爲 auto 也是如此。

   絕對定位元素的百分比計算和非絕對定位元素的百分比計算是有區別的:

   絕對定位的寬高百分比計算是相對於 padding box 的

   非絕對定位元素則是相對於 content box 計算的

3. min-width/max-width和min-height/max-height

3.1爲流體而生的 min-width/max-width

網頁寬度在 1200～1400 像素自適應，既知足大屏的大氣，又知足筆記本的良好顯示

.container {
 min-width: 1200px;
 max-width: 1400px;
}

無須 width 設置，直接使用 min-width/max-width

再好比一個圖片的盒子寬度已定：

img {
 max-width: 100%;
 height: auto!important;
}

height:auto 是必需的，不然，若是原始圖片有設定 height，max-width 生效的時候，圖片就會被水平壓縮。強制 height 爲 auto 能夠確保寬度不超出的同時使圖片保持原來的比例。但這樣也會有體驗上的問題，那就是在加載時圖片佔據高度會從 0 變成計算高度，圖文會有明顯的瀑布式下落。

3.2 不同凡響的初始值

width/height 的默認值是 auto，而 min-width/max-width 和 min-heigh/max-height 的初始值則要複雜些

max-width 和 max-height 的初始值是 none

min-width 和 min-height 的初始值是 auto

3.3 超越!important，超越最大

超越!important

min-width/max-width 和 min-height/max-height 屬性間，以及與width 和 height 之間有一套相互覆蓋的規則。這套規則用一句比較通俗的話歸納就是:超越!important，超越最大。

<img src="1.jpg" style="width:480px!important;">
img { max-width: 256px; }

以上代碼做用後，img的寬度爲 max-width的寬度 -- 256px，style、!important 統統靠邊站！由於 max-width 會覆蓋 width。

超越最大

.container {
 min-width: 1400px;
 max-width: 1200px;
 }

最小寬度竟然比最大寬度設置得還大, 最後誰會生效？

遵循「超越最大」規則（注意不是「後來居上」規則），min-width 活下來，max-width 被忽略，因而，.container 元素表現爲至少 1400 像素寬

3.4 任意高度元素的展開收起動畫技術

「展開收起」效果是網頁中比較常見的一種交互形式，一般的作法是控制 display 屬性值在 none 和其餘值之間切換

傳統實現可使用 jQuery 的 slideUp()/slideDown()方法

第一反應就是使用 height + overflow:hidden 實現。可是，不少時候，咱們展開的元素內容是動態的，換句話說高度是不固定的，所以，height 使用的值是默認的 auto

所以，下面代碼呈現的效果也是生硬地展開和收起：

.element {
 height: 0;
 overflow: hidden;
 transition: height .25s;
}
.element.active {
 height: auto; /* 沒有 transition 效果，只是生硬地展開 */
}

auto 是個關鍵字值，並不是數值，正如 height:100%的 100%沒法和 auto 相計算同樣，從 0px 到 auto 也是沒法計算的，所以沒法造成過渡或動畫效果。

咱們可使用max-height來解決這一問題

.element {
 max-height: 0;
 overflow: hidden;
 transition: max-height .25s;
}
.element.active {
 max-height: 666px; /* 一個足夠大的最大高度值 */
}

展開後個人高度只要比max-height小，那麼元素的高度就是height的計算高度，一個高度不定的任意元素的展開動畫效果就能實現了。

css世界官方demo

注意： max-height值在保證比height大的狀況下儘量和的小

由於max-height可能會影響動畫的時間， 比方說，咱們展開的元素高度是 100 像素，而 max-height 是 1000 像素，假如一個動畫1000ms，則前 900 ms 咱們是看不到收起效果的，由於max-height 從 1000 像素到 100 像素變化這段時間，元素不會有區域被隱藏，會給人動畫延遲 900 ms 的感受

4. 內聯元素

4.1 哪些是內聯元素

從定義：

內聯元素的內聯指的是外在盒子，外在盒子表現爲inline的元素都是內聯元素。

inline-block 和 inline-table 都是「內聯元素」，由於它們的 「外在盒子」都是內聯盒子。天然 display:inline 的元素也是「內聯元素」，那麼， 按鈕元素是內聯元素，由於其 display 默認值是 inline-block；img圖片元素也是內聯 元素，由於其 display 默認值是 inline 等。

從表現看:

就行爲表現來看，「內聯元素」的典型特徵就是能夠和文字在一行顯示。

浮動元素貌似也是能夠和文字在一個水平上顯示的,可是浮動已經脫離文檔流，不屬於內聯元素。

4.2 內聯世界深刻的基礎—內聯盒模型 (import)

<p>這是一行普通的文字，這裏有個 <em>em</em> 標籤。</p>

看似普通，實際上包含了不少術語和概念，或者換種通俗的說法，包含了不少種盒子。

1. 內容區域

   內容區域指一種圍繞文字看不見的盒子，其大小僅受字符自己特性控制，本質上是一個字符盒子（character box）；可是有些元素，如圖片這樣的替換元素，其內容顯然不是文字，不存在字符盒子之類的，所以，對於這些元素，內容區域能夠當作元素自身。

   這是一行普通的文字，這裏有個 <em>em</em> 標籤。

   以上代碼表現的區域，能夠理解爲內容區域。

2. 內聯盒子

   若是外部含內聯標籤等），則屬於「內聯盒子」；若是是個光禿禿的文字，則屬於「匿名內聯盒子」

3. 行框盒子（line box）

   每一行就是一個「行框盒子」（實線框標註），每一個「行框盒子」又是由一個一個「內聯盒子」 組成的。

4. 包含盒子/包含塊（containing box）

   <p> 標籤就是一個「包含盒子」（實線框標註），此盒子由一行一行的「行框盒子」組成。

4.3 幽靈空白節點

在 HTML5 文檔聲明中，內聯元素的全部解析和渲染表現就如同每一個行框盒子的前面有一個「空白節點」同樣。這個「空白節點」永遠透明，不佔據任何寬度，看不見也沒法經過腳本獲取，就好像幽靈同樣，但又確確實實地存在，表現如同文本節點同樣，所以，我稱之爲「幽靈空白節點」

<style>
  div {
    background-color: #cd0000;
  }
  span {
    display: inline-block;
  }
</style>
<body>
  <div><span></span></div>
</body>

瀏覽器打開上述代碼，發現div的高度不是0，緣由就在於幽靈空白節點。

「幽靈空白節點」實際上也是一個盒子，不過是個假想盒，名叫「strut」，中文直譯爲「支柱」，是一個存在於每一個「行框盒子」前面，同時具備該元素的字體和行高屬性的 0 寬度的內聯盒。

Each line box starts with a zero-width inline box with the element’s font and line height properties. We call that imaginary box a 「strut」.

內容總結與 張鑫旭大神 -- 《css世界》