web前端面試中10個關於css高頻面試題

1.什麼是BFC機制

BFC(Block Formatting Context)，區塊層級格式化上下文，是一個獨立的渲染區域，讓處於BFC 內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。

• 觸發條件(以下任一條)
  • float的值不為none
  • overflow的值不為visible
  • display的值為table-cell、tabble-caption和inline-block之一
  • position的值不為static或則releative中的任何一個

##在IE下, Layout,可透過

zoom:1 觸發

#BFC佈局與一般文件流程佈局區別: BFC佈局規則:
• 浮動的元素會被父級計算高度(父級元素觸發了BFC)
  1. 非浮動元素不會覆蓋浮動元素的位置(非浮動元素觸發了BFC )
  2. margin不會傳遞給父級(父級觸發BFC)
  3. 屬於同一個BFC的兩個相鄰元素上下margin會重疊
  4. 普通文檔流佈局: 浮動的元素是不會被父級計算高度
  5. 非浮動元素會覆蓋浮動元素的位置
  6. margin會傳遞給父級元素
  7. 兩個相鄰元素上下的margin會重疊
開發中的應用程式
• 阻止margin重疊
  • 可以包含浮動元素－ 清除內部浮動(清除浮動的原理是兩個p都位於同一個BFC 區域之中)
  • 自適應兩欄佈局
  • 可以阻止元素被浮動元素覆蓋

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

2. CSS3中新增的選擇器以及屬性

這裡只是列出來, 具體的使用,請查看我的關於css3新增選擇器與屬性文章

屬性選擇器

#

• 結構偽類別選擇器

#屬性選擇器	意義描述
#E[att^="val"]	屬性att的值以"val"開頭的元素
E[att$="val"]	#屬性att的值是以"val"結尾的元素
E[att*="val"]	屬性att的值包含"val"字串的元素

• css3新增屬性

#選擇器	#意義描述
E :root	匹配文檔的根元素，對於HTML文檔，就是HTML元素
##E:nth-child(n)	#符合其父元素的第n個子元素，第一個編號為1
#E:nth-last-child(n)	#符合其父元素的倒數第n個子元素，第一個編號為1
E:nth-of-type(n)	與:nth-child()作用類似，但是僅符合使用同種標籤的元素
#E:nth-last-of-type(n)	與:nth-last-child() 作用類似，但只符合使用同種標籤的元素
E:last-child	#符合父元素的最後一個子元素，等同於:nth-last-child(1)
E:first-of-type	符合父元素下使用同種標籤的第一個子元素，等同於:nth-of-type(1)
#E:last-of-type	#符合父元素下使用同種標籤的最後一個子元素，等同於:nth-last-of-type(1)
E:only-child	#匹配父元素下僅有的一個子元素，等同於:first-child:last- child或:nth-child(1):nth-last-child(1)
E:only-of -type	符合父元素下使用同種標籤的唯一一個子元素，等同於:first-of-type:last-of- type或:nth-of-type(1):nth-last-of-type(1)
E :empty	符合一個不包含任何子元素的元素，注意，文字節點也被視為子元素

##意義描述#相容## FF3 FF 3.5, Safari 4, Chrome 3IE6 , Safari4, Chrome3, Opera10border-radiusopacity##allFF3 , Opera 10, Safari 4, Chrome 3

#屬性
	transition	#設定過渡效果
	#transform	變換效果(移動、縮放、轉動、拉長或拉伸)
	animation	#動畫效果
	#box-shadow	陰影效果
FF3.5, Safari 4, Chrome 3	text-shadow	#文字陰影
FF 3.5, Opera 10, Safari 4, Chrome 3	border -colors	為邊框設定多種顏色
	#boder-image	圖片邊框
	text-overflow	#文字截斷
	word-wrap
#自動換行	#IE6 , FF 3.5, Safari 4, Chrome 3
##圓角落邊框	FF 3 , Safari 4 , Chrome 3
#不透明度
	#box-sizing	控制盒模型的組成模式
outline	#外邊框	FF3 , safari 4, chrome 3, opera 10
background-size	不指定背景圖片的尺寸 ################ ##safari 4, chrome 3, opera 10############################background-origin########### ###########指定背景圖片從哪裡開始顯示######################safari 4, chrome 3, FF 3 ### ########################background-clip######################指定背景圖片從什麼位置開始裁切#####################safari 4, chrome 3################# ##########rgba######################基於r,g,b三個顏色通道來設定顏色值, 透過a來設定透明度###	Safari 4、Chrome 3、FF3、Opera 10

#

3. 居中佈局

• 水平居中
  1. 行內元素: text-align:center
• 1. 區塊級元素: margin:0 auto
  2. 絕對定位與移動: absolute transform
  3. 絕對定位與負邊距: absolute margin
  4. flex佈局: flex justify-content:center
#垂直居中
• 子元素為單行文本:

line-height:height

absolute transform

flex align-items:center

# table:

display:table-cell; vertical-align: middle

使用position和top和負margin

水平垂直居中

• 1. 已知元素寬高:絕對定位margin:auto:<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> p{ width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; }</pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>2. 已知元素寬高:  絕對定位負margin
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> p{ width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; }</pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>

3. absolute transform

   p{
     width: 200px;
     height: 200px;
     background: green;

     position:absolute;
     left:50%;    /* 定位父级的50% */
     top:50%;
     transform: translate(-50%,-50%); /*自己的50% */
   }

4.flex justify-content align-items

#

.box{
   height:600px;  

   display:flex;
   justify-content:center;  //子元素水平居中
   align-items:center;      //子元素垂直居中
     /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
    }
  .box>p{
    background: green;
    width: 200px;
    height: 200px;
  }

• 4. 清除浮動有哪些方法, 各有什麼優缺點使用clear屬性的空元素在浮動元素後使用一個空元素如

，並在CSS中賦予

.clear{clear:both;}

屬性即可清理浮動。亦可使用

或

---

來進行清理。

• 優點: 簡單, 寫少量程式碼, 相容性也好缺點: 新增無語意html元素, 不利於程式碼語意化, 後期維護成本大

使用css的overflow屬性為浮動元素的容器添加

overflow:hidden;

或

overflow:auto;

可以清除浮動，另外在IE6 中還需要觸發hasLayout ，例如為父元素設定容器寬高或設定
• zoom:1
。在加入overflow屬性後，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。

優點: 簡單, 程式碼少, 瀏覽器支援好缺點: 不能和position配合使用, 因為超出的尺寸會被隱藏

overflow:hidden

#使用CSS的:after偽元素結合:after 偽元素（注意這不是偽類，而是偽元素，代表一個元素之後最近的元素）和IEhack ，可以完美兼容當前主流的各大瀏覽器，這裡的IEhack 指的是觸發hasLayout。在浮動元素的容器中加入一個

clearfix

的class，然後在這個class上加上一個:after偽元素實作元素末端加上一個看不見的區塊元素（Block element）來清理浮動。透過CSS偽元素在容器的內部元素最後添加了一個看不見的空格"020"或點"."，並且賦予clear屬性來清除浮動。要注意的是為了IE6和IE7瀏覽器，要給clearfix這個class增加一條zoom:1;觸發haslayout。

優點: 瀏覽器支援好，不容易怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等） 缺點: 程式碼多，要兩句程式碼結合使用，才能讓主流瀏覽器都支援

給父級元素設定高度

簡單, 程式碼少,好掌握缺點: 只適用於高度固定的佈局

5. 用純CSS創建一個三角形的原理是什麼#########之前寫三角形, 都是直接記住程式碼,沒有探究原因,我也是直到有一次面試時,面試大哥讓我說說css創建三角形的原理,我就......回來就趕緊翻資料.接下來我就將當時我理解的過程列舉出來:######1. 寫一個我們最熟悉的border應用程式###

.box{
	width:100px;
	height:100px;
	border: 3px solid;
	border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

###效果如下:#################### ####2. 接下來,我們將border值增大###

.box{
	width:100px;
	height:100px;
	border: 50px solid;
	border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

################

很容易发现, border渲染并不是正方形, 而是梯形的.

3. 在增大border的基础下, 此时我们将盒子宽高变成0,会产生什么效果呢!

.box{
	width:0px;
	height:0px;
	border: 50px solid;
	border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

四个三角形拼合成的矩形呈现在我们眼前,那如如果我们只想要一个三角形, 我们是不是可以设想将其他三个设为不可见;

4. 设置透明, 隐藏其中三个三角形

 .box{
	width:0px;
	height:0px;
	border: 50px solid;
	border-color:transparent transparent transparent #ef4848;
}

三角形这样就出来, 有木有很简单, 当然我们也可以采用逆向思维来写这个效果, 就是先将所有边框设为透明, 然后需要哪边再对其设置颜色, 效果是一样的

.box{
	width:0px;
	height:0px;
	border: 50px solid transparent;
	border-left:50px solid #ef4848;
}

这样给面试你的人讲,讲明白应该不是问题., 重点就是要理解border的应用

6. 实现三栏布局有哪些方法, 分别描述一下

三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，那么什么是三栏布局？ 即左右模块固定宽度，中间模块随浏览器变化自适应，想要完成的最终效果如下图所示：

下面列出四种实现方式, 在开发中可以根据实际需求选择适合自己的方法进行编码:

• Flex 布局

<style>
.container{
  display:flex;
  justify-content: center;
  height: 200px;
  background: #eee;
}
.left {
   width: 200px;
   background-color: red;
   height: 100%;
 }
.main {
    background-color: yellow;
    flex: 1;
}
.right {
    width: 200px;
    background-color: green;
}
</style>
<p class="container">
  <p class="left">1</p>
  <p class="main">2</p>
  <p class="right">3</p>
</p>

简单实用，现在比较流行的方案，但是需要考虑浏览器的兼容性。

• 绝对定位布局

<style>
.container {
  position: relative;
  background:#eee;
  height:200px;
	}
.main {
  height: 200px;
  margin: 0 120px;
  background-color: yellow;
	}
.left {
  position: absolute;
  width: 100px;
  height: 200px;
  left: 0;
  top: 0;
  background-color: red;
	}
.right {
  position: absolute;
  width: 100px;
  height: 200px;
  background-color: green;
  right: 0;
  top: 0;
}
</style>

<p class="container">
  <p class="left">1</p>
  <p class="main">2</p>
  <p class="right">3</p>
</p>

这种方案也简单实用, 并且可以将 <p class="main"></p>元素放到第一位,使得主要内容优先加载!

• 双飞翼布局

<style>
.content {
  float: left;
  width: 100%;
}
.main {
  height: 200px;
  margin-left: 110px;
  margin-right: 220px;
  background-color: yellow;
}
.left {
  float: left;
  height: 200px;
  width: 100px;
  margin-left: -100%;
  background-color: red;
}
.right {
  width: 200px;
  height: 200px;
  float: right;
  margin-left: -200px;
  background-color: green;
}	

</style>
<p class="content">
  <p class="main"></p>
</p>
<p class="left"></p>
<p class="right"></p>

• 圣杯布局

<style>
.container {
  margin-left: 120px;
  margin-right: 220px;
}
.main {
  float: left;
  width: 100%;
  height: 300px;
  background-color: yellow;
}
.left {
  float: left;
  width: 100px;
  height: 300px;
  margin-left: -100%;
  position: relative;
  left: -120px;
  background-color: blue;
}
.right {
  float: left;
  width: 200px;
  height: 300px;
  margin-left: -200px;
  position: relative;
  right: -220px;
  background-color: green;
}
</style>
<p class="container">
  <p class="main"></p>
  <p class="left"></p>
  <p class="right"></p>
</p>

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏p并排，以形成三栏布局。

7. css3实现0.5px的细线

<style>
.line {
    position: relative;
}
.line:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: #000000;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}
</style>

<p class="line"></p>

8. link 与 @import 的区别

1. 从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等

1. 加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

1. 兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

1. DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

css部分就整理到这里, 小伙伴们面试还有什么经常遇到的,可以在评论区给我留言, 我有时间就整理出来, IT(挨踢)都是一大家, 方便你我他

9. 开发中为什么要初始化css样式

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

10. CSS優化、提高效能的方法有哪些

• #盡量將樣式寫在單獨的css檔案裡面，在head元素中引用將程式碼寫成單獨的css檔案有幾點好處：
  1. 內容和樣式分離，易於管理和維護
  2. 減少頁面體積
  3. css檔案可以被快取、重複使用，維護成本降低
• 不使用@import
• 避免使用複雜的選擇器，層級越少越好建議選擇器的嵌套最好不要超過三層，例如：
• 精簡頁面的樣式文件，去掉不用的樣式
• 利用CSS繼承減少程式碼量
• 避免！ important，可以選擇其他選擇器

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

#

以上是web前端面試中10個關於css高頻面試題的詳細內容。更多資訊請關注PHP中文網其他相關文章！