首頁  >  文章  >  web前端  >  整理css常見面試題

整理css常見面試題

coldplay.xixi
coldplay.xixi轉載
2020-08-03 15:29:241909瀏覽

整理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中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除