整理css常見面試題

#盒子模型

##標準盒模型：content
• 怪異盒子模型： border content

專題推薦：2020年CSS面試題總結（最新）

行內元素

特徵
• 設定寬高無效
  • 設定margin只有左右有效，上下無效
  • 設定padding上下左右均有效，會撐起空間
  • 不會進行自動換行
常見的行內元素
• a span b i strong

行內塊元素

#特徵
• 可以設定寬高
  • 與所有行內元素顯示在相同行
常見的行內區塊元素
• #img input button select

• 」區塊級元素
  • 特徵
  • 可以設定寬高
  • 所有區塊級元素會獨佔一行
如果未設定寬高，預設繼承父級寬高
• • 常見的區塊級元素
p p ul li h1-h6

• css實作居中
• margin: 0 auto;
• position定位配合transform:translate
• flex佈局
• text-align配合line-height，用於字體在其父元素區域內居中

vertical-align: middle; 用來設定行內元素的居中

• css hack
  • 釋意：針對不同的瀏覽器，寫不同的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是絕對單位，值是固定的

em是繼承父元素的font-size大小單位

support

@support用來偵測瀏覽器是否支援某個css屬性，可以理解為條件判斷，一般用作相容性處理。

media

媒體查詢，依照視口大小寫對應的css樣式，一般配合rem做行動端的相容。

calc

css的計算屬性，用於動態計算長度值，支援數學運算。

清除浮動
• • 偽元素清除浮動
  原理：在父元素的偽元素中設定clear:both，即可解決高度崩塌的問題。

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

BFC：是一個獨立的佈局環境
• 格式化上下文，是一個獨立的渲染區域，讓處於BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。
  • 規則
  • 同一個BFC下，相鄰的兩個box預設垂直排列
  • 同一個BFC下，上下相鄰的兩個box，margin會發生重疊
  • BFC不會與float區域重疊
  • 計算BFC高度時，浮動子元素也會參與計算，所以不設定BFC高度，也會被浮動子元素撐開。
  文字層不會被浮動層覆蓋，而是環繞在周圍

#解決父子邊緣重疊時子元素margin帶著父元素一起移動

### 原理：利用偽元素為父元素增加一個高度為0的table####

盒子模型

• #標準盒子模型：content
• 怪異盒子模型： border content

行內元素

• 特徵
  • 設定寬高無效
  • 設定margin只有左右有效，上下無效
  • 設定padding上下左右均有效，會撐起空間
  • 不會進行自動換行
• #常見的行內元素
  • a span b i strong

行內塊元素

• 特徵
  • #可以設定寬高
  • 與所有行內元素顯示在同一行
• 常見的行內區塊元素
  • img input button select

「區塊級元素

##特徵

可以設定寬高

所有區塊級元素會獨佔一行
如果未設定寬高，預設繼承父級寬高
#常見的區塊級元素
p p ul li h1-h6

css實作居中

• #margin: 0 auto;
  position定位配合transform:translate
  flex佈局
  text-align配合line-height，用於字體在其父元素區域內居中
  vertical-align: middle; 用來設定行內元素的居中
  css hack

釋意：針對不同的瀏覽器，寫不同的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是絕對單位，值是固定的

em是繼承父元素的font-size大小單位

• support
  • @support用來偵測瀏覽器是否支援某個css屬性，可以理解為條件判斷，一般用作相容性處理。
  media

媒體查詢，依照視口大小寫對應的css樣式，一般配合rem做行動端的相容。

calc

• css的計算屬性，用於動態計算長度值，支援數學運算。
• 清除浮動
  偽元素清除浮動
  原理：在父元素的偽元素中設定clear:both，即可解決高度崩塌的問題。

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

  • BFC：是一個獨立的佈局環境
格式化上下文，是一個獨立的渲染區域，讓處於BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。

規則

同一個BFC下，相鄰的兩個box預設垂直排列

同一個BFC下，上下相鄰的兩個box，margin會發生重疊

BFC不會與float區域重疊

計算BFC高度時，浮動子元素也會參與計算，所以不設定BFC高度，也會被浮動子元素撐開。

###文字層不會被浮動層覆蓋，而是環繞在周圍################解決父子邊緣重疊時子元素margin帶著父元素一起移動# ##### 原理：利用偽元素為父元素添加一個高度為0的table#########相關教學推薦：###CSS影片教學##########

以上是整理css常見面試題的詳細內容。更多資訊請關注PHP中文網其他相關文章！