張鑫旭的《CSS世界》讀後筆記

Gyoung阿廣發表於2018-08-28
CSS筆記

【題外話】之前有人問過我你這樣做筆記有啥用嗎，跟寫目錄一樣，我的回答是這不是寫目錄哈，這是在閱讀過程中把些自己認為重要的知識點記下來。這樣做對我有幾個作用，首先是可以敦促自己一步一步把這本書認真的閱讀完，其次是加深一下自己對這些知識點的記憶，還有就是方便以後自己回顧。不知道這個方法對你們有沒有用哈，如果拿一本向《Javascript高階程式設計》這樣的大部頭給你讀，你做不到堅持讀完的話，可以試試我這種方式，嘻嘻

第1章 概述

（1）CSS完勝SVG的武器—流

（2）table自己的世界

<table>比CSS還要老，也就是css正式誕生之前，<table>就已經出現了。“流”的特性對<table>並不適用。

（3）CSS新世界—css3

1.佈局更為豐富

CSS3媒介查詢、圖片元素的srcset屬性、css的object-fit屬性、彈性盒佈局、格柵佈局；

2.視覺表現更豐富

圓角、陰影、漸變、transform、filter濾鏡盒混合模式、animation。

第2章 需提前瞭解的術語和概念

（1）術語

屬性、值、關鍵字、變數、長度單位、功能符（rgba/calc/attr/url/scale）、屬性值、宣告、宣告塊、規則或規則集、選擇器、關係選擇器、@規則。

（2）未定義行為

規範顧及不到的細枝末節的實現，就稱為“未定義行為”。

第3章 流、元素與基本尺寸

（1）格式化寬度

對於非替換元素，當left/right或top/bottom對立方位的屬性值同時存在時，元素的寬度表現為“格式化寬度”，其寬度大小相對於最近的具有定位特性的祖先元素計算。

（2）寬度分離原則

所謂“寬度分離原則”，就是CSS中的width屬性不與影響寬度的padding/border（有時候包括margin）屬性共存。可以巢狀一層標籤，父元素定寬，子元素因為width使用的是預設值auto，這樣分離會使程式碼更易維護，頁面更加穩固。元素寬度要包含padding/border時，當然也可以使用box-sizing屬性，但非必要時還是儘量遵循“無寬度”原則。

（3）不推崇*{box-sizing: border-box}

1.*容易產生沒必要的消耗；2.這種做法並不能解決所有問題，只有沒有水平margin才有用。

Box-sizing被發明出來最大的初衷應該是解決替換元素寬度自適應問題。

（4）瀏覽器渲染順序

自上而下、自外而內

（5）絕對定位的寬高百分比計算是相對於padding box的，也就是說會把padding大小值計算在內，但是，非絕對定位元素則是相對於content box計算的。

（6）min-width/min-height的初始值是auto，max-width/max-height的初始值是none。

（7）內聯世界深入的基礎—內聯盒模型

包含盒子>行框盒子>內聯盒子>內容區域，<p>標籤就是一個包含盒子，此盒子由一行一行的行框盒子組成。

（8）幽靈空白節點

在HTML5文件宣告中，內聯元素的所有解析和渲染表現就如同每個行框盒子的前面有一個空白節點一樣。這個空白節點永遠透明，不佔據任何寬度。

第4章 盒尺寸四大家族

（1）object-fit

在css3的新世界中，<img>和其他一些替換元素的替換內容的適配方式可以通過object-fit屬性修改。例如，<img>元素的預設宣告是object-fit:fill，如果我們設定object-fit:none，則我們的圖片尺寸就完全不受控制，如果我們設定object-fit:contain，則圖片會保持比例圖片，儘可能利用HTML尺寸但又不會超出的方式顯示。

（2）通過css的content屬性可以直接替換img的替換內容

要是放在以前，只能藉助background-image或者兩個<img>元素顯隱控制實現。

（3）內聯元素設定padding，垂直方向不會改變佈局

（4）margin的百分比值

和padding屬性一樣，margin的百分比值無論是水平方向還是垂直方向都是相對於寬度計算的。

（5）margin合併

1.塊級元素、2.只發生在垂直方向。

（6）border可以實現相容性非常好的三角形

.div{width: 0; border: 10px solid; border-color: #f30 transparent transparent; }

第5章 內聯元素與流

（1）字母x

字母x的下邊緣就是我們的基線。

Vertical-align: middle；middle指的是基線往上1/2 x-height高度，我們可以近似理解為字母x交叉點那個位置。

X-height：小寫字母x的高度；

ex是css中的一個相對單位，指的是小寫字母的高度。

（2）內聯元素的基石line-height

行距 = line-height - font-size

border以及line-height等傳統CSS屬性並沒有小數畫素的概念，如果標註的是文字上邊距，則向下取整，如果是文字下邊距，則向上取整。

替換元素的高度不受line-height影響。

如果使用數值作為line-height的屬性值，那麼所有的子元素繼承的都是這個值。但是，如果使用百分比值或者長度值作為屬性值，那麼所有的子元素繼承的是最終的計算值。

（3）line-height的好朋友vertical-align

只能應用於內斂元素以及display值為table-cell的元素。

一個inline-block元素，如果裡面沒有內聯元素，或者overflow不是visible，則該元素的基線就是其margin底邊緣。

第6章 流的破壞與保護

（1）魔鬼屬性float

（2）float的天然剋星clear

clear屬性只有塊級元素才有效的，而::after等偽元素預設都是內聯水平，這就是藉助偽元素清除浮動影響時需要設定display屬性值的原因。

Clear:both只能在一定程度上清除浮動的影響。

（3）CSS世界的結界—BFC

BFC全稱block formatting context，中文為“塊級格式化上下文”。相對應的還有IFC，中文為“內聯格式化上下文“。

表現原則：如果一個元素具有BFC，內部子元素再怎麼翻江倒海，都不會影響外部的元素。

什麼時候觸發BFC呢：

1.<html>根元素；

2.float的值不為none;

3.overflow的值為auto、scroll或hidden；

4.display的值為table-cell、table-caption和inline-block中的任何一個；

5.position的值不為relative和static。

（4）最佳結界overflow

在pc端，視窗滾動條高度可以使用document.documentElement.scrollTop獲取，但是在移動端，可能就要使用document.body.scrollTop獲取。

觸發錨點定位：1.通過URL錨鏈觸發；2.通過“focus錨點定位“，只要定位的元素在瀏覽器窗體中，就不會觸發窗體的滾動，也就是選項卡切換的時候頁面不會發生跳動。

（5）float的兄弟position: absolute

塊狀化、包裹性、破壞性

Absolute包含塊的邊界是padding box而不是content box。

Absolute除了具有絕對定位的特性外，還有“無依賴絕對定位”特性，本質上是“相對定位”，具有“相對性”和“不佔據空間”的特性。

（6）absolute與overflow

（7）absolute與clip

Clip屬性要想起作用，元素必須是絕對定位或者固定定位的。

“可訪問性隱藏”，指的是雖然內容肉眼看不見，但是其他輔助裝置卻能夠進行識別和訪問。

（8）absolute的流體特性

（9）position: relative才是大哥

Relative的定位有兩大特性：一是相對自身；二是無侵入。

相對定位元素的left/top/right/bottom的百分比值是相對於包含塊計算的，而不是自身。top和bottom這兩個垂直方向的百分比值計算跟height的百分比值是一樣的，都是相對高度計算的。同時，如果包含塊的高度是auto，那麼計算值是0，偏移無效，也就是說，如果父元素沒有設定高度或者不是“格式化高度”，那麼relative類似top: 20%的程式碼等同於top :0。

“relative的最小化影響原則“，因為相對定位元素的層疊順序是“鬼畜”級別的，可能會覆蓋後面的元素。

（10）強悍的position: fixed固定定位

固定定位元素的“包含塊”是根元素，我們可以將其近似看成<html>元素。

第7章 CSS世界的層疊規則

（1）z-index只是CSS層疊規則中的一葉小舟

隨著CSS3新世界的到來，z-index已經並非只對定位元素有效，flex盒子的元素也可以設定z-index屬性。

（2）理解CSS世界的層疊上下文和層疊水平

層疊上下文是一個概念，跟“塊狀格式化上下文”（BFC）類似。

（3）理解元素的層疊順序

層疊順序：層疊上下文、background/border->負z-index->block塊狀水平盒子->float浮動盒子->inline水平盒子->z-index:auto或看成z-index:0不依賴z-index的層疊上下文->正z-index

（4）務必牢記的層疊準則

誰大誰上(z-index)，後來居上

（5）深入瞭解層疊上下文

層疊上下文的層疊水平要比普通元素高；

建立層疊上下文：1.頁面根元素；2.z-index值為數值的定位元素的傳統“層疊上下文”；3.css3的新屬性（如元素為flex佈局元素、元素的opacity值不是1、元素的transform值不是none）

（6）z-index負值深入理解

（7）z-index“不犯二”準則

對於非浮層元素，避免設定z-index值，z-index值沒有任何道理需要超過2。

第8章 強大的文字處理能力

（1）line-height的另外一個朋友font-size

Ex是字元x的高度。

在CSS中，1em的計算值等同於當前元素所在的font-size計算值，可以將其想象成當前元素中（如果有）漢字的高度。

（2）字型屬性家族的大家長font-family

Font-family: serif（襯線字型）, sans-serif（無襯線字型）, monospace（等寬字型）,cursive（手寫字型），fantasy（奇幻字型）,system-ui（系統ui字型）。

所謂襯線字型，通俗講就是筆畫開始、結束的地方有額外裝飾而且筆畫的粗細會有所不同的字型。網頁中常用中文襯線字型是“宋體”，常用英文襯線字型有Times New Roman、Georgia等。

無襯線字型沒有這些額外的裝飾，而且筆畫的粗細差不多，如中衛的“雅黑”字型，英文包括Arial、Verdana、Tahoma、Helivetica、Calibri等。

ch和em、rem、ex一樣，是CSS中和字元有關的相對單位，和ch相關的字元就是阿拉伯數字0，1ch表示一個0字元的寬度。

（3）字型家族其他成員

Font-weight: 400等同於font-weight: normal，font-weight: 700等同於font-weight: bold。

Font-style: normal | italic | oblique;

（4）font屬性

需要注意的是，font縮寫會破壞部分屬性的繼承性，如沒設定line-height的話就會被重置為normal。

（5）真正瞭解@font face規則

（6）文字的控制

text-indent的百分比值是相對於當前元素的“包含塊”計算的，而不是當前元素。

Letter-spacing、word-spacing的預設值normal都不是0。

word-spacing的作用就是增加空格的間隙寬度。

Word-break: break-all;

Word-wrap: break-word;

::first-letter偽元素生效的前提是，元素的display計算值必須是block、inline-block、list-item、table-cell或者table-caption，其他所有display計算值都沒有用，包括display: table和display: flex等。

::first-letter偽元素其實是作為子元素存在的。

第9章 元素的裝飾與美化

（1）CSS世界的color很單調

Background-color: transparent；從IE6開始支援，但是color: transparent；卻從IE9瀏覽器開始支援。

（2）CSS世界的background很低調

background-repeat平鋪很小的圖片時效能可能比較低。

IE9不支援背景漸變。

第10章 元素的顯示與隱藏

在Firefox瀏覽器下，display: none的元素的background-image圖片是不載入的，包括父元素display: none也是如此；如果是Chrome和Safari瀏覽器，則要分情況，若父元素display: none，圖片不載入，若本身display: none，則圖片依舊會載入；對IE瀏覽器而言，無論怎樣都會請求圖片資源。

CSS3 transition支援的CSS屬性中有visibility，但是並沒有display。

第11章 使用者介面樣式

使用者介面樣式指的是CSS世界中用來幫助使用者進行介面互動的一些CSS樣式，主要有outline和cursor等屬性。

第12章 流向的改變

（1）改變水平流向的direction

（2）改變CSS世界縱橫規則的writing-mode

 

 

 

相關文章