WEB前端面試題彙總（CSS）

時間 2019-12-05

標籤 web 端面試題彙總 css 欄目 HTML 简体版

原文原文鏈接

position的值， relative和absolute分別是相對於誰進行定位的？

<1>、relative:相對定位，相對於本身自己在正常文檔流中的位置進行定位。
<2>、absolute:生成絕對定位，相對於最近一級定位不爲static的父元素進行定位。
<3>、fixed: 生成絕對定位，相對於瀏覽器窗口或者frame進行定位。
<4>、static:默認值，沒有定位，元素出如今正常的文檔流中。
<5>、sticky:生成粘性定位的元素，容器的位置根據正常文檔流計算得出。算法

position:absolute和float屬性的異同？

共同點：對內聯元素設置float和absolute屬性，可讓元素脫離文檔流，而且能夠設置其寬高。
不一樣點：float仍可佔據位置，不會覆蓋在另外一個BFC區域上，浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。absolute會覆蓋文檔流中的其餘元素。瀏覽器

box-sizing屬性有哪些？

box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box;
<1>、content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border+padding+content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高。
<2>、border-box：讓元素維持IE傳統盒模型（IE6如下版本和IE6~7的怪異模式）。設置width/height屬性指的是border+padding+content的寬度/高度。
<3>、padding-box：設置width/height屬性指的是padding+content的寬度/高度。dom

標準瀏覽器下，按照W3C規範對盒模型解析，一旦修改了元素的邊框或邊距，就會影響元素的盒子尺寸，就不得不從新計算元素的盒子尺寸，從而影響整個頁面的佈局。ide

CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

選擇符：
<1>、id選擇器（#myId）;
<2>、類選擇器（.myClassName）;
<3>、標籤選擇器（div,p,h1）;
<4>、相鄰選擇器（h1 + p）;
<5>、子選擇器（ul > li）;
<6>、後代選擇器（li a）;
<7>、通配符選擇器（*）;
<8>、屬性選擇器（button[disabled="true"]）;
<9>、僞類選擇器（a:hover,li:nth-child）;表示一種狀態
<10>、僞元素選擇器（li:before、:after,:first-letter,:first-line,:selecton）;表示文檔某個部分的表現佈局

優先級：
!important > 行內樣式（比重1000） > id（比重100） > class/屬性（比重10） > tag / 僞類（比重1）;flex

僞類和僞元素區別：
1>、僞類：a:hover,li:nth-child；
2>、僞元素：li:before、:after,:first-letter,:first-line,:selecton;spa

僞元素和僞類都是選擇器的補充，僞類表示的是一種狀態，僞元素表示文檔的某個肯定部分的表現。
僞元素選擇器選擇出來的部分再也不dom裏，也不能對其綁定事件，可是若是對僞元素前面的選擇器定義的元素綁定了事件，僞元素一樣會生效。code

新增僞類
1>、li:first-of-type:選擇屬於其父元素的首個<li>元素；
2>、li:last-of-type:選擇屬於其父元素的最後一個<li>元素；
3>、li:only-of-type:選擇屬於其父元素的惟一一個<li>元素；
4>、li:only-child:選擇屬於其父元素的惟一子元素；
6>、li:nth-child(2):選擇屬於其父元素的第二個<li>元素；
7>、:enabled :disabled:選擇表單控件的禁用狀態；
8>、:checked:單選或複選框被選中狀態；繼承

對BFC規範的理解？

BFC定義：塊級格式化上下文，一個建立了新的BFC的盒子是獨立佈局的，盒子裏面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個相鄰的塊級盒在垂直方向的margin會發生摺疊。事件

BFC佈局規則：
1>、內部的box會在垂直方向，一個接一個的放置。
2>、box的垂直方向的距離有margin決定。屬於同一個BFC的兩個相鄰box的margin會發生重疊。
3>、每一個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)，即便存在浮動也是如此，除非這個盒子建立一個新的塊級格式化上下文。
4>、BFC的區域不會與float box重疊。
5>、BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也是如此。
6>、計算BFC的高度時，浮動元素也參與計算。

哪些元素會產生BFC：
1>、根元素；
2>、float屬性不爲none；
3>、position爲absolute或fixed；
4>、display爲inline-block，table-cell，table-caption，flex，inline-flex；
5>、overflow除了visible之外的值（hidden、auto、scroll）;
6>、fieldset元素

運用BFC：
1>、解決margin重疊問題：根據BFC佈局原則2，在元素外側包裹一層容器，並觸發該容器生成一個BFC，那麼兩個元素就不在同一個BFC,就不會發生margin重疊。

<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

2>、自適應兩欄佈局：

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

根據BFC佈局規則第3條：即便存在浮動的元素aslide，但main的左邊依然會與包含塊的左邊相接觸。
解決：根據BFC佈局規則第4條，咱們能夠經過經過觸發main生成BFC，來實現自適應兩欄佈局。

.main {
    overflow: hidden;
}

當觸發main生成BFC後，這個新的BFC不會與浮動的aside重疊。所以會根據包含塊的寬度，和aside的寬度，自動變窄。效果以下：

3>、清除內部浮動：

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

根據BFC佈局規則第6條：計算BFC的高度時，浮動元素也參與計算，爲達到清除內部浮動，咱們能夠觸發par生成BFC，那麼par在計算高度時，par內部的浮動元素child也會參與計算。

.par {
    overflow: hidden;
}

解釋下浮動和它的工做原理？清除浮動的技巧：

原理：任何元素均可以被浮動，浮動元素脫離文檔流，浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。
浮動引發的問題：
1>、父元素的高度沒法被撐開，影響與父元素同級的元素；
2>、與浮動元素同級的非浮動元素（內聯元素）會跟隨其後；
3>、若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構；

清除浮動：
1>、使用空標籤清除浮動：
這種方法是在全部浮動標籤後面添加一個空標籤 <div style="clear:both;"></div>. 弊端就是增長了無心義標籤。
2>、使用after僞類：

#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

3>、浮動外部元素；
4>、設置父元素overflow爲hidden或者auto，觸發父元素BFC；

常見兼容性問題

1>、png24位的圖片在ie6瀏覽器上出現背景，解決方案是作成png8，也能夠引用一段腳本處理。
2>、瀏覽器默認的margin和padding不一樣。解決方案：加一個全局的*{margin：0；padding：0}。
3>、ie6雙邊距bug（20px距離）：塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin值比設置的大。解決方案：在float標籤樣式控制中加入_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)。
4>、漸進識別方式，從整體中逐步排除局部：
首先，巧妙的使用「9」這一標記，將IE瀏覽器從全部狀況中分離出來。
接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

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

待續....2015.5.29