前端面经-CSS部分（持续更新中）

下面是我在学习过程中整理的有关CSS部分面试资料，如果哪里有错误，希望您能指出，我也会虚心接受并改正错误。希望对您能有帮助！

1、简述一下CSS盒模型。

• CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距，边框，内边距和实际内容。
• margin外边距-清除边框外的区域，外边距是透明的
• border边框-围绕在内边距和内容外的边框
• padding内边距-清除内容周围的区域，内边距是透明的
• content内容-盒子的内容，显示文本和图像

2、IE盒模型和w3c盒模型的区别，如何使用IE盒模型？

• IE盒模型的content包括border和padding。w3c盒模型的content不包括border和padding。CSS3中运用box-sizing:border-box;表示按照IE盒模型来显示。

3、请描述一下渐进增强和优雅降级。

• 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
• 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

4、CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？

• 设置 display 属性为 none
• 设置 visibility 属性为 hidden
• 设置宽为 0
• 设置高为 0
• 设置opacity属性为 0
• 设置背景色为白色
• 设置透明度为0

5、什么是CSS Hack？

• 针对不同的浏览器写不同的 CSS code 的过程就是CSS hack。

6、什么是外边距重叠？重叠的结果是什么？

• 在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
• 折叠结果遵循下列计算规则如下
  • 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  • 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  • 两个外边距一正一负时，折叠结果是两者之和。

7、如何垂直居中一个div？

• 使用定位加margin-left和margin-top

/* 父盒子 */
.box {
  width: 350px;
  height: 350px;
  background-color: red;
  position: relative;
}

/* 子盒子 */
.box1 {
  width: 200px;
  height: 200px;
  background-color: pink;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -100px;
  margin-left: -100px;
}

• 使用定位加transform

/* 父盒子 */
.box {
  width: 350px;
  height: 350px;
  background-color: red;
  position: relative;
}

/* 子盒子 */
.box1 {
  width: 200px;
  height: 200px;
  background-color: pink;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

• 使用定位加left、top、right、bottom和margin:auto

/* 父盒子 */
.box{
  width: 350px;
  height: 350px;
  background-color: red;
  position: relative;
}

/* 子盒子 */
.box1{
  width: 200px;
  height: 200px;
  background-color: pink;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

• 使用flex布局

/* 父盒子 */
.box{
  width: 350px;
  height: 350px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 子盒子 */
.box1{
  width: 200px;
  height: 200px;
  background-color: pink;
}

• 使用flex加margin:auto

/* 父盒子 */
.box {
  width: 350px;
  height: 350px;
  background-color: red;
  display: flex;
}

/* 子盒子 */
.box1 {
  width: 200px;
  height: 200px;
  background-color: pink;
  margin: auto;
}

• 使用gird布局

/* 父盒子 */
.box {
  width: 350px;
  height: 350px;
  background-color: red;
  display: grid;
}

/* 子盒子 */
.box1 {
  width: 200px;
  height: 200px;
  background-color: pink;
  justify-self: center;
  align-self: center;
}

8、简述一下px、em和rem的区别。

• px是相对长度单位，相对于显示器屏幕分辨率而言的。
• em的值不是固定的，并且 em 会继承父级元素的字体大小。
• rem是CSS3新增的一个相对单位。使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

9、简述一下CSS 中 link 和@import 的区别。

• link属于HTML标签，@import是CSS提供的
• 页面被加载时，link引用的css文件会同时被加载，而@import引用的css文件要等到页面被加载完毕再加载
• import只在IE5以上才能识别，link是HTML标签，无兼容问题
• link 引入样式的权重大于@import 的引用

10、为什么要初始化样式？

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

11、简述一下display:none、visibility:hidden和opacity:0;的区别。

• display:none;隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢。
• visibility:hidden;隐藏对应的元素，但在文档布局中仍保留原来的空间。
• opacity:0;内容不可见，占据空间。

12、简述一下display常见的值并说明它们的作用

• block，块级元素显示
• inline，行内元素显示
• none，元素隐藏
• inline-block，行内块元素显示
• list-item，列表元素显示
• flex,弹性布局
• table，表格布局

13、简述一下position常见的值并说明。

• absolute，生成绝对定位元素，相对于static定位以外的第一个祖先元素进行定位
• fixed，生成固定定位元素，相对于浏览器窗口进行定位
• relative，生成相对定位元素，相对于其在普通流中的位置进行定位
• static，默认值。没有定位，元素出现在正常流中
• inherit，规定从父元素继承position属性的值。

14、哪些CSS属性可以继承？哪些不可以继承？

• 可继承： font-size font-family color;
• 不可继承 ：border padding margin width height ;

15、css 优先级。

• !important > id > class > 标签
• important比内联优先级高，内联比id要高
• 优先级就近原则，样式定义最近者为准
• 载入样式以最后载入的为准

16、CSS3新特性。

• 圆角border-radius
• 阴影box-shadow
• 对文字加特效text-shadow
• 线性渐变gradient
• 旋转transform
• 媒体查询、多栏布局
• border-image

17、解释下CSS sprite。

• CSS sprite其实就是把网页中多张图片整合到一张图片中，在利用CSS的“background-image”,“background-repeat”,"background-position"的组合进行背景定位，background-position可以用数字能精确定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但也是有限制，一般浏览器都是6个。

18、什么是FOUC？如何避免?

• Flash Of Unstyled Content文档样式闪烁
• 使用CSS提供的@import引用CSS文件时，浏览器会先加载整个HTML文档的DOM，然后再去导入外部CSS文件。因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长度和网速，电脑速度都有关系。
• 解决办法是使用link标签代替@import来加载CSS文件

19、三栏布局的实现方式。

• 三栏布局一般多指左右两栏宽度固定，中间栏宽度自适应的布局。实现方法如下
• 使用绝对定位布局

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>三栏布局-绝对定位</title>
		<style>
			.container {
				position: relative;
			}

			.container div {
				position: absolute;
				top: 0;
				height: 100px;
			}

			.left {
				width: 200px;
				left: 0;
				background-color: red;
			}

			.mid {
				background-color: green;
				left: 200px;
				right: 200px;
			}

			.right {
				right: 0;
				width: 200px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left">左</div>
			<div class="mid">中</div>
			<div class="right">右</div>
		</div>
	</body>
</html>

• 使用左右浮动布局

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>三栏布局-左右浮动布局</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

      .container{
        min-width: 600px;
      }

      .container div{
        min-height: 100px;
      }

			.left {
				width: 200px;
				background-color: red;
				float: left;
			}

			.right {
				width: 150px;
				background-color: blue;
				float: right;
			}

      .mid {
        background-color: green;
        min-width: 100px;
        margin: 0 150px 0 200px;
			}
		</style>
	</head>
	<body>
		<div class="container">
      <!-- 这里的mid要放在最后，浮动原因 -->
      <div class="left">左</div>
      <div class="right">右</div>
      <div class="mid">中</div>
		</div>
	</body>
</html>

• flex布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三栏布局-flex布局</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .container{
        min-width: 600px;
        display: flex;
        justify-content: space-between;
      }

      .container div{
        min-height: 100px;
      }

      .left {
        order: 1;
        width: 200px;
        background-color: red;
      }

      .mid {
        order: 2;
        flex: 1;
        background-color: green;
        min-width: 100px;
      }

      .right {
        order: 3;
        width: 150px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">左</div>
      <div class="mid">中</div>
      <div class="right">右</div>
    </div>
  </body>
</html>

• grid布局

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>三栏布局-grid布局</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.container {
				display: grid;
				width: 100%;
				grid-template-columns: 200px auto 150px;
			}

			.container div {
				min-height: 100px;
			}

			.left {
				grid-row: 1/2;
				grid-column: 1/2;
				background-color: red;
			}

			.mid {
				grid-row: 1/2;
				grid-column: 2/3;
				background-color: green;
			}

			.right {
				grid-row: 1/2;
				grid-column: 3/4;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left">左</div>
			<div class="mid">中</div>
			<div class="right">右</div>
		</div>
	</body>
</html>

• table-cell布局

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>三栏布局-table-cell布局</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.container div {
				display: table-cell;
				height: 100px;
				min-height: 100px;
			}

			.left {
				width: 200px;
				min-width: 200px;
				background: red;
			}

			.mid {
				width: 100%;
				background: green;
			}

			.right {
				width: 150px;
				min-width: 150px;
				background: blue;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left">左</div>
			<div class="mid">中</div>
			<div class="right">右</div>
		</div>
	</body>
</html>

20、CSS选择符有哪些？

• d选择器
• 类选择器
• 标签选择器
• 相邻选择器
• 子选择器
• 后代选择器
• 通配符选择器
• 属性选择器
• 伪类选择器

21、重绘和重排。

• 由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局，称为重绘。
• 重排也称作回流，它是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或整个页面布局）的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。
• 回流必定会发生重绘，重绘不一定会引发回流。

22、减少重绘和回流的方式。

• CSS
  • 使用transform替代top
  • 使用visibility替换display:none
  • 避免使用table布局
  • 尽可能在DOM树的最末端改变class
  • 避免设置多层内联样式
  • 将动画效果应用到position属性为absoulte或fixed的元素上
  • 避免使用css表达式
  • 将频繁重绘或者回流的节点设置为图层
  • css硬件加速
• JavaScript
  • 避免频繁操作样式
  • 避免频繁操作DOM
  • 避免频繁读取会引发重绘/回流的属性
  • 对具有复杂动画的元素使用绝对定位

23、实现一个div的背景色一半红一半白。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 300px;
        height: 300px;
        /* 渐变 */
        background: linear-gradient(to right, red 0%,red 50%,white 51%,white 100%);
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

24、清除浮动常用的方法。

• 清除浮动主要是为了解决父元素因为子元素浮动引起的内部高度为0的问题。
• 额外标签法。在最后浮动元素后加一个标签，设置clear:both；
• 给父级元素设置高度
• 给父级元素设置overflow属性为hidden或者auto
• 使用after伪元素

.clearfix:after {
    /*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
.clearfix {
  *zoom: 1;
}

• 使用after和before双伪元素

.clearfix:before,.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
.clearfix {
	zoom: 1;
}

25、简述一下BFC。

• 概念
  • BFC就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。
• 作用
  • 清除浮动
  • 不被浮动元素覆盖
  • 解决margin塌陷问题
• 触发条件
  • html根元素
  • float值不为none的元素
  • position值为absolute或者fixed
  • display值为inline-block table-cell flex inline-flex 等
  • overflow 除了 visible 以外的值(hidden,auto,scroll)
• 特点
  • 内部盒子会在垂直方向，一个接一个地放置
  • BFC元素的垂直方向上会发生边距重叠
  • BFC元素和浮动元素不会发生重叠
  • 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）
  • 计算BFC高度时，浮动元素也参与计算