《css世界》筆記之流、元素與基本尺寸

1、 塊級元素

• 基本特性：就是一個水平流上只能單獨顯示一個元素，多個塊級元素則換行顯示。

• 塊級元素和“display 爲block 的元素”不是一個概念，display:list-item、display:table均是塊級元素。

• 用display值爲block和list-item來配合clear屬性來清除浮動帶來的影響（不使用list-item的原因：字母比較多、會出現項目符號、ie瀏覽器不支持僞元素的display 值爲listitem）。

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

2、list-item 元素會出現項目符號的原因

• list-item 元素會出現項目符號是因爲生成
  了一個附加的盒子，學名“標記盒子”（marker box），專門用來放圓點、數字這些項目號。
  IE瀏覽器下僞元素不支持list-item 或許就是無法創建這個“標記盒子”導致的。

• display值爲block的元素由外在的“塊級盒子”和內在的“塊級容器盒子”組成。

• display值爲inline-block的元素由外在的“內聯盒子”和內在的“塊級容器盒子”組成。

• display值爲inline的元素內外均是“內聯盒子”。

• display值爲inline-table的元素外面是“內聯盒子”，裏面是“table 盒子”。

• width/height 作用在是內在盒子，也就是“容器盒子”。

3、width:auto

width 的默認值是auto,默認值的4種表現：

• <div>、<p>這些元素的寬度默認是100%於父級容器的，這種充分利用可用空間的行爲還有個專有名字，叫作fill-available。

• 是浮動、絕對定位、inline-block 元素或table 元素收縮到合適。

• 收縮到最小，這個最容易出現在table-layout 爲auto 的表格中。

• 超出容器限制

就第一個是“外部尺寸”，其餘全部是“內部尺寸”。而這唯一的“外部尺寸”，是“流”的精髓所在。

4、外部尺寸與流體特性

元素尺寸由外部的容器決定

• 正常流寬度是一種margin/border/padding和content 內容區域自動分配水平空間的機制，儘量用無寬帶的流來佈局。

• 格式化寬度：在position屬性值爲absolute 或fixed 的元素中。在默認情況下，寬度由內部尺寸決定。當left/top 或top/bottom 對立方位的屬性值同時存在的時候，元素的寬度表現爲“格式化寬度”，其寬度大小相對於最近的具有定位特性（position 屬性值不是static）的祖先元素計算。margin、border、padding 和content 內容區域同樣會自動分配水平（和垂直）空間

5、內部尺寸與流體特性

元素尺寸由內部元素決定，“內部尺寸”有下面3 種表現形式：

• 包裹性:元素尺寸由內部元素決定，但永遠小於“包含塊”容器的尺寸（除非容器尺寸小於元素的“首選最小寬度”）按鈕:

  1. 按鈕就是inline-block 元素。

  2. 按鈕文字越多寬度越寬（內部尺寸特性），但如果文字足夠多，則會在容器的寬度處自動換行（自適應特性）。

  3. <button>標籤按鈕纔會自動換行，<input>標籤按鈕，默white-space:pre，
     是不會換行的，需要將pre 值重置爲默認的normal。

  4. 按鈕最大寬度就是容器的240 像素

• 首選最小寬度:元素最適合的最小寬度.外部容器的寬度是240 像素，假設寬度是0，裏面的inline-block 元素的寬度是首選最小寬度。具體表現規則：

  1. 東亞文字（如中文）最小寬度爲每個漢字的寬度。

  2. 西方文字最小寬度由特定的連續的英文字符單元決定。並不是所有的英文字符都會組成連續單元，一般會終止於空格（普通空格）、短橫線、問號以及其他非英文字符等。

  3. 如果想讓英文字符和中文一樣，每一個字符都用最小寬度單元，可以試試使用CSS 中的word-break:break-all。

  4. 類似圖片這樣的替換元素的最小寬度就是該元素內容本身的寬度。

• 最大寬度:是元素可以有的最大寬度。“最大寬度”實際等同於“包裹性”元素設置white-space:nowrap 聲明後的寬度。如果內部沒有塊級元素或者塊級元素沒有設定寬度值，則“最大寬度”實際上是最大的連續內聯盒子的寬度。

6、width 值作用的細節

• width 是作用在“內在盒子”上的，“內在盒子”又被分成了4 個盒子，分別是content box、padding box、border box和margin box。

• content box ： content-box，padding box ：padding-box，border box ：border-box。margin box沒有名字。

• margin 的背景永遠是透明的。

• 在CSS2.1 的規範中，有一段非常露骨的描述：content box 環繞着width 和height 給定的矩形。這種寬度設定和表現並不合理：

  1. 流動性丟失：對於塊狀元素，如果width:auto，則元素會如水流般充滿整個容器，而一旦設定了width具體數值，則元素的流動性就會被阻斷。

  2. 與現實世界表現不一致的困擾。

7、CSS 流體佈局下的寬度分離原則

• 所謂“寬度分離原則”，就是CSS 中的width 屬性不與影響寬度的padding/border（有時候包括margin）屬性共存。寫法：

      .father {
        width: 180px;
      }
      .son {
        margin: 0 20px;
        padding: 20px;
        border: 1px solid;
      }

• 爲何要寬度分離:當一件事情的發展可以被多個因素所左右的時候，這個事情最終的結
  果就會變數很大而不可預期。寬度在這裏也是類似，由於盒尺寸中的4 個盒子都能影響寬度，自然頁面元素的最終寬度就很容易發生變化而導致意想不到的佈局發生。使用“寬度分離”後，咱們不需要燒腦子去計算了，而且頁面結構反而更穩固。

8、改變width/height 作用細節的box-sizing

• box-sizing 的作用：改變了width 作用的盒子。box-sizing:border-box 就是讓100 像素的寬度直接作用在border box上，從默認的content box 變成border box。此時，content box 從寬度值中釋放，形成了局部的流動性，和padding 一起自動分配width 值。

• box-sizing 並不支持margin-box。

• 如何評價*{box-sizing:border-box}。從純個人角度講，不喜歡這種做法的。

  1. 這種做法易產生沒必要的消耗，通配符*應該是一個慎用的選擇器，因爲它會選擇所
     有的標籤元素。

  2. 這種做法並不能解決所有問題。box-sizing 不支持margin-box，只有當元素沒
     有水平margin 時候，box-sizing 才能真正無計算，而“寬度分離”等策略則可以徹底解決
     所有的寬度計算的問題。

  3. 替換元素css重置更合適：

   input, textarea, img, video, object {
     box-sizing: border-box;
   }

9、關於height

• 對於width 屬性，就算父元素width 爲auto，其百分比值也是支持的。

• 對於height 屬性，如果父元素height 爲auto，只要子元素在文檔流中，其百分比值完全就被忽略了。百分比高度值要想起作用，其父級必須有一個可以生效的高度值。

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

  1. 設定顯式的高度值。

  2. 使用絕對定位。絕對定位元素的百分比計算和非絕對定位元素的百分比計算是有區別的，區別在於絕對定位的寬高百分比計算是相對於padding box 的，也就是說會把padding 大小值計算在內，但是，非絕對定位元素則是相對於content box 計算的。

10、min-width/max-width和min-height/max-height

• max-width 和max-height 的初始值是none,min-width/min-height 的初始值都是auto。

• 超越!important 指的是max-width 會覆蓋width，而且這種覆蓋不是普通的覆蓋，是超級覆蓋。

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

答案是256px。

• min-width覆蓋max-width，此規則發生在min-width和max-width衝突的時候。

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

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

可以試試下面方法

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

注意：即雖然說從適用範圍講，max- height 值越大使用場景越多，但是，如果max-height 值太大，在收起的時候可能會有“效果延遲”的問題。因此，我個人建議 max-height 使用足夠安全的最小值，這樣，收起時即使有延遲，也
會因爲時間很短，很難被用戶察覺，並不會影響體驗。

11、內聯元素

• 塊級負責結構，內聯負責內容。

• “內聯元素”的“內聯”特指“外在盒子”，和“display 爲inline的元素”不是一個概念。

• “內聯元素”的典型特徵就是可以和文字在一行顯示。

• 內容區域（content area）：域指一種圍繞文字看不見的盒子可以理解爲把文本選中的背景色區域作爲內容區域。

注意：在IE 和Firefox 瀏覽器下，文字的選中背景總能準確反映內容區域範圍，但是Chrome 瀏覽器下，::selection 範圍並不總是準確的，例如，和圖片混排或者有垂直padding 的時候，範圍會明顯過大，這一點需要注意。

• 內聯盒子（inline box）：“內聯盒子”不會讓內容成塊顯示，而是排成一行，這裏的“內聯盒子”實際指的就是元素的“外在盒子”，用來決定元素是內聯還是塊級。該盒子又可以細分爲“內聯盒子”和“匿名內聯盒子”兩類：

  1. 內聯盒子:外部含內聯標籤（<span>、<a>和<em>等）。

  2. 匿名內聯盒子:光禿禿的文字。

• 行框盒子（line box）:每一行就是一個“行框盒子”（實線框標註），每個“行框盒子”又是由一個一個“內聯盒子”組成的。

• 包含盒子（containing box）:<p>標籤就是一個“包含盒子”（實線框標註），此盒子由一行一行的“行框盒子”組成。

12、幽靈空白節點

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

注意:這裏有一個前提，文檔聲明必須是HTML5 文檔聲明（HTML 代碼如下），如果還是
很多年前的老聲明，則不存在“幽靈空白節點”。