首頁 > web前端 > css教學 > web前端面試中10個關於css高頻面試題

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

coldplay.xixi
發布: 2020-08-03 17:05:04
轉載
2838 人瀏覽過

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佈局規則:
    1. 浮動的元素會被父級計算高度(父級元素觸發了BFC)
    2. 非浮動元素不會覆蓋浮動元素的位置(非浮動元素觸發了BFC )
    3. margin不會傳遞給父級(父級觸發BFC)
    4. 屬於同一個BFC的兩個相鄰元素上下margin會重疊
    5. 普通文檔流佈局: 浮動的元素是不會被父級計算高度
    6. 非浮動元素會覆蓋浮動元素的位置
    7. margin會傳遞給父級元素
    8. 兩個相鄰元素上下的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:css;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:css;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>
登入後複製

  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中文網其他相關文章!

相關標籤:
來源:cloud.tencent.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板