前端面试问题集锦---CSS篇

CSS选择器的优先级是怎么样的？

CSS选择器的优先级是：内联>ID选择器>类选择器>标签选择器
到具体的计算层面，优先级是由A、B、C、D的值来决定的，其中它们的值计算规则如下：

• A的值等于1的前提是存在内联样式，否则A=0
• B的值等于ID选择器出现的次数
• C的值等于类选择器和属性选择器和伪类出现的总次数
• D的值等于标签选择器和伪元素出现的总次数
  比如下面的选择器，它不存在内联样式，所以A=0，不存在id选择器B=0，存在一个类选择器C=1，存在三个标签选择器D=3，那么最终计算结果为：{0，0，1，3}

ul ol li .red {
	...
}

按照这个结算方式，下面的计算结果为：{0，1，0，0}

#red {
	...
}

比较优先级的方式是从A到D去比较值的大小，A，B，C，D权重从左到右，依次减小。判断优先级时，从左到右，一一比较，直到比较出最大值，即可停止。如上述例子中第二个例子的B与第一个例子的B相比，1>0，接下来就不需要比较了，第二个选择器的优先级更高。

link和@import的区别？

• link属于XHTML标签，而@import是CSS提供的。
• 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
• @import只在IE5以上才能识别，而link是XHTML标签，无兼容问题
• link方式的样式权重高于@import的权重
• 使用dom控制样式时的差别。当使用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的

CSS有哪些方式可以隐藏页面元素？

• opacity:0; 本质是将元素的透明度设置为0，就看起来隐藏了，但是依然占据空间且可以交互。
• visibility:hidden;与上一个方法类似的效果，依然占据空间，但是不可以交互。
• overflow:hidden;这个只隐藏元素溢出的部分，但是占据空间，且不可以交互。
• display:none;这个是彻底隐藏了元素，元素从文档流中消失，既不占据空间也不交互，也不影响布局。
• z-index:-9999;原理是将层级放在底部，这样就被覆盖了，看起来就隐藏了。
• transform:scale(0,0);平面变换，将元素缩放为0，但是依然占据空间，但不可交互

还有一些靠绝对定位把元素移到可视区域外，或者用clip-path进行裁剪的操作过于hack，此处不做考虑

em\px\rem区别？

• px：绝对单位，页面按精确像素展示
• em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算(浏览器默认字体是16px)，整个页面内1em不是一个固定的值。
• rem：相对单位，可理解为"root em"，相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持

块级元素水平居中的方法

如果使用Hack的话，水平居中的方法非常多，这里只介绍主流的

margin:0 auto方法

.center{
	height: 200px;
	width: 200px;
	margin: 0 auto;
	border: 1px solid red;
}
<div class="center">水平居中</div>

flex布局，目前主流方法

.center {
	display: flex;
	justify-content: center;
}
<div class="center">
	<div class="flex-div">1</div>
	<div class="flex-div">2</div>
</div>

table方法

.center {
	display:table;
	margin:0 auto;
	border:1px solid red;
}
<div class="center">水平居中</div>

16种方法实现水平居中垂直居中

CSS有几种定位方式

position

• static：正常文档流定位，此时top,right,bottom,left和z-index属性无效，块级元素从上往下纵向排布，行级元素从左向右排列
• relative：相对定位，此时的“相对”是相对于正常文档流的位置
• absolute：相对于最近的非static定位祖先元素的偏移，来确定元素位置，比如一个绝对定位元素它的父级、和祖父级元素都为relative，它会相对他的父级而产生偏移。
• fixed：指定相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，比如那种回到顶部的按钮一般都是用此定位方式。
• sticky：粘性定位，特性近似于relative和flex的合体，其实在实际应用中的近似效果就是IOS通讯录滚动的时候的“顶屁股”。

如何理解z-index?

CSS中的z-index属性控制重叠元素的垂直叠加顺序，默认元素的z-index为0，我们可以修改元素的z-index来控制元素的图层位置，而且z-index只能影响设置了position值的元素。

如何理解层叠上下文？

• 什么是层叠上下文？
  层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的z轴上延申，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
• 如何产生层叠上下文？
  • 根元素（HTML）
  • z-index值不为auto的绝对/相对定位
  • 一个z-index值部位auto的flex项目。即：父元素display:flex|inline-flex
  • opacity属性小于1的元素
  • transform属性值不为none的元素
  • filter值不为none的元素
  • perspective值不为none的元素
  • isolation属性被设置为isolate的元素
  • position:fixed
  • 在will-change中指定了任意CSS属性，即便没有指定这些属性的值
  • -webkit-overflow-scrolling属性被设置touch的元素

深入理解层叠上下文

清除浮动有哪些方法？

• 空div方法：<div style="clear:both;"></div>
• clearfix方法
• overflow:auto或者overflow:hidden方法，使用BFC

在flex已经成为布局主流之后，浮动这种东西越来越少见了，毕竟它的副作用太大

你对css sprites的理解，好处是什么？

是什么？
雪碧图也叫CSS精灵，是一种CSS图像合成技术，开发人员往往将小图标合并在一起之后的图片称作雪碧图。
如何操作？
使用工具(PS之类的)将多张图片打包成一张雪碧图，并为其生成合适的CSS。每张图片都有相应的CSS类，该类定义了background-image、backgrund-position和background-size属性。使用图片时，将相应的类添加到你的元素中。
好处

• 减少加载多张图片的HTTP请求数(一张雪碧图只需要一个请求)

• 提前加载资源
  不足

• CSS sprites维护成本较高，如果页面背景有少许改动，一般就要改这张合并的图片

• 加载速度优势在http2开启后荡然无存，http2多路复用，多张图片也可以重复利用一个连接通道搞定

你对媒体查询的理解

是什么？
媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加CSS3，允许内容的呈现针对一个特定范围的输出设备而进行剪裁，而不必改变内容本身，非常适合web网页应对不同型号的设备而做出对应的响应适配。
如何使用？
媒体查询包含一个可选的媒体类型和满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true。那么媒体查询内的样式将会生效。

//link元素中的CSS媒体查询
<link rel="stylesheet" media="(max-width: 800px)" href="example.css"/>

//样式表中的CSS媒体查询
<style>
@media(max-width:600px) {
	.demo {
		display:none;
	}
}
</style>

深入理解CSS Media媒体查询

你对盒模型的理解

是什么？
当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的CSS基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形盒子（box）。CSS决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸）。
盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成

标准盒模型和怪异盒模型有什么区别？

在W3C标准下，我们定义元素的width的值即为盒模型中的content的宽度值，height值即为盒模型中的content的高度值。因此，标准盒模型下：
元素占据的宽度=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
元素的高度同理
而IE怪异盒模型(IE8以下)width的宽度并不是content的宽度，而是border-left+padding-left+content的宽度+padding-right+border-right之和，height同理。此时，
元素占据的宽度=margin-left+width+margin-right
虽然现代浏览器默认使用W3C的标准盒模型，但是在不少情况下怪异盒模型更好用，于是W3C在CSS3中加入box-sizing

box-sizing: content-box;//标准盒模型
box-sizing: border-box;//怪异盒模型
box-sizing: padding-box;//火狐的私有模型，没人用

深入理解盒模型

谈谈对BFC的理解

深入理解BFC

是什么？
书面解释：BFC(Block Formatting Context)这几个英文拆解

• Box:CSS布局的基本单位，Box是CSS布局的对象和基本单位，直观点来说，就是一个页面是由很多个Box组成的，实际上就是上述的盒模型。
• Formatting context：块级上下文格式化，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

简言之，它是一块独立的区域，让处于BFC内部的元素与外部的元素互相隔离。
如何形成？
BFC触发条件：

• 根元素，即HTML元素
• position:fixed/absolute
• float不为none
• overflow不为visible
• display的值为inline-block、table-cell、table-caption
  作用是什么？
  1.防止margin发生重叠
  2.两栏布局，防止文字环绕等
  3.防止元素塌陷

为什么有时候人们用translate来改变位置而不是定位

translate()是transform的一个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint）,只会触发复合（composition）。而改变绝对定位会触发重新布局，进而触发重绘和复合。transform使浏览器为元素创建一个GPU图层，但改变绝对定位会使用到CPU。因此translate()更高效，可以缩短平滑动画的绘制时间。
而translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发生这种情况。

CSS3 3D transform变换

伪类和伪元素的区别是什么？

伪类是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前添加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树种。
区别：伪类是通过在元素选择器上加入伪类改变元素状态，而伪元素通过对元素的操作进行对元素的改变。
我们通过p::before对这段文本添加了额外的元素，通过p:first-child改变了文本的样式。

总结伪类和伪元素

你对flex的理解

flex的语法
flex实例

web应用有不同设备尺寸和分辨率，这时需要响应式界面设计来满足复杂的布局需求，flex弹性盒模型的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局。

关于CSS的动画与过渡问题

深入理解CSS动画animation
深入理解CSS过渡transition