摘要：元素根據(jù)外在盒子是內(nèi)聯(lián)還是塊級(jí)，分成塊級(jí)元素和內(nèi)聯(lián)元素。值為常見的內(nèi)聯(lián)元素有。注數(shù)值需向上舍入是相對(duì)于計(jì)算的只能應(yīng)用于內(nèi)聯(lián)元素以及的元素。的顯示內(nèi)聯(lián)元素元素的垂直中心點(diǎn)和行框盒子基線往上處對(duì)齊。

本文是對(duì)《CSS世界》閱讀中所做筆記和感悟，若有錯(cuò)誤請(qǐng)指正。

CSS設(shè)計(jì)初衷是為了更好地展示圖文。
HTML元素根據(jù)”外在盒子“是內(nèi)聯(lián)還是塊級(jí)，分成塊級(jí)元素和內(nèi)聯(lián)元素。
HTML元素也可根據(jù)是否具有可替換內(nèi)容，分成替換元素和非替換元素

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

/*利用塊級(jí)元素?fù)Q行特性清除浮動(dòng)：*/
.clear:after{
    content:"",
    display:table;
    clear:both;
}

常見的塊級(jí)元素有div、li、table。

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

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

width:auto表現(xiàn)：fill-available,fit-content,min-content,max-content

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

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

[技巧]transition搭配max-height可制造展開收起動(dòng)畫

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

內(nèi)聯(lián)元素構(gòu)成={
    主塊:{
        內(nèi)在盒子：block|table{
            content-box
            padding-box
            border-box
            margin-box
        },
        外在盒子："inline",
    },
}

    文字 
    
        em
    
    
    文字em

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

字符內(nèi)容...



    內(nèi)容...

解決上述幽靈空白節(jié)點(diǎn)方法：

內(nèi)聯(lián)元素塊狀化

容器line-height:0

font-size:0

內(nèi)聯(lián)元素設(shè)置vertical-align:top|middle|bottom

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

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

內(nèi)聯(lián)元素padding會(huì)斷行

[技巧]padding增加點(diǎn)擊區(qū)域，增加錨鏈接頂部留白
[技巧]利用padding百分比橫豎都是相對(duì)于寬度計(jì)算，實(shí)現(xiàn)塊狀元素自適應(yīng)等比例矩形

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

margin百分比橫豎都是相對(duì)于寬度計(jì)算

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

[兼容]如果容器可以滾動(dòng)，ie和firefox會(huì)忽略padding-bottom，chrome則不會(huì)，因?yàn)榍罢叱^content-box觸發(fā)滾動(dòng)，后者超過padding-box觸發(fā)。所以建議使用margin-bottom

塊級(jí)元素的margin-top與margin-bottom合并為單個(gè)。
合并計(jì)算：“正正取大值”“正負(fù)值相加”“負(fù)負(fù)最負(fù)值”
合并場(chǎng)景：

設(shè)計(jì)緣由：讓圖文信息排版更舒服自然。

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

設(shè)計(jì)緣由：div語(yǔ)義作用是分組，嵌套分組被設(shè)計(jì)成不阻斷合并

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

父元素設(shè)置為塊狀格式化上下文元素;

父元素設(shè)置 border-top 或 padding-top 值;

父元素和第一個(gè)子元素之間添加內(nèi)聯(lián)元素進(jìn)行分隔。

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

父元素設(shè)置為塊狀格式化上下文元素;

父元素設(shè)置 border-bottom 或 padding-bottom 值;

父元素和最后一個(gè)子元素之間添加內(nèi)聯(lián)元素進(jìn)行分隔;

父元素設(shè)置 height、min-height 或 max-height

設(shè)計(jì)緣由：可以避免多個(gè)空標(biāo)簽（如

）影響排版

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

對(duì)于空塊級(jí)元素margin合并，解決方案選其一：

設(shè)置垂直方向的 border 或 padding;

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

設(shè)置 height 或者 min-height。

display:inline的費(fèi)替換元素的垂直margin無效

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

margin合并，見上節(jié)

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

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

鞭長(zhǎng)莫及（float和overflow）導(dǎo)致的 margin 無效

內(nèi)聯(lián)特性(vertical-align)導(dǎo)致的 margin 無效

border-width 不支持百分比值

border-style 的默認(rèn)值是 none

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

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

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

[技巧]內(nèi)聯(lián)圖標(biāo)使用height:1ex使得基線對(duì)齊

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

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

替換元素高度不受 line-height 影響，平時(shí)我們看到的高度本質(zhì)是“行框盒子”前面的“幽靈空白節(jié)點(diǎn)”撐開高度

內(nèi)聯(lián)替換元素和內(nèi)聯(lián)非替換元素在一起時(shí)會(huì)共同形成一個(gè)“行框盒子”，line-height決定這個(gè)行盒的最小高度。原因有二：

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

vertical-align

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

line-height默認(rèn)值為normal，不同字體不同。值為數(shù)值（如1.5）時(shí)：子元素繼承該數(shù)值；值為百分比（150%）或長(zhǎng)度（20px）時(shí)：子元素繼承計(jì)算值。（注：line-height數(shù)值需向上舍入）

line-height 是相對(duì)于 font-size 計(jì)算的

只能應(yīng)用于內(nèi)聯(lián)元素以及 display：table-cell 的元素。（浮動(dòng)和絕對(duì)定位會(huì)讓元素塊狀化，vertical-align失效）

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

值類型：

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

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

上標(biāo)下標(biāo)類,如 sub、super;

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

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

vertical-align:baseline的顯示：

內(nèi)聯(lián)元素：字符x的下邊緣

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

inline-block:

里面無內(nèi)聯(lián)元素或overflow不是visible: margin底邊緣

否則：最后一行內(nèi)聯(lián)元素的基線

vertial-align:top的顯示：

內(nèi)聯(lián)元素:元素底部和當(dāng)前行框盒子的頂部對(duì)齊。

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

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

vertial-align:middle的顯示：

內(nèi)聯(lián)元素:元素的垂直中心點(diǎn)和行框盒子基線往上 1/2 x-height 處對(duì)齊。

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

vertical-align:text-top:盒子的頂部和父級(jí)內(nèi)容區(qū)域的頂部對(duì)齊。
vertical-align:text-bottom:盒子的底部和父級(jí)內(nèi)容區(qū)域的底部對(duì)齊
vertical-align:super:提高盒子的基線到父級(jí)合適的上標(biāo)基線位置。
vertical-align:sub:降低盒子的基線到父級(jí)合適的下標(biāo)基線位置。

浮動(dòng)的本質(zhì)就是為了實(shí)現(xiàn)文字環(huán)繞效果。
特性:
? 包裹性;
? 塊狀化并格式化上下文;
? 破壞文檔流;
? 沒有任何 margin 合并;

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

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

如果一個(gè)元素具有 BFC,內(nèi)部子元素不會(huì)影響外部的元素。（不會(huì) margin 重疊）;可以用來清除浮動(dòng)的影響（子元素浮動(dòng)則父元素高度塌陷）。

觸發(fā)BFC的情況：

根元素;

float 的值不為 none;

overflow 的值為 auto | scroll | hidden;

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

position 的值不為 relative | static。

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

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

“包含塊”規(guī)范：

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

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

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

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

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

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

如果該內(nèi)聯(lián)元素被跨行分割了，規(guī)范并沒有明確定義，瀏覽器自行發(fā)揮。

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

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

如果overflow 不是定位元素，同時(shí)絕對(duì)定位元素和 overflow 容器之間也沒有定位元素，則overflow 無法對(duì) absolute 元素進(jìn)行剪裁。

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

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

relative最小化影響原則能避免創(chuàng)建新的層疊上下文。
默認(rèn)的文檔流是自上而下、從左往右，因此優(yōu)先級(jí)top>bottom.left>right。

蒙層彈窗2種實(shí)現(xiàn)方案：

absolute模擬fixed定位，滾動(dòng)結(jié)構(gòu)調(diào)整大

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

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

根元素 (HTML),

z-index 值不為 "auto"的 絕對(duì)/相對(duì)定位

一個(gè) z-index != "auto"的 flex 項(xiàng)目 (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 屬性被設(shè)置 "touch"的元素

從低到高：

background、border

負(fù)z-index

block塊狀水平盒子

float浮動(dòng)盒子

inline水平盒子

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

正z-index

[技巧]z-index布局不超2，浮層組件利用js層級(jí)計(jì)數(shù)不超9

font-weight取值是100,200,...,800,900。系統(tǒng)自帶不同粗細(xì)字體決定瀏覽器能否渲染。
italic 是使用當(dāng)前字體的斜體字體，而 oblique 只是單純地讓文字傾斜。
::first-letter包含符號(hào)(包括空格)，::before直到一個(gè)字符。
font屬性:caption | icon | menu | message-box | small-caption | status-bar
[兼容]caption、icon、message-box 在 Windows下Chrome無效
[技巧]html { font: menu; }可以讓瀏覽器字體跟隨系統(tǒng)
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實(shí)現(xiàn)響應(yīng)式圖標(biāo)
text-indent 的百分比值是相對(duì)于當(dāng)前元素的“包含塊”計(jì)算的，而不是當(dāng)前元素。
[技巧]text-indent+overflow:hidden隱藏img的alt邊框
letter-space、word-spacing 默認(rèn)normal,不是0，支持負(fù)值、小數(shù)，不支持百分比。
[技巧]white-space：nowrap 解決尺寸過小，水平列表切換
[技巧]text-transform:uppercase解決身份證驗(yàn)證碼輸入自動(dòng)大寫
[技巧]借助:after補(bǔ)行搭配text-align:justify實(shí)現(xiàn)兩端對(duì)齊

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

水平方向也能 margin 合并

普通塊元素可以使用 margin:auto 實(shí)現(xiàn)垂直居中

可以使用 text-align:center 實(shí)現(xiàn)圖片垂直居中

可以使用 text-indent 實(shí)現(xiàn)文字下沉效果

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

通用選擇器；元素（類型）選擇器；類選擇器；屬性選擇器；偽類；ID 選擇器；內(nèi)聯(lián)樣式
小tip-css后代選擇器可能的錯(cuò)誤認(rèn)識(shí)