選擇器語法

簡單選擇器

• *
• div svg|a
• .cls
• #id
• [attr = value]
• :hover
• ::before

復(fù)合選擇器compound

• <簡單選擇器><簡單選擇器><簡單選擇器>:&的關(guān)系 若要||的關(guān)系 用選擇器列表(selector,selector)實現(xiàn)
• *或者div必須寫在最前面，偽類偽元素在最后面

復(fù)雜選擇器

• <復(fù)合選擇器><sp><復(fù)合選擇器>
• <復(fù)合選擇器>">"<復(fù)合選擇器>
• <復(fù)合選擇器>"~"<復(fù)合選擇器>
• <復(fù)合選擇器>"+"<復(fù)合選擇器>
• <復(fù)合選擇器>"||"<復(fù)合選擇器>

優(yōu)先級

• 簡單選擇器計數(shù)
  優(yōu)先級可以用一個下面這樣的四元組表示：
  [內(nèi)聯(lián)樣式,id, 類\屬性\偽類,類型\偽元素]
  瀏覽器可通過配一個較大的N進(jìn)制來進(jìn)行計算
  S = x *N^3 + x*N^2+ x*N^1+x（N可以取1000000）
  https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

偽類

• 鏈接/行為

  • :any-link
  • :link :visited
  • :hover
  • :active
  • :focus
  • :target

• 樹結(jié)構(gòu)

  • :empty
  • :nth-child()
  • :nth-last-child() (回溯)
  • :first-child :last-child (回溯) :only-child (回溯)

• 偽元素

  • ::before
  • ::after
  • ::first-letter
  • ::first-line (不能設(shè)置盒模型系列float等) 與layout有關(guān) 需要在layout階段進(jìn)行compute css

排版

盒（Box）

1. HTML代碼中可以書寫開始標(biāo)簽、結(jié)束標(biāo)簽，和自封閉標(biāo)簽。
2. 一對起止標(biāo)簽，表示一個元素。
3. DOM樹中存儲的是元素和其他類型的節(jié)點（Node）。
4. CSS選擇器選中的是元素。
5. CSS選擇器選中的元素，在排版時可能產(chǎn)生多個盒。
6. 排版和渲染的基本單位是盒。

正常流排版 normal flow

1. 收集盒進(jìn)行
2. 計算盒在行中的分布
3. 計算行的分布

正常流的行模型

1. inline-block baseline有文字時在文字下緣，無文字時移至盒下緣，所以一般給inline-box設(shè)置vertical-align:bottom
2. 行高 先保證線對齊 最后算撐開等高度，inline-box vertical-align推薦top bottom middle
3. 每個inline-box 的vertical-align用自己的屬性去對齊行的屬性.

float 與 clear

margin折疊

1. 只發(fā)生在交叉軸方向，所以只能在BFC里，不同的BFC之間不會發(fā)生
2. 能容納正常流（注意，是normal flow，flex不行）的塊級元素基本都會產(chǎn)生BFC，BFC不產(chǎn)生的特例overflow:visible等
3. BFC 不和父元素合并 所以與float 兄弟元素?zé)o法合并

display

1. flex inline-flex （父flex container 子 flex item）
2. table inline-table
3. grid inline-grid
4. block inline-block
5. inline
6. run-in

• 屬于block container（內(nèi)部表現(xiàn)正常流）的只有4
• 屬于block level box（外部表現(xiàn)非inline）的有flex table grid block

Flex排版

1. 收集盒進(jìn)行
2. 計算盒在主軸方向的排布
3. 計算盒在交叉軸方向的排布

分行

1. 根據(jù)主軸尺寸，把元素分進(jìn)行，分不進(jìn)去的進(jìn)下一行
2. 若設(shè)置了no-wrap， 則強行分配進(jìn)第一行

計算主軸方向

1. 找出所有Flex元素
2. 把主軸方向的剩余尺寸按比例分配給這些元素
3. 若剩余空間為負(fù)數(shù)，所有flex元素寬度為0，等比例壓縮剩余元素

計算交叉軸方向

1. 根據(jù)每一行中最高元素計算行高
2. 根據(jù)行高flex-align和item-align，確定元素具體位置

屬性

• 容器的屬性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

• 項目的屬性

  • order
  • flex-grow
  • flex-shrink 壓縮值，默認(rèn)1
  • flex-basis 基準(zhǔn)值，至少占據(jù)的空間
  • flex 前三項的和值 默認(rèn) 0 1 auto
  • align-self