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新增选中器与属性文章

• 属性选中器

• 构造伪类选中器

• css3新增属性

3. 居中规划

• 水平居中
  1. 行内元素: text-align:center
  2. 块级元素: margin:0 auto
  3. 绝对定位和移动: absolute + transform
  4. 绝对定位和负边距: absolute + margin
  5. flex规划: flex + justify-content:center
• 垂直居中
  1. 子元素为单行文本: line-height:height
  2. absolute + transform
  3. flex + align-items:center
  4. table: display:table-cell; vertical-align: middle
  5. 利用position和top和负margin
• 水平垂直居中

1. 已知元素宽高:绝对定位+margin:auto:

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

      position:absolute;
      left:0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
  }

2. 已知元素宽高: 绝对定位+负margin

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

      position:absolute;
      left:0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
  }

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属性的空元素 在浮动元素后使用一个空元素如<p class="clear"></p>，并在CSS中给予.clear{clear:both;}属性即可清算浮动。亦可使用<br class="clear" />或<hr class="clear" />来停止清算。

长处: 简便, 写少量代码, 兼容性也好 缺陷: 增加无语义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高频面试题的具体内容，更多请关注百分百源码网其它相关文章！