前端面試大全（CSS篇——1/2）

- - - 面試系列
    - 内容介紹
    - 1、介紹一下标準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？
    - 2、CSS選擇符有哪些？哪些屬性可以繼承？
    - 3、CSS優先級算法如何計算？
    - 4、CSS3新增僞類有那些？
    - 5、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
    - 6、display有哪些值？說明他們的作用。
    - 7、position的值relative和absolute定位原點是？
    - 8、CSS3有哪些新特性？
    - 9、用純CSS建立一個三角形的原理是什麼？
    - 10、一個滿屏品字布局如何設計?
    - 11、li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
    - 12、為什麼要初始化CSS樣式。
    - 13、absolute的containing block(容器塊)計算方式跟正常流有什麼不同？
    - 14、對BFC規範(塊級格式化上下文：block formatting context)的了解？
    - 15、css定義的權重
    - 16、請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式
    - 17、浮動元素引起的問題和解決辦法？
    - 18、移動端的布局用過媒體查詢嗎？
    - 19、使用CSS 預處理器嗎？喜歡那個？
    - 20、CSS優化、提高性能的方法有哪些？

面試系列

後續更新分類将同步更新系列目錄：

前端面試大全（序篇）：https://blog.csdn.net/cainiaoyihao_/article/details/116518423
前端面試大全（HTML篇）：https://blog.csdn.net/cainiaoyihao_/article/details/116519021
前端面試大全（CSS篇——1/2）：https://blog.csdn.net/cainiaoyihao_/article/details/116521551
前端面試大全（CSS篇——2/2）：https://blog.csdn.net/cainiaoyihao_/article/details/117020429
前端面試大全（Ajax篇）：https://blog.csdn.net/cainiaoyihao_/article/details/116979060
前端面試大全（jQuery篇——含移動端常見問題）:https://blog.csdn.net/cainiaoyihao_/article/details/117281709
前端面試大全（JavaScript篇——面試利器值得擁有！）：https://blog.csdn.net/cainiaoyihao_/article/details/117355120

内容介紹

前端面試大全（CSS篇——1/2）。

1、介紹一下标準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？

有兩種，IE 盒子模型、W3C 盒子模型；
盒模型：内容(content)、填充(padding)、邊界(margin)、邊框(border)；

（3）差別：IE的content部分把border 和padding計算了進去；
color=#f40 size=3>項目情況

2、CSS選擇符有哪些？哪些屬性可以繼承？

id選擇器（# myid）
類選擇器（.myclassname）
标簽選擇器（div, h1, p）
相鄰選擇器（h1 + p）
子選擇器（ul > li）
後代選擇器（li a）
通配符選擇器（* ）
屬性選擇器（a[rel = “external”]）
僞類選擇器（a:hover, li:nth-child）

可繼承的樣式： font-size font-family color, UL LI DL DD DT
不可繼承的樣式： border padding margin width height

3、CSS優先級算法如何計算？

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

優先級為:

!important > id > class > tag

important 比内聯優先級高

4、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

單選框或複選框被選中

5、如何居中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;

6、display有哪些值？說明他們的作用。

block

象塊類型元素一樣顯示。

none

預設值。象行内元素類型一樣顯示。

inline-block

象行内元素一樣顯示，但其内容象塊類型元素一樣顯示。

list-item

象塊類型元素一樣顯示，并添加樣式清單标記。

table

此元素會作為塊級表格來顯示

inherit

規定應該從父元素繼承display 屬性的值

flex布局、grid布局等 ……

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

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

8、CSS3有哪些新特性？

新增各種CSS選擇器 （: not(.input)：所有class 不是“input”的節點）
圓角 （border-radius:8px）
多列布局 （multi-column layout）
陰影和反射 （Shadow\Reflect）
文字特效 （text-shadow）
文字渲染 （Text-decoration）
線性漸變 （gradient）
旋轉 （transform）
增加了旋轉,縮放,定位,傾斜,動畫，多背景

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

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

#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}

10、一個滿屏品字布局如何設計?

簡單的方式：

上面的div寬100%，
下面的兩個div分别寬50%，
然後用float或者inline使其不換行即可

11、li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？

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

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

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

無論屬于哪種，都要先找到其祖先元素中最近的position 值不為static 的元素，然後再判斷：

若此元素為inline 元素，則containing block 為能夠包含這個元素生成的第一個和最後一個inline box 的padding box (除margin, border 外的區域) 的最小矩形；
否則,則由這個祖先元素的padding box 構成。

如果都找不到，則為initial containing block。

補充：

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

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

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

建立規則：

根元素
浮動元素（float不是none）
絕對定位元素（position取值為absolute或fixed）
display取值為inline-block,table-cell, table-caption,flex, inline-flex之一的元素
overflow不是visible的元素

作用：

可以包含浮動元素
不被浮動元素覆寫
阻止父子元素的margin折疊

15、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{}

如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現

16、請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式

浮動元素脫離文檔流，不占據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

使用空标簽清除浮動。

這種方法是在所有浮動标簽後面添加一個空标簽定義css clear:both. 弊端就是增加了無意義标簽。
使用overflow。

給包含浮動元素的父标簽添加css屬性overflow:auto; zoom:1; zoom:1用于相容IE6。
使用after僞對象清除浮動。

該方法隻适用于非IE浏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的僞對象中設定height:0，否則該元素會比實際高出若幹像素；

17、浮動元素引起的問題和解決辦法？

浮動元素引起的問題：

父元素的高度無法被撐開，影響與父元素同級的元素
與浮動元素同級的非浮動元素（内聯元素）會跟随其後
若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構

解決方法：

使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題，對于問題1，添加如下樣式，給父元素添加clearfix樣式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */

清除浮動的幾種方法：

額外标簽法

<div style="clear:both;"></div>
<!-- （缺點：不過這個辦法會增加額外的标簽使HTML結構看起來不夠簡潔。） -->

使用after僞類

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

浮動外部元素
設定overflow為hidden或者auto

18、移動端的布局用過媒體查詢嗎？

css的媒體查詢允許通過@media标簽為特定媒體的浏覽器設定樣式，其中包含衆多篩選，功能強大。

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

SASS (SASS、LESS沒有本質差別，隻因為團隊前端都是用的SASS)

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

将樣式表放到頁面頂部
不使用CSS表達式
不使用@import
不使用IE的Filter

标簽：前端面試，CSS

更多示範案例，檢視案例示範

歡迎評論留言!