盒子模型

• 標(biāo)準(zhǔn)盒模型：content

• 怪異盒模型： border+content

專(zhuān)題推薦：2020年CSS面試題匯總（最新）

行內(nèi)元素

• 特征
  • 設(shè)置寬高無(wú)效
  • 設(shè)置margin只有左右有效，上下無(wú)效
  • 設(shè)置padding上下左右均有效，會(huì)撐起空間
  • 不會(huì)進(jìn)行自動(dòng)換行
• 常見(jiàn)的行內(nèi)元素
  • a span b i strong

行內(nèi)塊元素

• 特征
  • 可以設(shè)置寬高
  • 與所有行內(nèi)元素顯示在同一行
• 常見(jiàn)的行內(nèi)塊元素
  • img input button select

塊級(jí)元素

• 特征
  • 可以設(shè)置寬高
  • 所有塊級(jí)元素會(huì)獨(dú)占一行
  • 如果未設(shè)置寬高，默認(rèn)繼承父級(jí)寬高
• 常見(jiàn)的塊級(jí)元素
  • p p ul li h1-h6

css實(shí)現(xiàn)居中

• margin: 0 auto;
• position定位配合transform:translate
• flex布局
• text-align配合line-height，用于字體在其父元素區(qū)域內(nèi)居中
• vertical-align: middle; 用來(lái)設(shè)置行內(nèi)元素的居中

css hack

• 釋意：針對(duì)不同的瀏覽器，寫(xiě)不同的css，用作兼容
  • 條件hack

  <!--[if IE]> <style>   p {       color: red;   }</style> <![endif]-->

  • 屬性hack

  .p {     color: red; /*IE 8+*/     *color: green; /*IE 7*/     _color: yellow; /*IE 6*/}

  • 選擇器hack

  /*IE 6*/* html .p {     color: red;}/*IE 7*/* + html .p {     color: green;}

px 和 em

• px是絕對(duì)單位，值是固定的
• em是繼承父元素的font-size大小單位

support

@support用來(lái)檢測(cè)瀏覽器是否支持某個(gè)css屬性，可以理解為條件判斷，一般用作兼容性處理。

media

媒體查詢(xún)，根據(jù)視口大小寫(xiě)對(duì)應(yīng)的css樣式，一般配合rem做移動(dòng)端的兼容。

calc

css的計(jì)算屬性，用于動(dòng)態(tài)計(jì)算長(zhǎng)度值，支持?jǐn)?shù)學(xué)運(yùn)算。

清除浮動(dòng)

• 偽元素清除浮動(dòng)
  • 原理：在父元素的偽元素中設(shè)置clear:both，即可解決高度坍塌的問(wèn)題。

  ::after {   content: "";   clear: both;   overflow: hidden;   height: 0;}

BFC：是一個(gè)獨(dú)立的布局環(huán)境

• 格式化上下文，是一個(gè)獨(dú)立的渲染區(qū)域，讓處于BFC內(nèi)部的元素與外部的元素相互隔離，使內(nèi)外元素的定位不會(huì)相互影響。
• 規(guī)則
  • 同一個(gè)BFC下，相鄰的兩個(gè)box默認(rèn)垂直排列
  • 同一個(gè)BFC下，上下相鄰的兩個(gè)box，margin會(huì)發(fā)生重疊
  • BFC不會(huì)與float區(qū)域重疊
  • 計(jì)算BFC高度時(shí)，浮動(dòng)子元素也會(huì)參與計(jì)算，所以不設(shè)置BFC高度，也會(huì)被浮動(dòng)子元素?fù)伍_(kāi)。
  • 文字層不會(huì)被浮動(dòng)層覆蓋，而是環(huán)繞在周?chē)?/li>

解決父子邊緣重疊時(shí)子元素margin帶著父元素一起移動(dòng)

+原理：利用偽元素給父元素添加一個(gè)高度為0的table

盒子模型

• 標(biāo)準(zhǔn)盒模型：content
• 怪異盒模型： border+content

行內(nèi)元素

• 特征
  • 設(shè)置寬高無(wú)效
  • 設(shè)置margin只有左右有效，上下無(wú)效
  • 設(shè)置padding上下左右均有效，會(huì)撐起空間
  • 不會(huì)進(jìn)行自動(dòng)換行
• 常見(jiàn)的行內(nèi)元素
  • a span b i strong

行內(nèi)塊元素

• 特征
  • 可以設(shè)置寬高
  • 與所有行內(nèi)元素顯示在同一行
• 常見(jiàn)的行內(nèi)塊元素
  • img input button select

塊級(jí)元素

• 特征
  • 可以設(shè)置寬高
  • 所有塊級(jí)元素會(huì)獨(dú)占一行
  • 如果未設(shè)置寬高，默認(rèn)繼承父級(jí)寬高
• 常見(jiàn)的塊級(jí)元素
  • p p ul li h1-h6

css實(shí)現(xiàn)居中

• margin: 0 auto;
• position定位配合transform:translate
• flex布局
• text-align配合line-height，用于字體在其父元素區(qū)域內(nèi)居中
• vertical-align: middle; 用來(lái)設(shè)置行內(nèi)元素的居中

css hack

• 釋意：針對(duì)不同的瀏覽器，寫(xiě)不同的css，用作兼容
  • 條件hack

  <!--[if IE]> <style>   p {       color: red;   }</style> <![endif]-->

  • 屬性hack

  .p {     color: red; /*IE 8+*/     *color: green; /*IE 7*/     _color: yellow; /*IE 6*/}

  • 選擇器hack

  /*IE 6*/* html .p {     color: red;}/*IE 7*/* + html .p {     color: green;}

px 和 em

• px是絕對(duì)單位，值是固定的
• em是繼承父元素的font-size大小單位

support

@support用來(lái)檢測(cè)瀏覽器是否支持某個(gè)css屬性，可以理解為條件判斷，一般用作兼容性處理。

media

媒體查詢(xún)，根據(jù)視口大小寫(xiě)對(duì)應(yīng)的css樣式，一般配合rem做移動(dòng)端的兼容。

calc

css的計(jì)算屬性，用于動(dòng)態(tài)計(jì)算長(zhǎng)度值，支持?jǐn)?shù)學(xué)運(yùn)算。

清除浮動(dòng)

• 偽元素清除浮動(dòng)
  • 原理：在父元素的偽元素中設(shè)置clear:both，即可解決高度坍塌的問(wèn)題。

  ::after {   content: "";   clear: both;   overflow: hidden;   height: 0;}

BFC：是一個(gè)獨(dú)立的布局環(huán)境

• 格式化上下文，是一個(gè)獨(dú)立的渲染區(qū)域，讓處于BFC內(nèi)部的元素與外部的元素相互隔離，使內(nèi)外元素的定位不會(huì)相互影響。
• 規(guī)則
  • 同一個(gè)BFC下，相鄰的兩個(gè)box默認(rèn)垂直排列
  • 同一個(gè)BFC下，上下相鄰的兩個(gè)box，margin會(huì)發(fā)生重疊
  • BFC不會(huì)與float區(qū)域重疊
  • 計(jì)算BFC高度時(shí)，浮動(dòng)子元素也會(huì)參與計(jì)算，所以不設(shè)置BFC高度，也會(huì)被浮動(dòng)子元素?fù)伍_(kāi)。
  • 文字層不會(huì)被浮動(dòng)層覆蓋，而是環(huán)繞在周?chē)?/li>

解決父子邊緣重疊時(shí)子元素margin帶著父元素一起移動(dòng)

+原理：利用偽元素給父元素添加一個(gè)高度為0的table

相關(guān)教程推薦：CSS視頻教程