摘要：元素根據外在盒子是內聯還是塊級，分成塊級元素和內聯元素。值為常見的內聯元素有。注數值需向上舍入是相對于計算的只能應用于內聯元素以及的元素。的顯示內聯元素元素的垂直中心點和行框盒子基線往上處對齊。

本文是對《CSS世界》閱讀中所做筆記和感悟，若有錯誤請指正。

CSS設計初衷是為了更好地展示圖文。
HTML元素根據”外在盒子“是內聯還是塊級，分成塊級元素和內聯元素。
HTML元素也可根據是否具有可替換內容，分成替換元素和非替換元素

一個水平流上只能顯示一個塊級元素，多個塊級元素則換行顯示。
display值為 block、list-item、table。

/*利用塊級元素換行特性清除浮動：*/
.clear:after{
    content:"",
    display:table;
    clear:both;
}

常見的塊級元素有div、li、table。

塊級元素構成={
    主塊:{
        內在盒子：block|table{
            content-box:"width默認作用在這"
            padding-box:
            border-box:"改變box-sizing使得width作用在這"
            margin-box:
        },
        外在盒子：block,
    },
    附加塊(可選)：如 list-item,
}

[兼容]IE不支持before/after偽元素display為list-item

width:auto表現：fill-available,fit-content,min-content,max-content

通過設定顯示的高度和絕對定位可讓元素支持height:100%，前者相對于content-box,后者相對于padding-box計算百分比。

min-width/height初始值是auto,max-width/height初始值是none。權重：min-width>max-with>width!important

[技巧]transition搭配max-height可制造展開收起動畫

可以和文字在一行顯示。display值為inline、inline-block, inline-table
常見的內聯元素有button、img、input、select。

內聯元素構成={
    主塊:{
        內在盒子：block|table{
            content-box
            padding-box
            border-box
            margin-box
        },
        外在盒子："inline",
    },
}

    文字 
    
        em
    
    
    文字em

HTML5的內聯元素渲染每個行框盒子前面有個”幽靈空白節點“即strut(支柱),一個具有該元素字體和行高屬性的0寬內聯盒子*（如下效果相同）

字符內容...



    內容...

解決上述幽靈空白節點方法：

內聯元素塊狀化

容器line-height:0

font-size:0

內聯元素設置vertical-align:top|middle|bottom

通過修改某個屬性呈現內容可被替換的元素。如img、object、video、iframe、textarea、input。
內容外觀不受css影響，在很多css屬性上有自己的一套表現規則。
[兼容]textarea & input 在ie和chrome是inline-block，在firefox上是inline

[技巧]img的src與content搭配，可以使得看到的圖是content,保存的是src
[技巧]content可設置attr(alt)和自定義屬性如attr(data-title)、font-icon
[技巧]content計數器counters

內聯元素padding會斷行

[技巧]padding增加點擊區域，增加錨鏈接頂部留白
[技巧]利用padding百分比橫豎都是相對于寬度計算，實現塊狀元素自適應等比例矩形

[兼容]ol/ul列表內置padding-left單位是px(chrome內置40px)
[兼容]firefox的button需設置button::-moz-focus-inner{padding:0}才能消除padding

margin百分比橫豎都是相對于寬度計算

[技巧]margin一側auto,則auto為剩余空間大小；兩側auto則平分剩余空間
[技巧]使用writing-mode改變流向，搭配margin:auto垂直居中
[技巧]使用absolute上下左右零+固定寬高+margin:auto可水平垂直居中

[兼容]如果容器可以滾動，ie和firefox會忽略padding-bottom，chrome則不會，因為前者超過content-box觸發滾動，后者超過padding-box觸發。所以建議使用margin-bottom

塊級元素的margin-top與margin-bottom合并為單個。
合并計算：“正正取大值”“正負值相加”“負負最負值”
合并場景：

設計緣由：讓圖文信息排版更舒服自然。

p { margin: 1em 0; }
第一行
第二行

設計緣由：div語義作用是分組，嵌套分組被設計成不阻斷合并

對于margin-top合并，解決方案選其一：

父元素設置為塊狀格式化上下文元素;

父元素設置 border-top 或 padding-top 值;

父元素和第一個子元素之間添加內聯元素進行分隔。

對于margin-bottom合并，解決方案選其一：

父元素設置為塊狀格式化上下文元素;

父元素設置 border-bottom 或 padding-bottom 值;

父元素和最后一個子元素之間添加內聯元素進行分隔;

父元素設置 height、min-height 或 max-height

設計緣由：可以避免多個空標簽（如

）影響排版

.father { overflow: hidden; }
.son { margin: 1em 0; }

對于空塊級元素margin合并，解決方案選其一：

設置垂直方向的 border 或 padding;

里面添加內聯元素(直接 Space 鍵空格是沒用的);

設置 height 或者 min-height。

display:inline的費替換元素的垂直margin無效

tr|td或display:table-cell|table-row的margin無效

margin合并，見上節

絕對定位元素非定位方位的 margin 值看上去“無效”

定高容器的子元素的 margin-bottom 或者寬度定死的子元素的 margin-right 的定位看上去“失效”。

鞭長莫及（float和overflow）導致的 margin 無效

內聯特性(vertical-align)導致的 margin 無效

border-width 不支持百分比值

border-style 的默認值是 none

[兼容]虛線邊框(dashed)在 Chrome 和 Firefox下，顏色區的寬高比是 3:1,顏色區和透明區的寬度比例是 1:1;而 IE 顏色區的寬高比是 2:1,顏色區和透明區的寬度比例也是 2:1
[兼容]虛點邊框(dotted)在Chrome 和 Firefox 瀏覽器下是方點;而 IE 下則是小圓點

[技巧]雙線邊框(double)在3px以上才開始有雙線邊框的表現（包括retina屏）。
[技巧]利用double+solid實現三道杠
[技巧]缺省border-color可以統一用color設置邊框顏色（currentColor）
[技巧]border繪制三角形

vertical-align:middle是對文字中線，不是相對容器

[技巧]內聯圖標使用height:1ex使得基線對齊

內聯元素line-height的高度作用細節：
em-box=font-size（不含gq等字母尾巴，漢字圖形高度略小于font-size）
行距 = line-height - em-box
半行距 = 行距/2
內容區域=文本選中帶背景色的區域，高度受font-family和font-size影響（宋體內容區域和em-box等高）

塊級元素高度不受 line-height 影響,平時我們看到的高度本質是由內聯元素“行框盒子”line-height撐開高度(如div內有文字時)

替換元素高度不受 line-height 影響，平時我們看到的高度本質是“行框盒子”前面的“幽靈空白節點”撐開高度

內聯替換元素和內聯非替換元素在一起時會共同形成一個“行框盒子”，line-height決定這個行盒的最小高度。原因有二：

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

vertical-align

line-height 可以讓單行或多行內聯元素近似垂直居中（“近似”：文字中線位置低于“行框盒子”；多行需搭配vertical-align）

line-height默認值為normal，不同字體不同。值為數值（如1.5）時：子元素繼承該數值；值為百分比（150%）或長度（20px）時：子元素繼承計算值。（注：line-height數值需向上舍入）

line-height 是相對于 font-size 計算的

只能應用于內聯元素以及 display：table-cell 的元素。（浮動和絕對定位會讓元素塊狀化，vertical-align失效）

負值全部都是往下偏移,正值全部都是往上偏移,而且數值大小全部都是相對于基線位置計算的,即vertical-align:baseline等同于vertical-align:0。

值類型：

線類,如 baseline(默認值)、top、middle、bottom;

文本類,如 text-top、text-bottom;

上標下標類,如 sub、super;

數值百分比類,如 20px、2em、20%等(相對于 line-height 的計算值計算的)

[技巧]vertical-align:middle的table-cell使得內部元素垂直居中

vertical-align:baseline的顯示：

內聯元素：字符x的下邊緣

替換元素：替換元素的下邊緣

inline-block:

里面無內聯元素或overflow不是visible: margin底邊緣

否則：最后一行內聯元素的基線

vertial-align:top的顯示：

內聯元素:元素底部和當前行框盒子的頂部對齊。

table-cell 元素:元素底 padding 邊緣和表格行的頂部對齊

vertial-align:bottom的顯示：“頂部”換成“底部”,“上邊緣”換成“下邊緣”。

vertial-align:middle的顯示：

內聯元素:元素的垂直中心點和行框盒子基線往上 1/2 x-height 處對齊。

table-cell 元素:單元格填充盒子相對于外面的表格行居中對齊。

vertical-align:text-top:盒子的頂部和父級內容區域的頂部對齊。
vertical-align:text-bottom:盒子的底部和父級內容區域的底部對齊
vertical-align:super:提高盒子的基線到父級合適的上標基線位置。
vertical-align:sub:降低盒子的基線到父級合適的下標基線位置。

浮動的本質就是為了實現文字環繞效果。
特性:
? 包裹性;
? 塊狀化并格式化上下文;
? 破壞文檔流;
? 沒有任何 margin 合并;

塊狀化：一旦 float 的屬性值不為 none,則其 display 計算值就是block或者 table。

float 定位參考的是“行框盒子”。

如果一個元素具有 BFC,內部子元素不會影響外部的元素。（不會 margin 重疊）;可以用來清除浮動的影響（子元素浮動則父元素高度塌陷）。

觸發BFC的情況：

根元素;

float 的值不為 none;

overflow 的值為 auto | scroll | hidden;

display 的值為 table-cell | table-caption | inline-block

position 的值不為 relative | static。

當子元素內容超出容器寬度高度限制的時候,剪裁的邊界是 border box 的內邊緣,而非 padding box 的內邊緣。
PC端瀏覽器滾動條作用在html而不是body。
*[技巧]text-overflow:ellipsis搭配-webkit-line-clamp實現多行文字打點效果

absolute 是非常獨立的 CSS 屬性值，其樣式和行為表現不依賴其他任何 CSS 屬性就可以完成。

“包含塊”規范：

根元素(html)被稱為“初始包含塊”，尺寸=瀏覽器可視窗口的大小。

對于其他元素，如果該元素的position :relative|static，則“包含塊”由其最近的塊容器祖先盒的 content box 邊界形成。

如果元素 position:fixed，則“包含塊”是“初始包含塊”。

如果元素 position:absolute，則“包含塊”由最近的 position 不為 static 的祖先元素建立，具體方式如下:

如果該祖先元素是純 inline 元素：

假設給內聯元素的前后各生成一個寬度為 0 的內聯盒子（inline box），則這兩個內聯盒子的 padding box 外面的包圍盒就是內聯元素的“包含塊”；

如果該內聯元素被跨行分割了，規范并沒有明確定義，瀏覽器自行發揮。

否則，“包含塊”由該祖先的 padding box 邊界形成。

如果沒有符合條件的祖先元素，則“包含塊”是“初始包含塊”。

如果overflow 不是定位元素，同時絕對定位元素和 overflow 容器之間也沒有定位元素，則overflow 無法對 absolute 元素進行剪裁。

[技巧]避免被“包含塊”限制一柱擎天，使用white-space:no-wrap。
[技巧]右上角標簽通過absolute配合透明border實現
[技巧]text-align實現“返回頂部”

[兼容]overflow 元素自身 transform，IE9 +、Firefox 和 Safari（OS X、iOS）剪裁； Chrome 和 Opera 不剪裁

relative最小化影響原則能避免創建新的層疊上下文。
默認的文檔流是自上而下、從左往右，因此優先級top>bottom.left>right。

蒙層彈窗2種實現方案：

absolute模擬fixed定位，滾動結構調整大

js:
移動端：阻止touchmove
桌面端：根元素overflow:hidden + border代替滾動條

? 層疊上下文的層疊水平要比普通元素高。
? 層疊上下文可以阻斷元素的混合模式。
? 層疊上下文可以嵌套，內部層疊上下文及其所有子元素均受制于外部的“層疊上下文”。
? 每個層疊上下文和兄弟元素獨立，也就是說，當進行層疊變化或渲染的時候，只需要考慮后代元素。
? 每個層疊上下文是自成體系的，當元素發生層疊的時候，整個元素被認為是在父層疊上下文的層疊順序中。

根元素 (HTML),

z-index 值不為 "auto"的 絕對/相對定位

一個 z-index != "auto"的 flex 項目 (flex item)，即：父元素display:flex|inline-flex

opacity < 1 的元素

transform != "none"的元素

mix-blend-mode != "normal"的元素

filter != “none”的元素

perspective != “none”的元素

isolation : "isolate"的元素

position: fixed

在 will-change 中指定了任意 CSS 屬性

-webkit-overflow-scrolling 屬性被設置 "touch"的元素

從低到高：

background、border

負z-index

block塊狀水平盒子

float浮動盒子

inline水平盒子

z-index:auto 或 不依賴z-index數值的層疊上下文(看成z-index:0)

正z-index

[技巧]z-index布局不超2，浮層組件利用js層級計數不超9

font-weight取值是100,200,...,800,900。系統自帶不同粗細字體決定瀏覽器能否渲染。
italic 是使用當前字體的斜體字體，而 oblique 只是單純地讓文字傾斜。
::first-letter包含符號(包括空格)，::before直到一個字符。
font屬性:caption | icon | menu | message-box | small-caption | status-bar
[兼容]caption、icon、message-box 在 Windows下Chrome無效
[技巧]html { font: menu; }可以讓瀏覽器字體跟隨系統
font-face兼容寫法：

@font-face {
    font-family: ICON;
    src: url("icon.eot");
    src: local("?"),
        url("icon.woff2") format("woff2"),
        url("icon.woff") format("woff"),
        url("icon.ttf");
}

[技巧]font-weight實現響應式圖標
text-indent 的百分比值是相對于當前元素的“包含塊”計算的，而不是當前元素。
[技巧]text-indent+overflow:hidden隱藏img的alt邊框
letter-space、word-spacing 默認normal,不是0，支持負值、小數，不支持百分比。
[技巧]white-space：nowrap 解決尺寸過小，水平列表切換
[技巧]text-transform:uppercase解決身份證驗證碼輸入自動大寫
[技巧]借助:after補行搭配text-align:justify實現兩端對齊

偽類：用于向某些選擇器加特殊的效果。（:active, :focus, :hover, :link, :visited, :first-child, :lang）
偽元素：用于將特殊的效果添加到選擇器。（::first-letter, ::first-line, ::before, ::after）
visibility可繼承，不影響計數器，display:none則相反。
unicode-bidi:bidi-override強制字符根據direction：rtl|ltr方向排列
writing-mode:horizontal-tb|vertical-rl|vertical-lr
writing-mode特性：

水平方向也能 margin 合并

普通塊元素可以使用 margin:auto 實現垂直居中

可以使用 text-align:center 實現圖片垂直居中

可以使用 text-indent 實現文字下沉效果

不可全局outline:0 none
[技巧]visibility搭配transition實現懸停延時顯示，移出瞬時隱藏
[技巧]很大的outline實現周五半透明遮罩，用在剪裁圖片矩形鏤空上和填補網頁底部留白
[兼容]display:none子元素背景圖片在chrome safari不加載，其他情況加載

通用選擇器；元素（類型）選擇器；類選擇器；屬性選擇器；偽類；ID 選擇器；內聯樣式
小tip-css后代選擇器可能的錯誤認識