前端面試中的css經常使用知識點總結

一、CSS選擇器的優先級

!important  > 內聯 > id選擇器 > 類選擇器 > 標籤選擇器

多個類選擇器疊加（256）以後的優先級大於一個id選擇器

!important 用於強調CSS屬性具備最高的優先級。IE6不支持這種用法。

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)

二、CSS優先級權重計算法

CSS優先級的計算規則以下：

元素標籤中定義的樣式（Style屬性）,加1,0,0,0

每一個ID選擇符(如 #id),加0,1,0,0

每一個Class選擇符、每一個屬性選擇符、每一個僞類（:hover）加0,0,1,0

每一個元素選擇符（如p）或僞元素選擇符(如 :firstchild)等，加0,0,0,1

而後，將這四個數字分別累加，就獲得每一個CSS定義的優先級的值

而後從左到右逐位比較大小，數字大的CSS樣式的優先級就高。

三、超連接訪問事後hover樣式就不出現的問題是什麼？如何解決？

被點擊訪問過的超連接樣式不在具備hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）

四、什麼是Css Hack？ie6,7,8的hack分別是什麼？

針對不一樣的瀏覽器寫不一樣的CSS code的過程，就是CSS hack。

#test {  

        width:300px;  

        height:300px;  

        background-color:blue;      /*firefox*/

        background-color:red\9;      /*all ie*/

        background-color:yellow\0;    /*ie8*/

        +background-color:pink;        /*ie7*/

        _background-color:orange; /*ie6*/    }  

        :root #test {  background-color:purple\9;  }  /*ie9*/

    @media all and (min-width:0px){

          #test {background-color:black\0;}

 }  /*opera*/

    @media screen and (-webkit-min-device-pixel-ratio:0){

#test {background-color:gray;}

} /*chrome and safari*/

五、描述一個"reset"的CSS文件並如何使用它。知道normalize.css嗎？你瞭解他們的不一樣之處？

不一樣的瀏覽器對一些元素有不一樣的默認樣式，若是你不處理，在不一樣的瀏覽器下會存在必要的風險，或者更有戲劇性的性發生。
你可能會用Normalize來代替你的重置樣式文件。它沒有重置全部的樣式風格，但僅提供了一套合理的默認樣式值。既能讓衆多瀏覽器達到一致和合理，但又不擾亂其餘的東西（如粗體的標題）。

六、display:none與visibility:hidden的區別是什麼？

display : 隱藏對應的元素但不擠佔該元素原來的空間。

visibility: 隱藏對應的元素而且擠佔該元素原來的空間。
便是，使用CSS display:none屬性後，HTML元素（對象）的寬度、高度等各類屬性值都將「丟失」;而使用visibility:hidden屬性後，HTML元素（對象）僅僅是在視覺上看不見（徹底透明），而它所佔據的空間位置仍然存在。

七、CSS盒子模型

Box Model規定了元素框處理元素內容（element content）、內邊距（padding）、邊框（border） 和 外邊距（margin） 的方式。盒子模型有 block,inline-block,inline,flex,table-cell等幾種顯示方式。
如圖所示，元素的高度和寬度指的是盒子模型的content區域的高度和寬度，不包括內邊距之外的部分。(IE的content則是包含border、內邊距和content)。盒子模型有兩種，W3C標準盒子模型（content-box）以及IE盒子模型（border-box）。

給你們推薦一個技術交流學習圈，裏面歸納移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。獲取資料
對web開發技術感興趣的同窗，能夠加入交流圈👉👉👉1007317281，無論你是小白仍是大牛都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時天天更新視頻資料。

八、相對定位relative、浮動float以及絕對定位absolute的區別？

1）相對定位是在常規流中的定位。一旦一個框按照常規流或者是浮動獲得定位，它還能夠相對該位置而偏移， 這就是相對定位。偏移後，在常規流中依然佔據原有位置，偏移量並不會對後續的block產生擠佔，後續的塊就好像沒有感知到偏移，依然按照常規流位置排位。

2）絕對定位（Absolute positioning）元素定位的參照物是其包含塊（第一個relative定位的祖先元素）進行定位，不必定是其父元素。絕對定位元素徹底脫離了常規流，每一個絕對定位的框均可以看作一個單獨的圖層，不會對其餘層框的定位產生影響。絕對元素定位的 top 和 left 值跟絕對元素未脫離常規流以前在常規流中位置有關。

3）浮動框就是一個框在當前行被向左或向右挪動(偏移)，它不在常規流中。在該浮動框以前或以後建立的非定位框垂直排列，就好象浮動框並不存在同樣。當前行裏浮動框前的任何內容，都將被從新排列到該浮動另外一側的第一個可用行裏。

九、清除浮動的用法？

在非IE瀏覽器（如Firefox）下，當容器的高度爲auto，且容器的內容中有浮動（float爲left或right）的元素，在這種狀況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）佈局的現象。這個現象叫浮動溢出，爲了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。
使用方法：

一、在浮動元素後使用一個空元素如<div class="clear"></div>，並在CSS中賦予.clear{clear:both;}屬性便可清理浮動。

二、給浮動元素的容器添加overflow:hidden;或overflow:auto;能夠清除浮動

三、什麼都不作，給浮動元素後面的元素添加clear屬性。

四、利用僞類清除浮動，給浮動元素的容器添加一個clearfix的class，然 後給這個class添加一個:after僞

元素實現元素末尾添加一個看不見的塊元素（Block element）清理浮動。

//一種常見利用僞類清除浮動的代碼

.clearfix:after {

    content:"."; //這裏利用到了content屬性

    display:block;

    height:0;

    visibility:hidden;

    clear:both;

}       //歡迎加入前端全棧開發交流圈一塊兒學習交流：1007317281

.clearfix {

    *zoom:1;

}

十、BOX模型的margin在IE比在其餘瀏覽器大2px的解決辦法

div{margin:30px!important;margin:28px;}

注意這兩個margin的順序必定不能寫反，據阿捷的說法!important這個 屬性IE不能識別，

但別的瀏覽器能夠識別。因此在IE下其實解釋成這樣：

div{maring:30px;margin:28px}

重複定義的話按照最後一個來執行，因此不能夠只寫

margin:XXpx!important;

也能夠這樣子hack

div {  _margin:28px;margin:28px\9;margin:30px;}

十一、IE 3像素Bug的產生緣由及解決辦法

當在同一行相鄰出現一個浮動的塊元素和一個非浮動的塊元素時，兩塊元素之間就會出現3px的裂痕。
解決辦法就是：對其中一個元素添加「_margin-*:-3px」的CSS屬性，或者將另一個非浮動的元素設爲浮動。

十二、IE6 雙邊距Bug的產生緣由及解決辦法

當咱們在浮動元素上面添加margin-*的屬性的時候，好比在float:left的元素CSS添加margin-left:50px，那麼最終在IE6下面的顯示就是該元素的margin-left最終變爲100px，邊距翻倍。
解決辦法：添加_display:inline

1三、FOUC - Flash Of Unstyled Content 文檔樣式閃爍

<style type="text/css"  media="all">@import  "../fouc.css";</style>

而引用CSS文件的@import就是形成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，而後再去導入外部的CSS文件，所以，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關係。
解決方法簡單的出奇，只要在<head>之間加入一個<link>或者<script>元素就能夠了。

1四、文本溢出省略的處理方法

1)單行文本溢出

.inline{

  overflow:hidden;

 white-space:nowrap;

 text-overflow:ellipsis;

}      //歡迎加入前端全棧開發交流圈一塊兒學習交流：1007317281

2)多行文本溢出

.foo{

  display:-webkit-box!important;

  overflow:hidden;

  text-overflow:ellipsis;

  work-break:break-all;

  -webkit-box-orient:vertical;  /*方向*/

  -webkit-line-clamp:4;  /*顯示多少行文本*/

}

1五、CSS實現垂直水平居中

方法1：

.parent {

          width:800px;

          height:500px;

          border:2px  solid  #000;

          position:relative;

}       //歡迎加入前端全棧開發交流圈一塊兒學習交流：1007317281

.child {

            width:200px;

            height:200px;

            margin:  auto;  

            position:  absolute;  

            top:  0;  left:  0;  bottom:  0;  right:  0;

            background-color:  red;

}

方法2：

.parent {

            width:800px;

            height:500px;

            border:2px  solid  #000;

            display:table-cell;

            vertical-align:middle;

            text-align:  center;

        }       //歡迎加入前端全棧開發交流圈一塊兒學習交流：1007317281

        .child {

            width:200px;

            height:200px;

            display:inline-block;

            background-color:  red;

        }

方法3：

.parent {

            width:800px;

            height:500px;

            border:2px  solid  #000;

            display:flex;

            justify-content:center;

            align-items:center;

        }

        .child {

            width:200px;

            height:200px;

            background-color:  red;

        }

方法4：

.parent {

            width:800px;

            height:500px;

            border:2px  solid  #000;

            position:relative;

        }       //歡迎加入前端全棧開發交流圈一塊兒學習交流：1007317281

        .child {

            width:300px;

            height:200px;

            margin:auto;

            position:absolute;

/*設定水平和垂直偏移父元素的50%，

再根據實際長度將子元素上左挪回一半大小*/

            left:50%;

            top:50%;

            margin-left:  -150px;

            margin-top:-100px;

            background-color:  red;

        }

1六、BFC

塊格式上下文是頁面CSS 視覺渲染的一部分，用於決定塊盒子的佈局及浮動相互影響範圍的一個區域。

BFC的建立方法：

根元素或其它包含它的元素；

浮動 (元素的float不爲none)；

絕對定位元素 (元素的position爲absolute或fixed)；

行內塊inline-blocks(元素的 display: inline-block)；

表格單元格(元素的display: table-cell，HTML表格單元格默認屬性)；

overflow的值不爲visible的元素；

彈性盒 flex boxes (元素的display: flex或inline-flex)；

1七、響應式圖片的CSS

所謂響應式圖片，就是根據圖片所在容器的大小來實時地按比例縮放。實現的辦法很是簡單，只須要設置img標籤的width:100%便可。

img {

width:100%;

}

若是 max-width 屬性設置爲 100%, 圖片永遠不會大於其原始大小：

img {

max-width: 100%;

}

1八、CSS響應式網格系統原理

總的來講，網格系統就是利用百分比把視口等分爲12個，而後利用float屬性使之並列顯示。

* {

    box-sizing:  border-box;

}

[class*="col-"] {

    float:  left;

    padding:  15px;

    border:  1px  solid  red;

}

.col-1 {width:  8.33%;}

.col-2 {width:  16.66%;}

.col-3 {width:  25%;}

.col-4 {width:  33.33%;}

.col-5 {width:  41.66%;}

.col-6 {width:  50%;}

.col-7 {width:  58.33%;}

.col-8 {width:  66.66%;}

.col-9 {width:  75%;}

.col-10 {width:  83.33%;}

.col-11 {width:  91.66%;}

.col-12 {width:  100%;}

1九、用LESS循環實現柵格類

.generate-columns(12);

.generate-columns(@n;  @i: 1) when (@i =< @n) {

  .column-@{i}  {

    width:  (@i * 100% / @n);

  }      //歡迎加入前端全棧開發交流圈一塊兒學習交流：1007317281

.generate-columns(@n, (@i + 1));

}

20、使用perspective屬性和transform：perspective()函數的區別

以上的兩種書寫格式都會生成一個3D立體效果，可是它們之間有一些區別。使用功能函數的方式能夠很方便的在單個元素上應用3D transform，可是當在多個元素上使用時，轉換的元素不會獲得預期的效果。若是你爲不一樣的元素使用相同的transform，每個元素都會有本身的消失點。爲了解決這個問題，能夠在父元素上使用perspective屬性，這樣，全部的子元素均可以共享同一個3D空間。

perspective-origin: 25% 75%，等價於perspective-origin x和perspective-origin y的合體，用來設置鏡頭聚焦點的位置(舞臺中心)

transform-style: preserve-3d,transform-style屬性也是3D效果中常用的，其兩個參數，

flat|preserve-3d. 前者flat爲默認值，表示平面的；後者preserve-3d表示3D透視。

backface-visibility：hidden|visibility設置背後元素是否可見

給你們推薦一個技術交流學習圈，裏面歸納移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。獲取資料
對web開發技術感興趣的同窗，能夠加入交流圈👉👉👉1007317281，無論你是小白仍是大牛都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時天天更新視頻資料。