前端面試問題css彙總

1，行內元素有哪些?塊級元素有哪些?空元素有哪些？CSS的盒模型?　　

　　塊級元素：div p h1 h2 h3 h4 form ul li

　　行內元素: a b br i span input select

　　行內塊級元素   img   input

　　空元素：即沒有內容的HTML元素，例如：br、meta、hr、link、input、img

　　css盒模型:content，padding，border ,margin（盒模型順序）

　　css盒模型分爲：標準盒模型和IE盒模型

　　標準盒模型：實際寬高就是自身的寬高

　　IE盒模型：實際寬高是自身寬高+padding+border

　　標準盒模型轉換爲IE盒模型：box-sizing：border-box；

　　display:inline  強制將塊級元素轉換爲行內元素

　　display：block   強制將行內元素轉換爲塊級元素    並非實際意義上的塊級元素，只是能夠設置寬高

　　用display:inline-block 強制將塊級元素轉爲行內元素。注意有3px間距。letter-spacing能夠消除這個間距   

2，描述css reset的做用和用途。

　　reset重置瀏覽器的css默認屬性 瀏覽器的品種不一樣，樣式不一樣，而後重置，讓他們統一。

3，如何減輕服務器對圖片請求的壓力

　　使用雪碧圖，減小服務器請求圖片的數量

4，CSS實現垂直水平居中

　　HTML結構：

<div class="wrapper"> <div class="content"></div> </div> 

　　CSS：

.wrapper { position: relative; width: 500px; height: 500px; background-color: #ddd; } .content{ background-color:#6699FF; width:200px; height:200px; position: absolute; //父元素須要相對定位 top: 50%; left: 50%; margin-top:-100px ; //二分之一的height，width margin-left: -100px; } 

5，簡述一下src與href的區別

　　href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。

　　src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。

六、什麼是css hack ？css hack解決的問題？

　　CSS hack是經過在CSS樣式中加入一些特殊的符號，讓不一樣的瀏覽器識別不一樣的符號（什麼樣的瀏覽器識別什麼樣的符號是有標準的，CSS hack就是讓你記住這個標準），以達到應用不一樣的CSS樣式的目的

　　CSS hack用來解決有些css屬性在不一樣瀏覽器中顯示的效果不同的問題（參考文檔：http://www.kwstu.com/Admin/ViewArticle/201409011604277330）

　　不一樣瀏覽器的內核：IE瀏覽器的內核Trident、 Mozilla的Gecko、google的WebKit、Opera內核Presto，Firefox：gecko內核；

七、px，em，rem的區別

　　px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。

　　em得值不是固定的，而且em會繼承父級元素的字體大小。

　　rem的大小依賴於根元素   html
　　瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em

8，有哪些方式能夠對一個DOM設置它的CSS樣式？　

　　外部樣式表，引入一個外部css文件

　　內部樣式表，將css代碼放在標籤內部

　　內聯樣式，將css樣式直接定義在 HTML 元素內部

九、CSS都有哪些選擇器？ 派生選擇器（用HTML標籤申明）

　　id選擇器（用DOM的ID申明）

　　類選擇器（用一個樣式類名申明）

　　屬性選擇器（用DOM的屬性申明，屬於CSS2，IE6不支持，不經常使用，不知道就算了）

　　除了前3種基本選擇器，還有一些擴展選擇器，包括

　　後代選擇器（利用空格間隔，好比div .a{  }）

　　羣組選擇器（利用逗號間隔，好比p,div,#a{  }）

　　選擇器越特殊，選擇指向越準確，優先級越高。

　　css 奇數、偶數選擇器。奇數：p:nth-child(odd)；偶數：p:nth-child(even)

10，rgba()和opacity的透明效果有什麼不一樣？

　　rgba()和opacity都能實現透明效果，但最大的不一樣是opacity做用於元素，以及元素內的全部內容的透明度，

　　而rgba()只做用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）

11，Sass、LESS是什麼？你們爲何要使用他們？

　　 他們是CSS預處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。

　　例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算， 函數. LESS 既能夠在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (藉助 Node.js)。

　　爲何要使用它們？

　　結構清晰，便於擴展。

　　能夠方便地屏蔽瀏覽器私有語法差別。這個不用多說，封裝對瀏覽器語法差別的重複處理，減小無心義的機械勞動。

　　能夠輕鬆實現多重繼承。

　　徹底兼容 CSS 代碼，能夠方便地應用到老項目中。LESS 只是在 CSS 語法上作了擴展，因此老的 CSS 代碼也能夠與 LESS 代碼一同編譯。

十二、什麼是外邊距重疊？重疊的結果是什麼？

　　答案：

　　外邊距重疊就是margin-collapse。

　　在CSS當中，相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊外邊距。

　　摺疊結果遵循下列計算規則：

　　1.       兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。

　　2.       兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。

　　3.       兩個外邊距一正一負時，摺疊結果是二者的相加的和。

13，css強制不換行，強制換行

　　強制不換行 
　　p { white-space:nowrap; }

　　自動換行 
　　p { word-wrap:break-word; }

　　強制英文單詞斷行 
　　p { word-break:break-all; } （設置強制將英文單詞斷行，須要將行內元素設置爲塊級元素。）

　　超出顯示省略號 
　　p{text-overflow:ellipsis;overflow:hidden;}

　　white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit; 
　　　　white-space 屬性設置如何處理元素內的空白 
　　　　normal 默認。空白會被瀏覽器忽略。 
　　　　pre 空白會被瀏覽器保留。其行爲方式相似 HTML 中的 pre 標籤。 
　　　　nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 br 標籤爲止。 
　　　　pre-wrap 保留空白符序列，可是正常地進行換行。 
　　　　pre-line 合併空白符序列，可是保留換行符。 
　　　　inherit 規定應該從父元素繼承 white-space 屬性的值。

　　word-wrap: normal|break-word; 
　　　　word-wrap 屬性用來標明是否容許瀏覽器在單詞內進行斷句，這是爲了防止當一個字符串太長而找不到它的天然斷句點時產生溢出現象。 
　　　　normal: 只在容許的斷字點換行(瀏覽器保持默認處理) 
　　　　break-word:在長單詞或URL地址內部進行換行 
　　　　word-break: normal|break-all|keep-all;

　　word-break 屬性用來標明怎麼樣進行單詞內的斷句。 
　　　　normal：使用瀏覽器默認的換行規則。 
　　　　break-all:容許再單詞內換行 
　　　　keep-all:只能在半角空格或連字符處換行

14，如何讓一個未知高度的div垂直居中？

　　1，display:table-cell：讓標籤元素以表格單元格的形式展現。父級：display:table;子元素：display:table-cell（不兼容ie6，ie7）

　　2，給要垂直居中的div再包一個div。而後讓第一層div：position：relative，第二層div：{position：absolute；top:50%}，第三層：{position:relative;top:-50%}

　　3，flex佈局

　　4，

display:box;
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
box-pack:center;
box-align:center;

15，css的上下文選擇器

　　1，後代選擇器

　　2，子元素選擇器

　　2，相鄰兄弟選擇器