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

時間 2019-11-08

標籤 css世界筆記之流元素基本尺寸欄目 CSS 简体版

原文原文鏈接

一、塊級元素

基本特性：就是一個水平流上只能單獨顯示一個元素，多個塊級元素則換行顯示。css
塊級元素和「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;
  }

二、list-item 元素會出現項目符號的緣由

list-item 元素會出現項目符號是由於生成
了一個附加的盒子，學名「標記盒子」（marker box），專門用來放圓點、數字這些項目號。
IE瀏覽器下僞元素不支持list-item 或許就是沒法建立這個「標記盒子」致使的。ide
display值爲block的元素由外在的「塊級盒子」和內在的「塊級容器盒子」組成。佈局
display值爲inline-block的元素由外在的「內聯盒子」和內在的「塊級容器盒子」組成。動畫
display值爲inline的元素內外均是「內聯盒子」。spa
display值爲inline-table的元素外面是「內聯盒子」，裏面是「table 盒子」。code
width/height 做用在是內在盒子，也就是「容器盒子」。orm

三、width:auto

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

<div>、<p>這些元素的寬度默認是100%於父級容器的，這種充分利用可用空間的行爲還有個專有名字，叫做fill-available。
是浮動、絕對定位、inline-block 元素或table 元素收縮到合適。
收縮到最小，這個最容易出如今table-layout 爲auto 的表格中。
超出容器限制

就第一個是「外部尺寸」，其他所有是「內部尺寸」。而這惟一的「外部尺寸」，是「流」的精髓所在。

四、外部尺寸與流體特性

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

正常流寬度是一種margin/border/padding和content 內容區域自動分配水平空間的機制，儘可能用無寬帶的流來佈局。
格式化寬度：在position屬性值爲absolute 或fixed 的元素中。在默認狀況下，寬度由內部尺寸決定。當left/top 或top/bottom 對立方位的屬性值同時存在的時候，元素的寬度表現爲「格式化寬度」，其寬度大小相對於最近的具備定位特性（position 屬性值不是static）的祖先元素計算。margin、border、padding 和content 內容區域一樣會自動分配水平（和垂直）空間

五、內部尺寸與流體特性

元素尺寸由內部元素決定，「內部尺寸」有下面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 聲明後的寬度。若是內部沒有塊級元素或者塊級元素沒有設定寬度值，則「最大寬度」其實是最大的連續內聯盒子的寬度。

六、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. 與現實世界表現不一致的困擾。

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

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

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

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

八、改變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;
   }

九、關於height

對於width 屬性，就算父元素width 爲auto，其百分比值也是支持的。
對於height 屬性，若是父元素height 爲auto，只要子元素在文檔流中，其百分比值徹底就被忽略了。百分比高度值要想起做用，其父級必須有一個能夠生效的高度值。
如何讓元素支持height:100%效果：
1. 設定顯式的高度值。
2. 使用絕對定位。絕對定位元素的百分比計算和非絕對定位元素的百分比計算是有區別的，區別在於絕對定位的寬高百分比計算是相對於padding box 的，也就是說會把padding 大小值計算在內，可是，非絕對定位元素則是相對於content box 計算的。

十、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 使用足夠安全的最小值，這樣，收起時即便有延遲，也
會由於時間很短，很難被用戶察覺，並不會影響體驗。

十一、內聯元素

塊級負責結構，內聯負責內容。
「內聯元素」的「內聯」特指「外在盒子」，和「display 爲inline的元素」不是一個概念。
「內聯元素」的典型特徵就是能夠和文字在一行顯示。
內容區域（content area）：域指一種圍繞文字看不見的盒子能夠理解爲把文本選中的背景色區域做爲內容區域。

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

內聯盒子（inline box）：「內聯盒子」不會讓內容成塊顯示，而是排成一行，這裏的「內聯盒子」實際指的就是元素的「外在盒子」，用來決定元素是內聯仍是塊級。該盒子又能夠細分爲「內聯盒子」和「匿名內聯盒子」兩類：
1. 內聯盒子:外部含內聯標籤（<span>、<a>和<em>等）。
2. 匿名內聯盒子:光禿禿的文字。
行框盒子（line box）:每一行就是一個「行框盒子」（實線框標註），每一個「行框盒子」又是由一個一個「內聯盒子」組成的。
包含盒子（containing box）:<p>標籤就是一個「包含盒子」（實線框標註），此盒子由一行一行的「行框盒子」組成。