20題CSS基礎面試題

本文主要為大家分享一篇CSS基礎面試題，具有很好的參考價值，希望對大家有幫助。一起跟著小編過來看看吧。

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

標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin
低版本IE盒子模型：寬度=內容寬度（content+border +padding）+ margin

專題推薦：2020年CSS面試題總結（最新）

用來控制元素的盒子模型的解析模式，預設為content-box
context-box：W3C的標準盒子模型，設定元素的height/width 屬性指的是content部分的高/寬
border-box：IE傳統盒子模型。設定元素的height/width屬性指的是border + padding + content部分的高/寬

3 CSS選擇器有哪些？哪些屬性可以繼承？

CSS選擇符：id選擇器(#myid)、類別選擇器(.myclassname)、標籤選擇器(p, h1, p)、相鄰選擇器(h1 + p)、子選擇器（ul > li）、後代選擇器（li a）、通配符選擇器（*）、屬性選擇器（a[rel=”external”]）、偽類選擇器（ a:hover, li:nth-child）

可繼承的屬性：font-size, font-family, color

不可繼承的樣式：border, padding, margin, width, height

優先權（就近原則）：!important > [ id > class > tag ]
#!important 比內聯優先級高

4 CSS優先權演算法如何計算？

元素選擇符： 1
class選擇符： 10
id選擇符：100
元素標籤：1000

1. #!important宣告的樣式優先權最高，如果衝突再進行計算。

2. 如果優先權相同，則選擇最後出現的樣式。

3. 繼承得到的樣式的優先權最低。

5 CSS3新增偽類別有那些?

p:first-of -type 選擇屬於其父元素的首個元素
p:last-of-type 選擇屬於其父元素的最後元素
p:only-of-type 選擇屬於其父元素唯一的元素
p:only-child 選擇屬於其父元素的唯一子元素
p:nth-child(2) 選擇屬於其父元素的第二個子元素
:enabled :disabled 表單控制項的停用狀態。
:checked 單選方塊或複選框被選取。

6 如何居中p？如何居中一個浮動元素？如何讓絕對定位的p居中？

p：

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

浮動元素的上下左右居中：

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;

絕對定位的左右居中：

#

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;

还有更加优雅的居中方式就是用flexbox，以后会做整理。

7 display有哪些值？说明他们的作用?

inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block

8 position的值？

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

9 CSS3有哪些新特性？

1. RGBA和透明度

2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

3. word-wrap（对长的不可分割单词换行）word-wrap：break-word

4. 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）

5. font-face属性：定义自己的字体

6. 圆角（边框半径）：border-radius 属性用于创建圆角

7. 边框图片：border-image: url(border.png) 30 30 round

8. 盒阴影：box-shadow: 10px 10px 5px #888888

9. 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

10 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

11 用纯CSS创建一个三角形的原理是什么？

首先，需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

12 一个满屏品字布局如何设计?

第一种真正的品字：

1. 三块高宽是确定的；

2. 上面那块用margin: 0 auto;居中；

3. 下面两块用float或者inline-block不换行；

4. 用margin调整位置使他们居中。

第二种全屏的品字布局:

上面的p设置成100%，下面的p分别宽50%，然后使用float或者inline使其不换行。

13 常见的兼容性问题？

1. 不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}

2. IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。

3. 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

4. {
   background-color:#f1ee18;/*所有识别*/
   .background-color:#00deff\9; /*IE6、7、8识别*/
   +background-color:#a200ff;/*IE6、7识别*/
   _background-color:#1e0bd1;/*IE6识别*/
   }

5. 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

6. IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。

7. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

8. 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

14 为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

15 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)

16 CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。

1. chrome中，使用collapse值和使用hidden没有区别。

2. firefox，opera和IE，使用collapse值和使用display：none沒有什麼差別。

17 display:none與visibility：hidden的差別？

display：none 不顯示對應的元素，在文件佈局中不再分配空間（回流+重繪）
visibility：hidden 隱藏對應元素，在文檔佈局中仍保留原來的空間（重繪）

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

display屬性規定元素應該產生的框的類型；position屬性規定元素的定位類型；float屬性是一種佈局方式，定義元素在哪個方向浮動。
類似於優先權機制：position：absolute/fixed優先權最高，有他們在時，float不起作用，display值需要調整。 float 或absolute定位的元素，只能是區塊元素或表格。

19 對BFC規格(區塊層級格式化上下文：block formatting context)的理解？

BFC規定了內部的Block Box如何佈局。
定位方案：

1. 內部的Box會在垂直方向上一個接著一個放置。

2. Box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰Box的margin會發生重疊。

3. 每個元素的margin box 的左邊，與包含區塊border box的左邊相接觸。

4. BFC的區域不會與float box重疊。

5. BFC是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。

6. 計算BFC的高度時，浮動元素也會參與計算。

滿足下列條件之一就可觸發BFC

1. #根元素，即html

2. float的值不為none（預設）

3. ##overflow的值不為visible（預設）

4. #display的值為inline-block、table-cell、table-caption

5. position的值為absolute或fixed

#20 為什麼會出現浮動和何時需要清除浮動？清除浮動的方式？

浮動元素碰到包含它的邊框或浮動元素的邊框停留。由於浮動元素不在文件流中，所以文件流的區塊框表現得就像浮動框不存在一樣。浮動元素會漂浮在文件流程的區塊框上。 浮動所帶來的問題：


1. 父元素的高度無法被撐開，影響與父元素同級的元素

2. #與浮動元素同級的非浮動元素（內聯元素）會跟隨其後

3. 若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構。

清除浮動的方式：

1. #父級p定義height

2. 最後一個浮動元素後加空p標籤並新增樣式clear:both。

3. 包含浮動元素的父標籤新增樣式overflow為hidden或auto。

4. 父級p定義zoom#

相關教學推薦：CSS影片教學

#

以上是20題CSS基礎面試題的詳細內容。更多資訊請關注PHP中文網其他相關文章！