前端開發面試題-CSS（轉載）

時間 2019-12-13

原文原文鏈接

介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？html

（1）有兩種， IE 盒子模型、W3C 盒子模型；
  （2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
  （3）區  別： IE的content部分把 border 和 padding計算了進去;

CSS選擇符有哪些？哪些屬性能夠繼承？前端

*   1.id選擇器（ # myid）
      2.類選擇器（.myclassname）
      3.標籤選擇器（div, h1, p）
      4.相鄰選擇器（h1 + p）
      5.子選擇器（ul > li）
      6.後代選擇器（li a）
      7.通配符選擇器（ * ）
      8.屬性選擇器（a[rel = "external"]）
      9.僞類選擇器（a:hover, li:nth-child）

  *   可繼承的樣式： font-size font-family color, UL LI DL DD DT;

  *   不可繼承的樣式：border padding margin width height ;

CSS優先級算法如何計算？android

*   優先級就近原則，同權重狀況下樣式定義最近者爲準;
  *   載入樣式以最後載入的定位爲準;

  優先級爲:
      同權重: 內聯樣式表（標籤內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。
      !important >  id > class > tag
      important 比 內聯優先級高

CSS3新增僞類有那些？css3

舉例：
      p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
      p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
      p:only-of-type  選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
      p:only-child        選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
      p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p> 元素。

      :after          在元素以前添加內容,也能夠用來作清除浮動。
      :before         在元素以後添加內容
      :enabled        
      :disabled       控制表單控件的禁用狀態。
      :checked        單選框或複選框被選中。

如何居中div？git

水平居中：給div設置一個寬度，而後添加margin:0 auto屬性github
```
div{
     width:200px;
     margin:0 auto;
  }
```

讓絕對定位的div居中web

div {
     position: absolute;
     width: 300px;
     height: 300px;
     margin: auto;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background-color: pink; /* 方便看效果 */
 }

水平垂直居中一面試

肯定容器的寬高 寬500 高 300 的層
 設置層的外邊距

 div {
     position: relative;     /* 相對定位或絕對定位都可 */
     width:500px;
     height:300px;
     top: 50%;
     left: 50%;
     margin: -150px 0 0 -250px;      /* 外邊距爲自身寬高的一半 */
     background-color: pink;     /* 方便看效果 */

  }

水平垂直居中二算法

未知容器的寬高，利用 `transform` 屬性

 div {
     position: absolute;     /* 相對定位或絕對定位都可 */
     width:500px;
     height:300px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: pink;     /* 方便看效果 */

 }

水平垂直居中三

利用 flex 佈局
 實際使用時應考慮兼容性

 .container {
     display: flex;
     align-items: center;        /* 垂直居中 */
     justify-content: center;    /* 水平居中 */

 }
 .container div {
     width: 100px;
     height: 100px;
     background-color: pink;     /* 方便看效果 */
 }

display有哪些值？說明他們的做用。

block         塊類型。默認寬度爲父元素寬度，可設置寬高，換行顯示。
    none          缺省值。象行內元素類型同樣顯示。
    inline        行內元素類型。默認寬度爲內容寬度，不可設置寬高，同行顯示。
    inline-block  默認寬度爲內容寬度，能夠設置寬高，同行顯示。
    list-item     象塊類型元素同樣顯示，並添加樣式列表標記。
    table         此元素會做爲塊級表格來顯示。
    inherit       規定應該從父元素繼承 display 屬性的值。

position的值relative和absolute定位原點是？

absolute
      生成絕對定位的元素，相對於值不爲 static的第一個父元素進行定位。
    fixed （老IE不支持）
      生成絕對定位的元素，相對於瀏覽器窗口進行定位。
    relative
      生成相對定位的元素，相對於其正常位置進行定位。
    static
      默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right z-index 聲明）。
    inherit
      規定從父元素繼承 position 屬性的值。

CSS3有哪些新特性？

新增各類CSS選擇器    （: not(.input)：全部 class 不是「input」的節點）
    圓角            （border-radius:8px）
    多列布局      （multi-column layout）
    陰影和反射 （Shadow\Reflect）
    文字特效      （text-shadow、）
    文字渲染      （Text-decoration）
    線性漸變      （gradient）
    旋轉            （transform）
    縮放,定位,傾斜,動畫,多背景
    例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？

一個用於頁面佈局的全新CSS3功能，Flexbox能夠把列表放在同一個方向（從上到下排列，從左到右），並讓列表能延伸到佔用可用的空間。
   較爲複雜的佈局還能夠經過嵌套一個伸縮容器（flex container）來實現。
   採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱"容器"。
   它的全部子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱"項目"。
   常規佈局是基於塊和內聯流方向，而Flex佈局是基於flex-flow流能夠很方便的用來作局中，能對不一樣屏幕大小自適應。
   在佈局上有了比之前更加靈活的空間。

   具體：http://www.w3cplus.com/css3/flexbox-basics.html

用純CSS建立一個三角形的原理是什麼？

把上、左、右三條邊隱藏掉（顏色設爲 transparent）
  #demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
  }

一個滿屏品字佈局如何設計?

簡單的方式：
      上面的div寬100%，
      下面的兩個div分別寬50%，
      而後用float或者inline使其不換行便可

css多列等高如何實現？

利用padding-bottom|margin-bottom正負值相抵；
  設置父容器設置超出隱藏（overflow:hidden），這樣子父容器的高度就仍是它裏面的列沒有設定padding-bottom時的高度，
  當它裏面的任 一列高度增長了，則父容器的高度被撐到裏面最高那列的高度，
  其餘比這列矮的列會用它們的padding-bottom補償這部分高度差。

常常遇到的瀏覽器的兼容性有哪些？緣由，解決方法是什麼，經常使用hack的技巧？

* png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.

  * 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

  * IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。

    浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}

    這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

    漸進識別的方式，從整體中逐漸排除局部。

    首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。
    接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

    css
        .bb{
            background-color:red;/*全部識別*/
            background-color:#00deff\9; /*IE六、七、8識別*/
            +background-color:#a200ff;/*IE六、7識別*/
            _background-color:#1e0bd1;/*IE6識別*/
        }


  *  IE下,可使用獲取常規屬性的方法來獲取自定義屬性,
     也可使用getAttribute()獲取自定義屬性;
     Firefox下,只能使用getAttribute()獲取自定義屬性。
     解決方法:統一經過getAttribute()獲取自定義屬性。

  *  IE下,even對象有x,y屬性,可是沒有pageX,pageY屬性;
     Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性。

  *  解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

  *  Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,
     可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

  超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:
  L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

li與li之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？

行框的排列會受到中間空白（回車\空格）等的影響，由於空格也屬於字符,這些空白也會被應用樣式，佔據空間，因此會有間隔，把字符大小設爲0，就沒有空格了。

爲何要初始化CSS樣式。

- 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

  - 固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

  最簡單的初始化方法： * {padding: 0; margin: 0;} （強烈不建議）

  淘寶的樣式初始化代碼：
  body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
  body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
  h1, h2, h3, h4, h5, h6{ font-size:100%; }
  address, cite, dfn, em, var { font-style:normal; }
  code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
  small{ font-size:12px; }
  ul, ol { list-style:none; }
  a { text-decoration:none; }
  a:hover { text-decoration:underline; }
  sup { vertical-align:text-top; }
  sub{ vertical-align:text-bottom; }
  legend { color:#000; }
  fieldset, img { border:0; }
  button, input, select, textarea { font-size:100%; }
  table { border-collapse:collapse; border-spacing:0; }

absolute的containing block(容器塊)計算方式跟正常流有什麼不一樣？

不管屬於哪一種，都要先找到其祖先元素中最近的 position 值不爲 static 的元素，而後再判斷：
  一、若此元素爲 inline 元素，則 containing block 爲可以包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
  二、不然,則由這個祖先元素的 padding box 構成。
  若是都找不到，則爲 initial containing block。

  補充：
  1. static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
  2. absolute: 向上找最近的定位爲absolute/relative的元素
  3. fixed: 它的containing block一概爲根元素(html/body)，根元素也是initial containing block

CSS裏的visibility屬性有個collapse屬性值是幹嗎用的？在不一樣瀏覽器下之後什麼區別？

對於普通元素visibility:collapse;會將元素徹底隱藏,不佔據頁面佈局空間,與display:none;表現相同.
若是目標元素爲table,visibility:collapse;將table隱藏,可是會佔據頁面佈局空間.
僅在Firefox下起做用,IE會顯示元素,Chrome會將元素隱藏,可是佔據空間.
position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

若是元素的display爲none,那麼元素不被渲染,position,float不起做用,若是元素擁有position:absolute;或者position:fixed;屬性那麼元素將爲絕對定位,float不起做用.若是元素float屬性不是none,元素會脫離文檔流,根據float屬性值來顯示.有浮動,絕對定位,inline-block屬性的元素,margin不會和垂直方向上的其餘元素margin摺疊.

對BFC規範(塊級格式化上下文：block formatting context)的理解？

（W3C CSS 2.1 規範中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其餘元素的關係和相互做用。）
   一個頁面是由不少個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。
   不一樣類型的 Box,會參與不一樣的 Formatting Context（決定如何渲染文檔的容器）,所以Box內的元素會以不一樣的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。

css定義的權重

如下是權重的規則：標籤的權重爲1，class的權重爲10，id的權重爲100，如下例子是演示各類定義的權重值：

  /*權重爲1*/
  div{
  }
  /*權重爲10*/
  .class1{
  }
  /*權重爲100*/
  #id1{
  }
  /*權重爲100+1=101*/
  #id1 div{
  }
  /*權重爲10+1=11*/
  .class1 div{
  }
  /*權重爲10+10+1=21*/
  .class1 .class2 div{
  }

  若是權重相同，則最後定義的樣式會起做用，可是應該避免這種狀況出現

請解釋一下爲何須要清除浮動？清除浮動的方式

清除浮動是爲了清除使用浮動元素產生的影響。浮動的元素，高度會塌陷，而高度的塌陷使咱們頁面後面的佈局不能正常顯示。

一、父級div定義height；
  二、父級div 也一塊兒浮動；
  三、常規的使用一個class；
      .clearfix:before, .clearfix:after {
          content: " ";
          display: table;
      }
      .clearfix:after {
          clear: both;
      }
      .clearfix {
          *zoom: 1;
      }

  四、SASS編譯的時候，浮動元素的父級div定義僞類:after
      &:after,&:before{
          content: " ";
          visibility: hidden;
          display: block;
          height: 0;
          clear: both;
      }

  解析原理：
  1) display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間;
  2) height:0 避免生成內容破壞原有佈局的高度。
  3) visibility:hidden 使生成的內容不可見，並容許可能被生成內容蓋住的內容能夠進行點擊和交互;
  4）經過 content:"."生成內容做爲最後一個元素，至於content裏面是點仍是其餘都是能夠的，例如oocss裏面就有經典的 content:".",有些版本可能content 裏面內容爲空,一絲冰涼是不推薦這樣作的,firefox直到7.0 content:」" 仍然會產生額外的空隙；
  5）zoom：1 觸發IE hasLayout。

  經過分析發現，除了clear：both用來閉合浮動的，其餘代碼無非都是爲了隱藏掉content生成的內容，這也就是其餘版本的閉合浮動爲何會有font-size：0，line-height：0。

什麼是外邊距合併？

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。
  合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
  w3school介紹網址： http://www.w3school.com.cn/css/css_margin_collapsing.asp

zoom:1的清除浮動原理?

清除浮動，觸發hasLayout；
  Zoom屬性是IE瀏覽器的專有屬性，它能夠設置或檢索對象的縮放比例。解決ie下比較奇葩的bug。
  譬如外邊距（margin）的重疊，浮動清除，觸發ie的haslayout屬性等。

  前因後果大概以下：
  當設置了zoom的值以後，所設置的元素就會就會擴大或者縮小，高度寬度就會從新計算了，這裏一旦改變zoom值時其實也會發生從新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨着自動擴大的問題。

  Zoom屬是IE瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個屬性。然而，zoom如今已經被逐步標準化，出如今 CSS 3.0 規範草案中。

  目前非ie因爲不支持這個屬性，它們又是經過什麼屬性來實現元素的縮放呢？
  能夠經過css3裏面的動畫屬性scale進行縮放。

移動端的佈局用過媒體查詢嗎？

假設你如今正用一臺顯示設備來閱讀這篇文章，同時你也想把它投影到屏幕上，或者打印出來，
而顯示設備、屏幕投影和打印等這些媒介都有本身的特色，CSS就是爲文檔提供在不一樣媒介上展現的適配方法

當媒體查詢爲真時，相關的樣式表或樣式規則會按照正常的級聯規被應用。
當媒體查詢返回假，標籤上帶有媒體查詢的樣式表仍將被下載（只不過不會被應用）。

包含了一個媒體類型和至少一個使用寬度、高度和顏色等媒體屬性來限制樣式表範圍的表達式。
CSS3加入的媒體查詢使得無需修改內容即可以使樣式應用於某些特定的設備範圍。

使用 CSS 預處理器嗎？喜歡那個？

SASS (SASS、LESS沒有本質區別，只由於團隊前端都是用的SASS)

CSS優化、提升性能的方法有哪些？

關鍵選擇器（key selector）。選擇器的最後面的部分爲關鍵選擇器（即用來匹配目標元素的部分）；
  若是規則擁有 ID 選擇器做爲其關鍵選擇器，則不要爲規則增長標籤。過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹配它們了）；
  提取項目的通用公有樣式，加強可複用性，按模塊編寫組件；加強項目的協同開發性、可維護性和可擴展性;
  使用預處理工具或構建工具（gulp對css進行語法檢查、自動補前綴、打包壓縮、自動優雅降級）；

瀏覽器是怎樣解析CSS選擇器的？

樣式系統從關鍵選擇器開始匹配，而後左移查找規則選擇器的祖先元素。
  只要選擇器的子樹一直在工做，樣式系統就會持續左移，直到和規則匹配，或者是由於不匹配而放棄該規則。

在網頁中的應該使用奇數仍是偶數的字體？爲何呢？

margin和padding分別適合什麼場景使用？

margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。
  margin用於佈局分開元素使元素與元素互不相干；
  padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段

抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
元素豎向的百分比設定是相對於容器的高度嗎？
全屏滾動的原理是什麼？用到了CSS的那些屬性？
什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
視差滾動效果，如何給每頁作不一樣的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼作？）

::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個僞元素的做用。

單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素。（僞元素由雙冒號和僞元素名稱組成）
  雙冒號是在當前規範中引入的，用於區分僞類和僞元素。不過瀏覽器須要同時支持舊的已經存在的僞元素寫法，
  好比:first-line、:first-letter、:before、:after等，
  而新的在CSS3中引入的僞元素則不容許再支持舊的單冒號的寫法。

  想讓插入的內容出如今其它內容前，使用::before，否者，使用::after；
  在代碼順序上，::after生成的內容也比::before生成的內容靠後。
  若是按堆棧視角，::after生成的內容會在::before生成的內容之上

如何修改chrome記住密碼後自動填充表單的黃色背景？

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189); /* #FAFFBD; */
    background-image: none;
    color: rgb(0, 0, 0);
  }

你對line-height是如何理解的？
設置元素浮動後，該元素的display值是多少？
```
自動變成了 display:block
```

怎麼讓Chrome支持小於12px 的文字？

一、用圖片：若是是內容固定不變狀況下，使用將小於12px文字內容切出作圖片，這樣不影響兼容也不影響美觀。
  二、使用12px及12px以上字體大小：爲了兼容各大主流瀏覽器，建議設計美工圖時候設置大於或等於12px的字體大小，若是是接單的這個時候就須要給客戶講解小於12px瀏覽器不兼容等事宜。
  三、繼續使用小於12px字體大小樣式設置：若是不考慮chrome能夠不用考慮兼容，同時在設置小於12px對象設置-webkit-text-size-adjust:none，作到最大兼容考慮。
  四、使用12px以上字體：爲了兼容、爲了代碼更簡單 重新考慮權重下兼容性。

讓頁面裏的字體變清晰，變細用CSS怎麼作？
```
-webkit-font-smoothing: antialiased;
```
font-style屬性可讓它賦值爲「oblique」 oblique是什麼意思？
```
傾斜的字體樣式
```

position:fixed;在android下無效怎麼處理？

fixed的元素是相對整個頁面固定位置的，你在屏幕上滑動只是在移動這個所謂的viewport，
  原來的網頁還好好的在那，fixed的內容也沒有變過位置，
  因此說並非iOS不支持fixed，只是fixed的元素不是相對手機屏幕固定的。
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）

多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms

display:inline-block 何時會顯示間隙？(攜程)

移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing

overflow: scroll時不能平滑滾動的問題怎麼處理？
有一個高度自適應的div，裏面有兩個div，一個高度100px，但願另外一個填滿剩下的高度。
png、jpg、gif 這些圖片格式解釋一下，分別何時用。有沒有了解過webp？

什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼作）

若是靜態文件都放在主域名下，那靜態文件請求的時候都帶有的cookie的數據提交給server的，很是浪費流量，
  因此不如隔離開。

  由於cookie有域的限制，所以不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據，
  這樣能夠下降請求頭的大小，下降請求時間，從而達到下降總體請求延時的目的。

  同時這種方式不會將cookie傳入Web Server，也減小了Web Server對cookie的處理分析環節，
  提升了webserver的http請求的解析速度。

style標籤寫在body後與body前有什麼區別？

什麼是CSS 預處理器 / 後處理器？

- 預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，加強了css代碼的複用性，
    還有層級、mixin、變量、循環、函數等，具備很方便的UI組件模塊化開發能力，極大的提升工做效率。

  - 後處理器例如：PostCSS，一般被視爲在完成的樣式表中根據CSS規範處理CSS，讓其更有效；目前最常作的
    是給CSS屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。