張鑫旭的《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
相關推薦
css筆記 - 張鑫旭css課程筆記之 overflow 篇
情況 ie8 寫法 元素 .com right 折騰 就會 fixed overflow基本屬性值 visible（默認值）：超出依然顯示 hidden ：超出隱藏 scroll ：超出，滾動顯示。子元素不超出也會有滾動條的那條軌道。 auto:如果超出，滾動顯示。如果不
張鑫旭的《CSS世界》讀後筆記
【題外話】之前有人問過我你這樣做筆記有啥用嗎，跟寫目錄一樣，我的回答是這不是寫目錄哈，這是在閱讀過程中把些自己認為重要的知識點記下來。這樣做對我有幾個作用，首先是可以敦促自己一步一步把這本書認真的閱讀完，其次是加深一下自己對這些知識點的記憶，還有就是方便以後自己回顧。不知道
來自張鑫旭大大的《css世界》學習筆記--- about float
有效 fun list 高度 inline 自動 ali scrolltop 之一 6.1 float的本質與特性 浮動的本質是為了實現文字環繞效果 float特性: 包裹性（eg:父元素寬200px，子元素為寬128px的圖片，此時表現出包裹；子元素寬超過200px,則
z-index的層疊規則--學習張鑫旭的css世界筆記
首先，強調一個知識點，z-index只有在和定位一起使用時才有用（非static的定位屬性值）。在css3中的flex中也可以使用z-index這個屬性。 這裡有一個層疊水平和層疊上下文的概念。 層疊上下文 是HTML中的一個三維概念。就感覺和“塊
《CSS世界》(張鑫旭)pdf
自己的 深度學習 不同的 四大家族 p s arc clas 垂直 大量 下載地址：網盤下載 內容簡介 · · · · · ·本書從前端開發人員的需求出發，以“流”為線索，從結構、內容到美化裝飾等方面，全面且深入地講解前端開發人員必須了解和掌握的大量的CSS知識點。同時
CSS深入理解——慕課網筆記（張鑫旭主講）
一、CSS深入理解之border1. border-width不支援百分比受語義和使用場景決定的，不會因為裝置大而邊框變大的2. border-style屬性border-style:dotted;在Chrome/Firefox是方點，IE下是圓點3. border-colo
拜拜了,浮動佈局-基於display:inline-block的列表佈局 張鑫旭部落格筆記
by zhangxinxu from http://www.zhangxinxu.com 一、列表浮動佈局的侷限 所以，如果我們要使用浮動佈局列表，就必須限高，於是，不得已，需要裁掉超多的使用者名稱資訊。 浮動本身就是個魔鬼，所以，使用浮動佈局還需要修復其帶來的
【轉載】張鑫旭對知乎前端相關問題的十問十答
候選人 嵌入式 off 心態 銀杏樹 做好自己 計算機 思維 對待 問題一、前端現在怎麽這麽多人？ 原問題地址是：https://www.zhihu.com/question/55886635 問題描述如下： 投出去的簡歷沒有人看了 我的回答： 想來想
寫給大家看的設計書——讀後筆記
對齊 親密性 重復 《寫給大家看的設計書》介紹了設計的四個基本原則：親密性、對齊、重復、對比。作為一個軟件“設計師”，我也來聊聊讀過這本書之後，我對這四個原則的一點理解。親密性 親密性原則是指：內涵相關聯的內容，在結構、關系上也應保持關聯。 以軟件設計的角度來
Network in Network-讀後筆記
摘要： 提出一個NIN（網路中的網路）的深度網路結構用以增強模型在感知野在區域性影象塊的辨別力。 提出在卷積層使用非線性代替現有的線性模型。 使用一個由MLP組成的micro neural網路作為非線性模型去掃描輸入以提取特徵圖（feature map
《天貓2013雙十一架構》讀後筆記
網購狂歡節背後的技術閱兵 穩定性的極致要求 1. 容量預估、依賴治理、監控 2. 業務降級、限流預案 3. 全鏈路壓測 天貓篇（1）雙11的前端實踐 1. 淘寶的前臺資源採用的都是非覆蓋式釋出，通過語義化路徑定位，這樣前後臺可以分開發布，還能獨
去除inline-block元素間間距的N種方法-張鑫旭
http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/
css世界的學習筆記
clas top mar fff 無圖 class bottom 選擇器 play 1.+選擇器div+p：選擇緊接在div後的所有p元素； 2.導航的樣式：（註意：不給a設置width:100%;只是需要display:block;利用流布居；） <h4>無
如何提問才能進階成為前端大神？(轉自張鑫旭的部落格)
1. 杜絕即時通訊工具溝通 即時通訊工具，例如QQ, 是最低效的問題交流工具了，誰有這個閒功夫跟你一問一答，你以為把妹呢！因此，任何人妄圖想加我QQ諮詢問題，都是不可能的。除非：你是我同事、你是我同學、你給我支付寶或微信賬戶打了100塊錢。 2. 固定時間處理郵件 每天郵件的處理均在特定的時間點，一
《css世界》讀書筆記二
1.非同步載入圖片時的一些前端小技巧 web開發的時候，為了提高載入效能以及節約寬頻費用，首屏以下的圖片就會通過滾屏載入的方式非同步載入。然後，這個即將被非同步載入的圖片為了佈局穩健、體驗良好，往往會使用一張透明的圖片佔位。實際上，這個透明的佔位圖片也是多餘的資源
Borg, Omega, and Kubernetes讀後筆記
sof taf 中文 eas join -m provided led failure 前言 最近又讀了一遍 Borg, Omega, and Kubernetes 這篇文章，覺得這個文章寫得很好，讓我對架構設計有了進一步的認識，所以想寫一篇讀後筆記。 原文地址，還有篇中文
《趣談網絡協議》（劉超老師）讀後筆記記錄 003
windows ddr linu span align pan 網絡共享 ifconfig -a 第三講 最熟悉與陌生的命令行 查看IP地址的方式 windows系統中，命令行輸入 ipconfig； 打開網絡共享中心界面，點擊所連接的網絡，點擊常規中的詳細信息
關於讀過鄒鑫老師的博客後的感想
我們 這不 讓我 說我 部分 一個人 們的 變化 學生 看了鄒鑫老師的博客，對於大學和高中的差別有了更深刻的印象。 一開始，我覺得大學和高中只不過是對我們的稱謂發生了變化，會有一部分人對我們很敬佩，可看了鄒鑫老師的博客，我發現這不止止是在稱謂上的改變，
《css世界》的讀書筆記
第三章 流、元素與基本尺寸1.<a>、<button>等元素在使用鍵盤進行Tab鍵切換時可以被選中，即獲取到焦點，表現為虛框或者外發光，這類元素為焦點元素；非焦點元素<div>、<span>等沒有設定tabindex屬性，即無法
張高興的 Windows 10 IoT 開發筆記：使用 ULN2003A 控制步進電機
uln2003 zhang windows iot ges 開發 ima dem win GitHub：https://github.com/ZhangGaoxing/windows-iot-demo/tree/master/ULN2003A 張高興的 Wind