[書籍精讀]《CSS世界》精讀筆記分享

寫在前面

• 書籍介紹：本書從前端開發人員的需求出發，以「流」爲線索，從結構、內容到美化裝飾等方面，全面且深刻地講解前端開發人員必須瞭解和掌握的大量的CSS知識點。同時，做者結合多年的從業經驗，經過大量的實戰案例，詳盡解析CSS的相關知識與常見問題。
• 個人簡評：《CSS世界》這本書顛覆了我對前端CSS的不少認知，說是在的，這本書讀起來很燒腦，建議有必定CSS基礎後再閱讀。
• ！！福利：文末有pdf書籍、筆記思惟導圖、隨書代碼打包下載地址哦!閱讀[書籍精讀系列]全部文章，請移步：推薦收藏-JavaScript書籍精讀筆記系列導航

第一章 概述

1.1.CSS世界的「世界觀」

• 將抽象的CSS直接和具體的現實世界相對應，更加易於理解
• 以完整的體系來學習CSS要比單純關注屬性值理解得更加深入，能夠培養從宏觀層面認識與理解CSS的習慣
• 方便咱們記憶，枯燥的代碼老是過目就忘，鮮活的角色老是印象深入

1.2.世界都是創造出來的

• CSS世界的誕生就是爲圖文信息展現服務的

1.3.CSS完勝SVG的武器-流

• 如今看來，SVG顯然要比Flash優秀不少，SVG開發、標準，和CSS和JavaScript都能很方便地進行交互
• SVG的強項是圖形，其文字內容的呈現實在不敢恭維
• 何爲「流」：「流」其實是CSS世界中德一種基本的定位和佈局機制；CSS世界構建的基石是HTML，而HTML最具表明的兩個基石<div>和<span>正好是CSS世界中塊級元素和內聯級元素的表明；所謂「流」，就是CSS世界中引導元素排列和定位的一條看不見的「水流」；
• 流是如何影響整個CSS世界的：1.擒賊先擒王；2.特殊佈局與流的破壞；3.流向的改變
• 什麼是流體佈局：所謂「流體佈局」，指的是利用元素「流」的特性實現的各種佈局效果；「流體佈局」並不等同於「自適應佈局」；「自適應佈局」是對凡是具備自適應特性的一類佈局的統稱；
• table本身的世界：<table>比CSS還要老；「流」的特性對<table>並不適用；
• 人們對互聯網的需求也在變化：1.佈局更爲豐富。移動端的崛起、彈性盒子佈局、柵格佈局；2.視覺表現長足進度。圓角、陰影和漸變、transform變換、filter濾鏡和混合模式、animation動畫；

第二章 需提早了解的術語和概念

2.1.務必瞭解的CSS世界的專業術語

• 屬性
• 值：常見的整數值，數字值外，還有字符串值、位置值等類型。在CSS3中，還有角度值、頻率值、時間值等類型
• 關鍵字
• 變量：CSS3中的currentColor就是變量
• 長度單位：%不是長度單位
• 功能符：值以函數的形式指定（就是被括號括起來的那種），主要用來表示顏色（rgba和hsla）、背景圖片地址(url)，元素屬性值、計算(calc)和過渡效果等。
• 屬性值
• 聲明
• 聲明塊
• 規則或規則集
• 選擇器：選擇器是用來瞄準目標元素的東西
• 關係選擇器：關係選擇器是指根據與其餘元素的關係選擇元素的選擇器
• @規則：關係選擇器是指根據與其餘元素的關係選擇元素的選擇器

2.2.瞭解CSS世界中的「未定義行爲」

• 在現實世界中，有法律來約束咱們的行爲，若是越界，就稱爲違法
• 在CSS世界裏，有Web標準來約束元素的行爲，若是越界，就稱爲bug
• 像這種規範顧及不到的細枝末節的實現，就稱爲「未定義行爲」

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

• 一般咱們把HTML標籤分爲兩類：塊級元素和內聯元素

3.1.塊級元素

• 須要注意的是，塊級元素和display爲block的元素不是一個概念
• <table>元素默認的display值是table，可是他們均是塊級元素
• 塊級元素的基本特徵，也就是一個水平流上只能單獨顯示一個元素，多個塊級元素則換行顯示
• IE瀏覽器不支持僞元素的display值爲list-item
• 爲何list-item元素會出現項目符號：不少看似「理所固然」的現象背後，實際上可能有一整套的體系支撐；塊級盒子就負責結構，內聯盒子就負責內容；之因此list-item元素會出現項目符號是由於生成了一個附加的盒子，學名「標記盒子」，專門用來放圓點、數字這些項目符號；
• display：inline-table的盒子是怎樣組成的：外面是內聯盒子，裏面是table盒子。獲得的就是一個能夠和文字在一行中顯示的表格
• width/height做用在哪一個盒子上：是內在盒子，也就是「容器盒子」

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

• 深藏不露的width：auto：width的默認值是auto。它至少包含了一下4種不一樣的寬度表現（1.充分利用可用空間、2.收縮與包裹、3.收縮到最小、4.超出容器限制）；所謂流動性，並非看上去的寬度100；格式化寬度具備徹底的流體性，也就是margin、border、padding和content內容區域一樣會自動分配水平（和垂直）空間；
• width值做用的細節：內在盒子是由不少部分構成的，盒子的構成和地球的構成驚人的相似；內在盒子又被分紅了4個盒子，分別content box、padding box、border box和margin box；margin的背景永遠是透明的，所以不可能做爲background-clip或background-origin屬性值出現；或許是由於CSS2.1是面向內容（圖文信息）設計的，因此，width設計成了直接做用在content box上；
• CSS流體佈局下的寬度分離原則：所謂「寬度分離原則」，就是CSS中的width屬性不與影響寬度的padding/border屬性共存；width、padding、border混用的時候，任何修改咱們都須要實時去計算，在width應該設置多大才能和以前佔用的寬度同樣，然後面width分離的實現，咱們沒有任何計算；可能的挑戰，過深的嵌套是會增長頁面渲染和維護成本的
• 改變width/height做用細節的box-sizing：box-sizing的做用，改變了width做用的盒子。默認狀況下，width是做用在content box上的，box-sizing的做用就是能夠把width做用的盒子變成其餘幾個；爲什麼box-sizing不支持margin-box，最大的緣由是自己就沒有價值。box-sizing就是改變尺寸做用規則的。margin只有在width爲auto的時候能夠改變元素的尺寸；爲什麼box-sizing不支持margin-box，最大的緣由是自己就沒有價值。box-sizing就是改變尺寸做用規則的。margin只有在width爲auto的時候能夠改變元素的尺寸；經驗：在CSS世界中，惟一離不開box-sizing：border-box的就是原生普通文本框input和文本域textarea的100%自適應父容器寬度；box-sizing被髮明出來最大的初衷應該是解決替換元素寬度自適應問題
• 相對簡單而單純的height：auto：CSS的默認流是水平方向，寬度是稀缺的。高度是無限的。
• 關於height:100%：對於height屬性，若是父元素height爲auto，只要子元素在文檔流中，其百分比值徹底就被忽略了；對於普通文檔流中的元素，百分比高度值要想起做用，其父級必須有一個能夠生效的高度值；絕對定位的寬高百分比計算是相對於padding box的，非絕對定位元素則是相對於content box計算的；

3.3.css min-width/max-width和min-height/max-height

• 爲流體而生的min-width/max-width：在CSS世界中，min-width/max-width出現的場景必定是自適應佈局或者流體佈局中
• 不同凡響的初始值：width/height的默認值是auto，而min-width/max-width和min-height/max-height的初始值則要複雜些；max-width和max-height的初始值是none，min-width和min-height的初始值是？雖然MDN和W3C維基的文檔上都顯示min-width/min-height的初始值是0，根據分析和測試，全部瀏覽器中德min-width/min-height的初始值都是auto；min-height/min-height的初始值是auto，max-width/max-height的初始值是none；
• 超越!important，超越最大：1.超越!important：指的是max-width會覆蓋width，並且這種覆蓋不是普通的覆蓋，是超級覆蓋；2.超越最大：設置最小寬度比最大寬度要大，min-width活下來，max-width被忽略；
• 任意高度元素的展開收起動畫技術

3.4.內聯元素

• 從做用上來說，塊級負責結構，內聯負責內容
• 哪些元素是內聯元素：1.從定義看：內聯元素的內聯特指外在盒子，和display爲inline的元素不是一個概念。inline-block和inline-table都是內聯元素；2.從表現看：內聯元素的典型特徵就是能夠和文字在一行顯示。實際上，浮動元素和後面的文字並不在一行顯示，浮動元素已經在文檔流以外
• 內聯世界深刻的基礎-內聯盒模型：1.內容區域：指一種圍繞文字看不見的盒子，其大小僅受字符自己特性控制，本質上一個字符盒子；2.內聯盒子：不會讓內容成塊顯示，而是排成一行。這裏的內聯盒子實際指的是元素的外在盒子，用來決定元素是內聯仍是塊級；3.行框盒子：每一行就是一個行框盒子，每一個行框盒子又是一個一個內聯盒子；4.包含盒子：此盒子由一行一行的行框盒子組成；
• 幽靈空白節點：在HTML5文檔聲明中，內聯元素的全部解析和渲染表現就如同每一個行框盒子的前面有一個「空白節點」同樣。這個「空白節點」永遠透明，不佔據任何寬度，看不見也沒法經過腳本獲取，就好像幽靈同樣，但又確實存在，表現如同文本節點同樣

第四章 盒尺寸四你們族

4.1.深刻理解content

• content與替換元素：經過修改某個屬性值呈現的內容就能夠被替換的元素就稱爲「替換元素」；還有如下一些特性（1.內容的外觀不受頁面上的CSS的影響；2.有本身的尺寸；3.在不少CSS屬性上有本身的一套表現規則）；替換元素的默認display值：全部的替換元素都是內聯水平元素，也就是替換元素和替換元素、替換元素和文字都是能夠在一行顯示的；input按鈕和button按鈕的區別：當按鈕文字足夠多的時候，input按鈕不會自動換行，button按鈕則會；
• content內容生成技術：content屬性幾乎都是用在::before/::after這兩個僞元素中；1.content輔助元素生成；2.content字符內容生成；3.content圖片生成；4.瞭解content開啓閉合符號生成；5.content attr屬性值內容生成；6.深刻理解content計數器；7.content內容生成的混合特性

4.2.溫和的padding屬性

• padding與元素的尺寸：在使用padding進行頁面開發時候不多會出現意想不到的狀況；CSS中還有不少其餘場景或屬性會出現這種不影響其餘元素佈局而是出現層疊效果的現象。如relative元素的定位、盒陰影box-shadow以及outline等；內聯元素padding有用，對咱們實際CSS開發的幫助；
• padding的百分比值：其一，和margin屬性不一樣，padding屬性是不支持負值的；其二，padding支持百分比值；padding百分比值不管是水平方向仍是垂直方向均是相對於寬度計算的；輕鬆實現自適應的等比例矩形效果；內聯元素的垂直padding會讓「幽靈空白節點」顯現，也就是規範中的「struct」出現；
• 標籤元素內置的padding：1.ol/ul列表內置padding-left，但單位是px不是em；2.不少表單元素都內置padding，如input、textarea、button、select、radio等；3.button按鈕元素的padding最難控制的
• padding與圖形繪製：實現大隊長的「三道槓」分類圖標效果；實現雙層圓點效果；

4.3.激進的margin屬性

• margin與元素尺寸以及相關佈局：1.元素尺寸的相關概念；2.margin與元素的內部尺寸；3.margin與元素的外部尺寸；使用margin負值實現等高佈局的優點在於兼容性足夠，IE6瀏覽器支持，且支持任意個分欄等高佈局；table-cell的優勢時自然等高，不足在於IE8及以上版本瀏覽器才支持；內聯元素垂直方向的margin是沒有任何影響的，既不會影響外部尺寸，也不會影響內部尺寸；
• margin的百分比值：和padding屬性同樣，margin的百分比值不管時水平方向仍是垂直方向都是相對寬度計算的；因爲margin合併的存在，垂直方向每每須要雙倍尺寸才能和padding表現一致；
• 正確看待CSS世界裏的margin：1.什麼是margin合併；2.margin合併的3種場景；3.margin合併的計算規則；4.margin合併的意義；
• 深刻理解CSS中的margin: auto
• margin無效情形解析：由於width設置而閒置，而margin：auto就是爲了填充這個閒置的尺寸而設計的；想讓某個塊狀元素右對齊，腦子裏不要就一個float：right，不少時候margin-left：auto纔是最佳的實踐；觸發margin：auto計算有一個前提條件，就是width或height爲auto時，元素是具備對應方向的自動填充特性的；讓水平垂直居中的方法：絕對定位元素的margin：auto居中；
• margin無效情形解析：1.display計算值inline的非替換元素的垂直margin無效；2.表格中的tr或td元素設置display計算值是table-cell或table-row的元素的margin都無效的；3.margin合併的時候，修改margin值多是沒有效果的；4.絕對定位元素非定位方位的margin值無效；5.定高容器的子元素margin-bottom或者寬度定死的子元素的margin-right的定位「失效」；6.鞭長莫及致使的margin無效；7.內聯特性致使的margin無效；

4.4.功勳卓越的border屬性

• 爲何border-width不支持百分比值：所謂邊框，是不會由於設備大就按比例變大的。因此沒有須要使用百分比值的場景；outline、box-shadow、text-shadow等，都是不支持百分比值得，緣由與此相似；爲何border屬性默認寬度大小是medium，也就是3px，由於border-style：double至少3px纔有效果；
• 瞭解各類border-style類型：IE下的虛點是個圓；dotted類型邊框自然就是一個圓，那咱們要想在IE8下實現圓角效果就輕鬆多了；當邊框爲3px時，纔開始有雙線邊框的表現，包括retina屏幕也是如此，由於邊框寬度是沒有半像素的概念的；
• border-color和color：border-color默認顏色就是color色值。具備相似特性的CSS屬性還有outline、box-shadow和text-shadow；上傳圖片時，每每後面會跟着一個帶有加號的框框，這種簡單的圖形最適合三三兩兩的CSS代碼繪製了；
• border與透明邊框：1.右下方background定位的技巧：background是相對左上角定位的，使用transparent邊框表示，background-position的位置計算默認是不會把border-width計算在內的；2.優雅的增長點擊區域大小：可使用padding或者透明border增長元素的點擊區域大小；3.三角等圖形繪製：使用CSS的border屬性繪製三角形等圖形還是性價比最高的方式；
• border與圖形構建：border屬性能夠輕鬆實現兼容性很是好的三角圖形效果，其底層緣由受inset/outset等看上去沒有實用價值的border-style屬性影響；把兩個不一樣傾斜角度的三角效果疊加，則能夠實現更加刁鑽的尖角效果；
• border等高佈局技術：margin+padding能夠實現等高佈局，一樣，border屬性也能夠實現等高佈局；此方法與用margin+padding實現的等高佈局相比更加穩健，不會出現錨點定位帶來的問題，但一樣有侷限性的；因爲border不支持百分比寬度，所以適合至少一欄是定寬的佈局；等高佈局的欄目有限制；

第五章 內聯元素與流

5.1.字母x-CSS世界中隱匿的舉足輕重的角色

• 字母x與CSS世界的基線：在各類內聯相關模型中，凡是涉及垂直方向的排版或者對齊的，都離不開最基本的基線；字母x的下邊緣（線）就是咱們的基線；
• 字母x與CSS中的x-height：CSS中有一個概念叫作x-height，指的是字母x的高度；vertical-align：middle並非絕對的垂直居中對齊；
• 字母x與CSS中的ex：咱們對連IE6都老早支持的ex單位很陌生；ex是CSS中的一個相對單位，指的是小寫字母x的高度，沒錯，就是x-height；ex的價值就是在其副業上--不受字體和字號影響的內聯元素的垂直居中對齊效果；藉助ex單位，咱們直接利用默認的baseline基線對其就能夠實現圖標文字中間位置對齊；

5.2.內聯元素的基石line-height

• 內聯元素的高度之本-line-height：很多人會認爲div高度是由裏面的文字撐開的，也就是font-size決定的，但本質上由line-height屬性全權決定的，儘管某些場景確實與font-size大小有關；一般，line-height的高度做用細節都是使用「行距」和「半行距」來解釋的；行距的做用是能夠瞬間明確咱們的閱讀方向，讓咱們閱讀文字更輕鬆；在CSS中，「行距」分散在當前文字的上方和下方，也就是即便是第一行文字，其上方也有「行距」的，只不過這個「行距」的高度僅僅是完整「行距」高度的一半；通常業界的共識：行距=行高-em-box，轉換成CSS語言就是：行距=line-height-font-size；絕大多數的字體在內容區域中都是偏下的；雖然line-height不支持負值，可是行距能夠是負值；line-height能夠影響替換元素（如圖片的高度）嗎？不能夠的；不是line-height把圖片佔據高度變高了，而是把「幽靈空白節點」的高度變高了。在HTML5文檔模式下，每個「行框盒子」的前面都有一個寬度爲0的「幽靈空白節點」，其內聯特性表現和普通字符如出一轍；
• 爲何line-height可讓內聯元素「垂直居中」：坊間說法：讓單行文字垂直居中，只要設置line-height大小和height高度同樣就能夠了；兩個嚴重誤區（1.要讓單行文字垂直居中，只要line-height這一個屬性就能夠，與height一點關係都沒有；2.行高控制文字垂直居中，不只適用於單行，多行也是能夠的）；多行文本或者替換元素的垂直居中實現原理和單行文本就不同了，須要line-height屬性的好朋友vertical-align屬性幫助才能夠；line-height與多行文字垂直居中實現的原理；
• 深刻line-height的各種屬性值：line-height的默認值是normal，還支持數值、百分比值以及長度值；normal其實是一個和fontfamily有着密切關聯的變量值；不一樣操做系統的默認字體也不同，換句話說，就是不一樣系統不一樣瀏覽器的默認line-height都是有差別的；line-height應該重置爲多大的值呢？是使用數值、百分比值仍是長度值呢？；注意，在CSS中，計算行高的時候，行高值必定不要向下舍入，而要向上舍入；
• 內聯元素line-height的「大值特性」：不管內聯元素line-height如何設置，最終父級元素的高度都是由數值大的那個line-height決定的，稱之爲內聯元素line-height的大值特性；只要有「內聯盒子」在，就必定會有「行框盒子」，就是每一行內聯元素外面包裹的一層看不見的盒子；

5.3.line-height的好朋友vertical-align

• vertical-align家族基本認識：凡是line-height起做用的地方vertical-align也必定起做用；把vertical-align屬性之分爲如下4類（線類、文本類、上標下標類、數值百分比類）；從這一點來看，vertical-align：baseline等同於vertical-align：0；vertical-align的屬性值支持數值，更不知道支持負值；margin和padding是相對於寬度計算的，line-height是相對於font-size計算的，而這裏vertical-align屬性的百分比值則是相對於line-height的計算值計算的；
• vertical-align做用的前提：vertical-align起做用是有前提條件的，是隻能應用於元素以及display值爲table-cell的元素；換句話說，vertical-align屬性只能做用在display計算值爲inline、inline-block、inline-table或table-cell的元素上；table-cell元素設置vertical-align垂直對齊的時子元素，可是其做用並非子元素，而是table-cell元素自身；
• vertical-align和line-height之間的關係：當字號大小不同的兩個文字在一塊兒的時候，彼此就會發生上下位移，若是位移距離足夠大，就會超過行高的限制，而致使出現意料以外的高度；常見的圖片底部留有間隙的問題；間隙產生的三大元兇就是「幽靈空白節點」、line-height和vertical-align屬性；要清楚該間隙，方法不少以下（1.圖片塊狀化、2.容器line-height足夠小、3.容器font-size足夠小、4.圖片設置其餘vertical-align屬性值）；text-align：justify聲明能夠幫助咱們實現兼容的列表兩端對齊效果；
• 深刻理解vertical-align線性類屬性值：總結的一套基於20px圖標對齊的處理技巧（1.圖標高度和當前行高都是20px；2.圖標標籤裏面永遠有字符；3.圖標CSS不使用overflow：hidden保證基線爲裏面字符的基線，可是讓裏面潛在的字符不可見）；line-height和vertical-align：middle實現的多行文本或者圖片的垂直居中所有都是「近似垂直居中」，緣由與vertical-align：middle的定義有關；vertical-align：middle可讓內聯元素的真正意義上的垂直中心位置和字符x的交叉點對齊；
• 深刻理解vertical-align文本類屬性值：所謂「父級內容區域」指的就是在父級元素當前font-size和font-family下應有的內容區域大小；文本類屬性值爲何會有這樣糟糕的際遇呢（1.使用場景匱乏；2.文本類垂直對齊理解成本高；3.內容區域不直觀且易變）
• 簡單瞭解vertical-align上標下標類屬性：vertical-align上標下標類屬性值指的是sub和super兩個值，分別表示下標和上標；在HTML代碼中，兩個標籤語義就是下標和上標，分別是上標^{和下標_{；vertical-align上標下標類屬性值並不會改變當前元素的文字大小，千萬不要被HTML標籤中的和誤導，由於這兩個HTML標籤默認font-size是smaller；}}
• 無處不在的vertical-align：對於內聯元素，若是你們遇到不太好理解的現象，請必定要意識到，有個「幽靈空白節點」以及無處不在的vertical-align屬性；vertical-align屬性值的理解能夠說是CSS世界中的最難點；vertical-align各種屬性值不存在相互衝突的狀況，雖然某個vertical-align屬性值確實影響其餘元素的表現，可是這種做用並非直接的；
• 基於vertical-align屬性的水平垂直居中：使用純CSS實現大小不固定的彈框永遠居中的效果；相比傳統的JavaScript定位的方法的優勢（1.節省了不少無謂的定位的JavaScript代碼，也不須要瀏覽器resize事件之類的處理；2.性能更改、渲染速度更快，畢竟瀏覽器內置CSS的即時渲染顯然比JavaScript的處理要更好；3.能夠很是靈活控制垂直居中的比例；4.容器設置overflow：auto能夠實現彈框高度超過一屏時依然能看見屏幕外的內容，傳統實現方法則比較尷尬）

第六章 流的破壞與保護

• CSS中有一類屬性，專門經過破壞正常的「流」來實現一些特殊的樣式表現

6.1.魔鬼屬性float

• float的本質與特性：極可能會對float屬性有誤解，認爲float屬性就是爲各類塊狀佈局而設計的，實際上不是；很簡單，一句話：浮動的本質就是爲了實現文字環繞效果；一碰就碎，主要在於其缺乏彈性，換句話說，就是佈局的容錯性很糟糕；浮動是魔鬼，少砌磚頭、少浮動，要更多地去挖掘CSS世界自己的「浮動性」和「自適應性」，以構建可以適用於各類環境的高質量的網頁佈局；CSS2的設計是面向圖文展現，CSS3的設計則是爲了更絢麗的視覺效果和更豐富的網頁佈局；float有意思的特性：包裹性、塊狀化並格式化上下文、破壞文檔流、沒有任何margin合併；所謂包裹性，由包裹和自適應性兩部分組成；
• float的做用機制：float屬性有個著名的特性表現，就是會讓父元素的高度塌陷；必定要明確這一點，浮動使高度塌陷不是bug，而是標準；
• float更深刻的做用機制：爲何IE6和IE7浮動元素會下一行顯示。規範確實約定浮動元素和內聯元素在一行顯示；兩個和float相關的術語：一是浮動錨點（float元素所在流中的一個點），二是浮動參考（浮動元素對齊參考的實體）；
• float與流體佈局：float經過破壞正常CSS流實現CSS環繞，帶來了煩人的「高度塌陷」的問題；能夠利用float破壞CSS正常流的特性，實現兩欄或多欄的自適應佈局；

6.2.float的自然剋星clear

• 什麼是clear屬性：CSS有一個專門用來處理float屬性帶來的高度塌陷等問題的屬性，這個屬性就是clear；解釋爲清除浮動是有問題的，浮動一直還在，並無清除。官方對clear屬性的解釋是：元素盒子的邊不能和前面的浮動元素相鄰；考慮到float屬性要麼就left要麼就right，不可能同時存在，同時因爲clear屬性對「後面的」浮動元素漠不關心；
• 成事不足敗事有餘的clear：clear屬性只有塊級元素纔有效；::after等僞元素默認都是內聯水平，藉助僞元素清除浮動影響時須要設置display屬性值；

6.3.css世界的結界-BFC

• BFC的定義：BFC全稱block formatting context，中文爲「塊級格式化上下文」；表現原則：若是一個元素具備BFC，內部子元素再怎麼翻江倒海、翻雲覆雨，都不會影響外部的元素；BFC元素是不可能發生margin重疊的。BFC元素也能夠用來清除浮動的影響；何時會觸發BFC，常見狀況（<html>根元素；float的值不爲none；overflow的值爲auto、scroll或hidden；display的值爲table-cell、table-caption和inline-block中的任何一個；position的值不爲relative和static；）
• BFC與流體佈局：BFC的結界特性最重要的用途其實不是去margin重疊或者是清除float影響，而是實現更健壯、更智能的自適應佈局；和基於純流體特性實現的兩欄或多欄自適應佈局相比，基於BFC特性的自適應佈局有以下優勢：自適應內容因爲封閉而更健壯，容錯性更強；自適應內容自動填滿浮動之外區域，無需關心浮動元素寬度，能夠整站大規模應用；單元格有一個很是神奇的特性，就是寬度設置的再大，實際寬度也不會超過表格容器的寬度；提煉出兩套IE7及以上版本瀏覽器適配的自適應解決方案：一、藉助overflow屬性；2.融合display:table-cell和display:inline-block；這兩種基於BFC的自適應方案均支持無限嵌套，所以，多欄自適應能夠經過嵌套方式實現；

6.4.最佳結界overflow

• 要想完全清除浮動的影響，最適合的屬性不是clear而是overflow
• 通常使用overflow：hidden，利用BFC的「結界」特性完全解決浮動對外部或兄弟元素的影響
• overflow剪裁界線border box：一個很經典的不兼容問題，即Chrome瀏覽器下，若是容器可滾動（假設是垂直滾動），則padding-bottom也算在滾動尺寸以內，IE和Firfox瀏覽器忽略padding-bottom；實際項目開發的時候，要儘可能避免滾動容器設置padding-bottom值，除了樣式表現不一致外，還會致使scrollHeight值不同；
• 瞭解overflow-x和overflow-y：overflow-x和overflow-y分別表示單獨控制水平或垂直方向上的剪裁規則；除非overflow-x和overflow-y的屬性值都是visible，不然visible會當成auto來解析；換句話說，永遠不可能實現一個方向溢出剪裁或滾動，另外一個方向內容溢出顯示的效果；
• overflow與滾動條：HTML中有兩個標籤式默承認以產生滾動條的，一個是根元素<html>，一個是文本域<textarea>；但願實現一個表格頭固定、表格體能夠滾動的效果，常見的實現方法是使用雙<table>，表格頭是一個獨立的<table>,主體是一個獨立的<table>元素，放在一個overflow:auto的<div>元素中；對齊問題的兩種解決方法（1.<table>元素使用固定的寬度值，可是距離右側留有17px的間隙；2.表格的最後一列不設定寬度(文字最好左對齊)，前面每一列都定死寬度；）
• 依賴overflow的樣式表現：有一種效果離不開overflow:hidden聲明，即單行文字溢出點點點效果
• overflow與錨點定位：錨點定位行爲的觸發條件（1.URL地址中的錨鏈與錨點處於focus狀態；2.可focus的錨點元素處於focus狀態）；通常實現返回頂部效果都是使用這樣的HTML：<a href="#">返回頂部</a>；「focus錨點定位指的是相似連接或者按鈕、輸入框等能夠被focus的元素被focus時發生的頁面重定位現象」；錨點定位行爲的發生，本質上是經過改變容器滾動高度或者寬度來實現的；

6.5.float的兄弟position:absolute

• 當absolute和float同時存在的時候，float屬性是無任何效果的
• absolute的包含塊：普通元素的百分比寬度是相對於父元素的content box寬度計算的，而絕對定位元素的寬度是相對於第一個position不爲static的祖先元素計算的；內聯元素的「包含塊」是由「生成的」先後內聯盒子決定的，與裏面的內聯盒子細節沒有任何關係；跨行的兼容性問題在於規範對此行爲並未定義，致使瀏覽器在實現上各有差別。主要差別在於，Firefox瀏覽器的「包含塊」僅覆蓋第一行，而IE和Chrome瀏覽器「包含塊」的表現徹底符合定義，由第一行開頭和最後一行結尾的內聯盒子共同決定；
• 具備相對特性的無依賴absolute絕對定位一個絕對定位元素，沒有任何left/top/right/bottom屬性設置，而且其祖先元素所有都是非定位元素，其位置還在當前位置，不是在瀏覽器左上方；「無依賴絕對定位」的強大之處（1.各種圖標定位；2.超越常規佈局的排版；3.下拉列表的定位；4.佔位符效果模擬；比較好的作法是使用<label>標籤和輸入框關聯並覆蓋在輸入框上面，好處是點擊佔位文字輸入框自然focus，而且不會污染輸入框的value）
• absolute與text-align：出人意料，text-align竟然能夠改變absolute元素的位置；本質上是「幽靈空白節點」和「無依賴絕對定位」共同做用的結果；設置height:0同時overflow:hidden，那豈不是裏面全部元素都被剪裁看不見啦？普通元素確實會如此，可是對於absolute絕對定位以及fixed固定定位元素，規則要更復雜；

6.6.absolute與overflow

• overflow對absolute元素的剪裁規則，一句話表述就是：絕對定位元素不老是被父級overflow屬性剪裁，尤爲當overflow在絕對定位元素及其包含塊之間的時候
• 換一種方法表述就是：若是overflow不是定位元素，同時絕對定位元素和overflow容器之間沒有定位元素，則overflow沒法對absolute元素進行剪裁
• 當你們遇到absolute元被剪裁或者fixed固定定位失效時，能夠看看是否是transform屬性在做祟

6.7.absolute與clip

• clip屬性要想起做用，元素必須是絕對定位或者固定定位，也就是position屬性值必須是absolute或者fixed
• 從新認識的clip屬性：clip剪裁很是有用，在如下兩種場景下具備不可替代的地位（1.fixed固定定位的剪裁；2.最佳可訪問性隱藏）
• 深刻了解clip：這些特性你們的認識都是一致的：使用clip進行剪裁的元素其clientWidth和clientHeight包括樣式計算的寬高仍是原來的大小；總結一下：clip隱藏僅僅是決定了哪部分是可見的，非可見部分沒法響應點擊事件等；而後，雖然視覺上隱藏，可是元素的尺寸依然是原來的尺寸，在IE瀏覽器和Firefox瀏覽器抹掉了不可見區域尺寸對佈局的影響，Chrome瀏覽器卻保留了；

6.8.absolute的流體特性

• 當absolute遇到left/top/right/bottom屬性：當absolu變成絕對定位元素te遇到left/top/right/bottom屬性的時候，absolute元素才真正
• absolute的流體特性：實際上，絕對定位元素也具備相似的流體特性，固然不是默認就有的，而是在特定屬性下才具備，條件是「對立方向同時發生定位的時候」；設置了對立定位屬性的絕對定位元素的表現神似普通的<div>元素，不管設置padding仍是margin，其佔據的空間一致不變，變化的就是content box的尺寸，這就是典型的流體表現特性；
• absolute的margin：auto居中：當絕對定位元素處於流體狀態的時候，各個盒模型相關屬性的解析和普通流體元素都是如出一轍的，margin負值可讓元素的尺寸更大，而且可使用margin：auto讓絕對定位元素保持居中；區別在於，絕對定位元素margin：auto居中從IE8瀏覽器開始支持，而普通元素的margin：auto居中很早就支持了；若是絕對定位元素的尺寸是已知了，沒有必要使用transform，百分比transform會讓ios微信閃退，其實首推的方法就是利用絕對定位元素的流體特性和margin：auto的自動分配特性實現居中；

6.9.position:relative纔是大哥

• relative對absolute的限制
• relative與定位：relative的定位有兩大特性：一是相對自身，二是無侵入；當relative進行定位偏移的時候，通常狀況下不會影響周圍元素的佈局；relative的定位還有另外兩點值得一提：相對定位元素的left/top/right/bottom的百分比值是相對於包含塊計算的，而不是自身；
• relative的最小化影響原則：總結的一套更好的佈局實踐的原則，主分爲兩部分；1.儘可能不使用relative，若是想定位某些元素，看看可否使用「無依賴的絕對定位」；2.若是場景受限，必定要使用relative，則該relative務必最小化；

6.10.強悍的position:fixed固定定位

• 固定定位之因此這麼強悍，根本緣由是其「包含塊」和其餘元素不同
• position：fixed不同的包含塊：position：fixed固定定位元素的「包含塊」是根元素，咱們能夠將其近似當作<html>元素。換句話說，惟一能夠限制固定定位元素的就是<html>根元素
• position：fixed的absolute模擬：有時候咱們但願元素既有不跟隨滾動的固定定位效果，又能被定位元素限制和精準定位，可使用position：absolute進行模擬。原理很簡單：頁面的滾動使用普通元素替代，此時滾動元素以外的其餘元素天然就有了「固定定位」的效果
• position：fixed與背景鎖定：蒙層彈窗，其中黑色半透明全屏覆蓋的蒙層基本上都是使用position：fixed定位實現的。缺點：蒙層沒法覆蓋瀏覽器右側的滾動欄，而且鼠標滾動的時候後面的背景內容依然能夠被滾動；若是但願背景被鎖定，能夠借鑑「absolute模擬fixed定位」的思路，讓頁面滾動條由內部的普通元素產生便可；移動端項目，阻止touchmove事件的默認行爲能夠防止滾動；桌面端項目，可讓根元素直接overflow：hidden；

第七章 css世界的層疊規則

• 所謂「層疊規則」，指的是當網頁中德元素髮生層疊時的表現規則

7.1.z-index只是css層疊規則中的一葉小舟

• z-index屬性只有和定位元素(position不爲static的元素)在一塊兒的時候纔有做用，可使是正數也能夠是負數

7.2.理解css世界的層疊上下文和層疊水平

• 什麼是層疊上下文：英文稱做stacking context；HTML中的一個三維概念；能夠把層疊上下文理解爲一種「層疊結界」，自成一個小世界；
• 什麼是層疊水平：層疊水平，決定了同一個層疊上下文中元素在z軸上的顯示順序；全部的元素都有層疊水平，包括層疊上下文元素，也包括普通元素；千萬不要把層疊水平和CSS的z-index屬性混爲一談；

7.3.理解元素的層疊順序

• 表示元素髮生層疊時有着特定的垂直顯示順序
• 層疊順序規則：層疊上下文background/border》負z-index》block塊狀水平盒子》float浮動盒子》inline水平盒子》z-index:auto或當作z-index:0》正z-index
• 一些補充說明：位於最下面的background/border特指層疊上下文元素的邊框和背景色；inline水平盒子指的是包括inline/inline-block/inline-table元素的「層疊順序」，它們都是同等級別的；單純從層疊水平上看，實際上z-index：0和z-index：auto是能夠當作是同樣的；

7.4.務必牢記的層疊準則

• 兩條層疊領域的黃金準則：誰大誰上；後來居上；

7.5.深刻了解層疊上下文

• 層疊上下文的特性：層疊上下文的層疊水平要比普通元素高；層疊上下文能夠阻斷元素的混合模式；層疊上下文能夠嵌套，內部層疊上下文及其全部子元素均受制於外部的「層疊上下文」；每一個層疊上下文和兄弟元素獨立。當進行層疊變化或渲染的時候，只須要考慮後代元素；每一個層疊上下文是自成體系的。當元素髮生層疊的時候，整個元素被認爲是在父層疊上下文的層疊順序中；
• 層疊上下文的建立：1.根層疊上下文指的是頁面根元素，能夠當作是<html>元素；2.對於position值爲relative/absolute以及Firefox/IE瀏覽器（不包括Chrome瀏覽器）下含有position：fixed聲明的定位元素，當其z-index值不是auto的時候，會建立層疊上下文；差異就在於z-index：auto所在的<div>元素是一個普通定位元素
• 層疊上下文與層疊順序：元素一旦成爲定位元素，其z-index就會自動生效，此時其z-index就是默認的auto，也就是0級別，根據上面的層疊順序表，就會覆蓋inline或block或float元素；opacity的值不是1的時候，是具備層疊上下文的，層疊順序是z-index：auto級別，跟沒有z-index值得absolute絕對定位元素是分庭抗禮的；

7.6.z-index負值深刻理解

• z-index是支持負值的
• z-index負值元素的層級是在層疊上下文元素上面、block元素的下面，也就是z-index雖然名爲負數層級，但依然沒法突破當前層疊上下文包裹的小世界
• CSS3 transform可讓元素具備新的層疊上下文
• z-index負值在實際項目中的做用：1.可訪問性隱藏；2.IE8下的多背景模擬；3.定位在元素的後面；

7.7.z-index不犯二準則

• 準則內容：對於非浮層元素，避免設置z-index值，z-index值沒有任何道理須要超過2
• 爲何須要這個準則：1.定位元素一旦設置了z-index值，就從普通定位元素變成了層疊上下文元素，相互間的層疊順序就發生了根本的變化，很容易出現設置了巨大的z-index值也沒法覆蓋其餘元素的問題；2.避免z-index一山比一山高的樣式混亂問題；
• 對於JavaScript驅動的浮動組件，藉助層級計數器來管理：1.總會遇到意想不到的高層級元素；2.組件的覆蓋規則具備動態性；
• 所謂層級計數器，實際上就是一段JavaScript腳本，會遍歷全部body處於顯示狀態的子元素，並獲得最大z-index值，和默認的z-index作比較

第八章 強大的文本處理能力

• CSS就是憑藉自身強大的文本處理和文本展現能力成爲樣式佈局的標杆語言的。同時代的SVG的優點在於圖形展現，在文本處理這一塊實在是不敢恭維

8.1.line-height的另一個朋友font-size

• font-size和vertical-align的隱祕故事：line-height的部分類別屬性值是相對於font-size計算的，vertical-align百分比值屬性又是相對於line-height計算的；不管font-size如何變化，後面圖標都垂直居中對齊的例子；原理以下：內聯元素默認基線對齊，圖片的基線能夠當作是圖片的下邊緣，文字內容的基線是字符x下邊緣；居中原理本質上和絕對定位元素50%定位加偏移自身1/2尺寸實現居中是同樣的，只不過這裏的偏移使用的是vertical-align百分比值；
• 理解font-size與ex、em和rem的關係：ex是字符x的高度，顯然和font-size關係密切，font-size值越大，天然ex對應的大小也就大；可是em和字符m確實有關。em在傳統排版中指一個字模的高度(能夠腦補下活字印刷的字模)，注意是字模的高度，不是字符的高度。之因此叫作em徹底取決於M的字形；CSS世界的渲染是一次渲染，是不會有死循環的；
• 理解font-size的關鍵字屬性值：font-size的關鍵字屬性值分爲如下兩類：相對尺寸關鍵字（相對於當前元素font-size計算）、絕對尺寸關鍵字（與當前元素font-size無關，僅受瀏覽器設置的字號影響）；如何權衡「易於實現維護」「視覺還原」「可訪問性」三者，兩個珍藏的建議；1.即便是定寬的傳統桌面端網頁，也須要作響應式處理，尤爲是針對1200像素寬度設計的網頁，但只須要響應到800像素便可，能夠保證至少有1.5倍的縮放空間，若是作到這一步，那麼是否須要響應瀏覽器的字號設置這一點就能夠忽略；2.若是因各類緣由沒法作到響應式處理，也沒有必要全局都使用相對單位，畢竟成本等現實問題擺在那裏，其實須要在圖文爲主的重要局部區域使用可縮放的font-size處理便可；
• font-size: 0與文本的隱藏：實際上，並非全部小於12px的font-size都會被看成12px處理。有一個值例外，那就是0，也就是說，若是font-size：0的字號表現就是0，那麼文字會直接被隱藏掉，而且只能是font-size：0，哪怕設置成font-size：0.00000001px，都會看成12px處理的

8.2.字體屬性家族的你們長font-family

• font-family默認值由操做系統和瀏覽器共同決定
• 字體族分爲不少類：serif襯線字體、sans-serif無襯線字體、monospace等寬字體、cursive手寫字體、fantasy奇幻字體、system-ui系統UI字體
• 瞭解襯線字體和無襯線字體：所謂襯線字體，通俗講就是筆畫開始、結束的地方有額外裝飾並且筆畫的粗細會有所不一樣的字體
• 等寬字體的實踐價值：所謂等寬字體，通常是針對英文字體而言的
• 中文字體和英文名稱
• 一些補充說明：微軟正黑體是一款全面支持ClearType技術的TrueType無襯線字體，用於繁體中文系統；「思源黑體」和「思源宋體」是Adobe與Google合做推出的開源字體。其設計目標是能夠普遍用於多種用途的計算機字體，好比用於手機、平板或者桌面的用戶界面、網頁瀏覽或者電子書閱讀等，均包含7個字重；

8.3.字體家族其餘成員

• 貌似粗獷、實則精細無比的font-weight：可不能夠自創一個font-weight：550的寫法？不能夠；實際上，全部這些數值關鍵字瀏覽器都是支持的，之因此沒有看到任何粗細的變化，是由於咱們的系統裏面缺少對應粗細的字體；
• 具備近似姐妹花屬性值得font-style：font-style表示文字造型是斜仍是正；italic是使用當前字體的斜體字體，而oblique只是單純的讓文字傾斜；之因此會專門爲一個字體設計傾斜字體，就是由於單純傾斜的時候很差看；
• 不適合國情的font-variant：font-variant是一個從IE6時代就過來的CSS屬性；在母語是英文的國家這個屬性估計都用得很少；

8.4.font屬性

• 做爲縮寫的font屬性：若是你的CSS代碼本來就沒有line-height屬性，使用font縮寫反而是不推薦的；還有一個使人頭疼的問題，就是font縮寫必需要帶上font-family；
• 使用關鍵字值的font屬性：font屬性除了縮寫用法，還支持關鍵字屬性值；各個關鍵字的含義若以下：（caption活動窗口標題欄使用的字體；icon包含圖標內容所使用的字體；menu菜單使用的字體；message-box消息盒裏面使用的字體）
• font關鍵字屬性值得應用價值：但願非Windows系統下不要使用微軟雅黑字體，而是使用其系統字體；一種方法是能夠試試使用非標準的-apple-system等關鍵字字體；實際上還真有標準的系統字體關鍵字，叫作system-ui；讓網頁的字體跟系統走，還有一個更加長遠的好處。隨着軟件的不斷髮展，咱們的操做系統的默認中文字體必定是愈來愈好看，若是網頁的font-family定死爲某個字體，用戶就沒法及時享受到新系統新字體帶來的愉悅的視覺感覺；

8.5.真正瞭解@font-face規則

• @font face的本質是變量：@font face本質上就是一個定義字體或字體集的變量，這個變量不只僅是簡單的自定義字體，還包括重命名、默認字體樣式設置等；@font face規則支持的CSS屬性有font-family、src、font-style、font-weight、unicode-range、font-variant、font-stretch和font-feature-settings；若是是使用系統安裝字體，則使用local()功能符，若是是使用外鏈字體，則使用url()功能符；format()功能符的做用是讓瀏覽器提早知道字體的格式，以決定是否須要加載這個字體，而不是加載完了以後再自動判斷；unicode-range的做用是可讓特定的字符或者特定字符範圍的字符使用指定的字體；
• @font face與字體圖標技術：從面向將來的角度講，字體圖標技術的使用會愈來愈邊緣化，由於和SVG圖標技術相比，其惟一的優點就是兼容一些老的IE瀏覽器；SVG圖標一樣是矢量的，一樣顏色可控，但資源佔用更少，加載體驗更好，呈現效果更佳，更加符合語義，我我的是很是推崇SVG圖標的；兩個須要關注的東西，一個是字體，另外一個是字符，而這兩個東西就是字體圖標技術的本質所在；字體圖標技術就是使用相似的原理實現的，即把一般的字符映射成爲另外的圖標形狀；

寫在後面

• pdf書籍、筆記思惟導圖、隨書代碼打包下載地址：https://pan.baidu.com/s/1B9N5zFObIq4NU4QpSM5dZQ(提取碼：lp46)
• 紙質書京東購買地址：https://u.jd.com/u8b3mt（推薦使用紙質書來學習）