1.CSS 選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？ CSS3新增偽類有那些？

選擇器：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 ;

優先順序為:
!important > id > class > tag
important 比 內聯優先順序高

優先順序就近原則，同權重情況下樣式定義最近者為準;

載入樣式以最後載入的定位為準;

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> 元素。

:enabled :disabled 控制表單控制元件的禁用狀態。  

:checked 單選框或複選框被選中。

2.如何居中div？

// 給div設定一個寬度，然後新增margin:0 auto屬性

div{

  width:200px;

  margin:0 auto;

}

3.前端頁面由哪三層構成，分別是什麼？作用是什麼？

結構層 Html 表示層 CSS 行為層 js

4.清除浮動的幾種方式，各自的優缺點

1.使用空標籤清除浮動

clear:both（缺點，增加無意義的標籤,讓人感覺很不爽）
2.使用overflow:auto（使用zoom:1用於相容IE，缺點：內部寬高超過父級div時，會出現滾動條）
3.是用afert偽元素清除浮動(IE8以上和非IE瀏覽器才支援，目前：大型網站都有使用，如：騰迅，網易，新浪等等)

5.如何居中一個浮動元素？

1.確定容器的寬高 寬500 高 300 的層
2.設定層的外邊距

 .div {

  Width:500px ;

 height:300px;//高度可以不設

  Margin: -150px 0 0 -250px;

  position:relative;相對定位

  background-color:pink;//方便看效果

  left:50%;

  top:50%;

}

6.列出display的值，說明他們的作用。

block 象塊型別元素一樣顯示。

none 預設值。象行內元素型別一樣顯示。

inline-block 象行內元素一樣顯示，但其內容象塊型別元素一樣顯示。

list-item 象塊型別元素一樣顯示，並新增樣式列表標記。

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

*absolute：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。

*fixed：生成絕對定位的元素，相對於瀏覽器視窗進行定位。

*relative：生成相對定位的元素，相對於其正常位置進行定位。

static 預設值。沒有定位，元素出現在正常的流中

（忽略 top, bottom, left, right z-index 宣告）。

inherit 規定從父元素繼承 position 屬性的值。

8.CSS3有哪些新特性？

CSS3實現圓角（border-radius:8px），陰影（box-shadow:10px），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增加了更多的CSS選擇器 多背景 rgba

9.absolute的containing block計算方式跟正常流有什麼不同？

position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

他們之間優先順序的關係

綜上所述，1、可以把它看作是一個類似優先順序的機制， "position:absolute" 和 "position:fixed" 優先順序最高，有它存在的時候，浮動不起作用，'display' 的值也需要調整； 2、元素的 'float' 特性的值不是 "none" 的時候或者它是根元素的時候，調整 'display' 的值； 3、非根元素，並且非浮動元素，並且非絕對定位的元素，'display' 特性值同設定值。

這從另一個側面說明了一個問題：浮動或絕對定位的元素，只能是塊元素或表格。

10.使用 CSS 前處理器嗎？喜歡那個？

SASS、LESS

11.display:inline-block 什麼時候會顯示間隙？(攜程)

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

12.display:none和visibility:hidden的區別？

display:none  隱藏對應的元素，在文件佈局中不再給它分配空間，它各邊的元素會合攏，

就當他從來不存在。

visibility:hidden  隱藏對應的元素，但是在文件佈局中仍保留原來的空間。

13.CSS中link 和@import的區別是？

A：(1) link屬於HTML標籤，而@import是CSS提供的; (2) 頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;(3) import只在IE5以上才能識別，而link是HTML標籤，無相容問題; (4) link方式的樣式的權重 高於@import的權重.

14.position的absolute與fixed共同點與不同點

A：共同點：

1.改變行內元素的呈現方式，display被置為block；2.讓元素脫離普通流，不佔據空間；3.預設會覆蓋到非定位元素上

B不同點：

absolute的”根元素“是可以設定的，而fixed的”根元素“固定為瀏覽器視窗。當你滾動網頁，fixed元素與瀏覽器視窗之間的距離是不變的。

15.介紹一下CSS的盒子模型？

1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;

2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

CSS盒子模型

16.列出display的值，說明他們的作用。position的值， relative和absolute分別是相對於誰進行定位的？

1.block 象塊型別元素一樣顯示。

  inline 預設值。象行內元素型別一樣顯示。

  inline-block 象行內元素一樣顯示，但其內容象塊型別元素一樣顯示。

  list-item 象塊型別元素一樣顯示，並新增樣式列表標記。

  2.*absolute生成絕對定位的元素，相對於 static 定位以外的第一個祖先元素進行定位。

  *fixed （老IE不支援）生成絕對定位的元素，相對於瀏覽器視窗進行定位。

  *relative生成相對定位的元素，相對於其在普通流中的位置進行定位。

  * static  預設值。沒有定位，元素出現在正常的流中

  *（忽略 top, bottom, left, right z-index 宣告）。

  * inherit 規定從父元素繼承 position 屬性的值。

17.CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），

對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

增加了更多的CSS選擇器  多背景 rgba

在CSS3中唯一引入的偽元素是::selection.

媒體查詢，多欄佈局

border-image

18.對BFC規範的理解？

      BFC，塊級格式化上下文，一個建立了新的BFC的盒子是獨立佈局的，盒子裡面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和佈局方向有關係）的margin會發生摺疊。

    （W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行佈局，以及與其他元素的關係和相互作用。）

19.解釋下 CSS sprites，以及你要如何在頁面或網站中使用它。

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請求的開銷，因為請求耗時比較長；請求雖然可以併發，但是也有限制，一般瀏覽器都是6個。對於未來而言，就不需要這樣做了，因為有了`http2`。

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

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

21.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 ;

22.如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
給div設定一個寬度，然後新增margin:0 auto屬性

div{

    width:200px;

    margin:0 auto;

 }

居中一個浮動元素

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

 .div {

      width:500px ; height:300px;//高度可以不設

      margin: -150px 0 0 -250px;

      position:relative;         //相對定位

      background-color:pink;     //方便看效果

      left:50%;

      top:50%;

 }

讓絕對定位的div居中

 position: absolute;

  width: 1200px;

  background: none;

  margin: 0 auto;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

23.display有哪些值？說明他們的作用。
block 象塊型別元素一樣顯示。 
none 預設值。象行內元素型別一樣顯示。 
inline-block 象行內元素一樣顯示，但其內容象塊型別元素一樣顯示。 
list-item 象塊型別元素一樣顯示，並新增樣式列表標記。 
table 此元素會作為塊級表格來顯示 
inherit 規定應該從父元素繼承 display 屬性的值

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

absolute 
生成絕對定位的元素，相對於值不為 static的第一個父元素進行定位。 
fixed （老IE不支援） 
生成絕對定位的元素，相對於瀏覽器視窗進行定位。 
relative 
生成相對定位的元素，相對於其正常位置進行定位。 
static 
預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 宣告）。 
inherit 
規定從父元素繼承 position 屬性的值。

25.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:

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

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

把上、左、右三條邊隱藏掉（顏色設為 transparent）

#demo {

  width: 0;

  height: 0;

  border-width: 20px;

  border-style: solid;

  border-color: transparent transparent red transparent;

}

27.一個滿屏品字佈局如何設計? 
簡單的方式： 
上面的div寬100%， 
下面的兩個div分別寬50%， 
然後用float或者inline使其不換行即可

28.經常遇到的瀏覽器的相容性有哪些？原因，解決方法是什麼，常用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和IE7、IE6分離開來，這樣IE8已經獨立識別。

css

      .bb{

          background-color:#f1ee18;/*所有識別*/

          .background-color:#00deff\9; /*IE6、7、8識別*/

          +background-color:#a200ff;/*IE6、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 {} 
27.li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？

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

28.為什麼要初始化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; }

29.absolute的containing block(容器塊)計算方式跟正常流有什麼不同？
無論屬於哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然後再判斷： 
1、若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形； 
2、否則,則由這個祖先元素的 padding box 構成。 
如果都找不到，則為 initial containing block。

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

30.CSS裡的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？
31.position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

32.對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{

}

如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現 
請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式 
移動端的佈局用過媒體查詢嗎？ 
33.使用 CSS 前處理器嗎？喜歡那個？
SASS (SASS、LESS沒有本質區別，只因為團隊前端都是用的SASS)

34.如何修改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);

}

35.設定元素浮動後，該元素的display值是多少？（自動變成display:block）

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

用圖片：如果是內容固定不變情況下，使用將小於12px文字內容切出做圖片，這樣不影響相容也不影響美觀

使用12px及12px以上字型大小：為了相容各大主流瀏覽器，建議設計美工圖時候設定大於或等於12px的字型大小，如果是接單的這個時候就需要給客戶講解小於12px瀏覽器不相容等事宜

繼續使用小於12px字型大小樣式設定：如果不考慮chrome可以不用考慮相容，同時在設定小於12px物件設定-webkit-text-size-adjust:none，做到最大相容考慮

使用12px以上字型：為了相容、為了程式碼更簡單 從新考慮權重下相容性。

36.font-style屬性可以讓它賦值為“oblique” oblique是什麼意思？(傾斜的字型樣式)

37.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"/>

38.png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？

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

如果靜態檔案都放在主域名下，那靜態檔案請求的時候都帶有的cookie的資料提交給server的，非常浪費流量，所以不如隔離開。

因為cookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie資料，這樣可以降低請求頭的大小，降低請求時間，從而達到降低整體請求延時的目的

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

39.Style標籤寫在body後與body前有什麼區別？

40.什麼是CSS 前處理器 / 後處理器？

前處理器例如：LESS、Sass、Stylus，用來預編譯