CSS 高频面试题

前辈总结的

什么是BFC？

Box: Box 是 CSS 布局的对象和基本单位，⼀个⻚⾯是由很多个 Box 组成的，这个Box就是我们所说的盒模型。
Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤。

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗来讲：BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

创建BFC的条件：

根元素：body；
元素设置浮动：float 除 none 以外的值；
元素设置绝对定位：position (absolute、fixed)；
display 值为：inline-block、table-cell、table-caption、flex等；
overflow 值为：hidden、auto、scroll；

BFC的特点：

垂直方向上，自上而下排列，和文档流的排列方式一致。
在BFC中上下相邻的两个容器的margin会重叠
计算BFC的高度时，需要计算浮动元素的高度
BFC区域不会与浮动的容器发生重叠
BFC是独立的容器，容器内部元素不会影响外部元素
每个元素的左margin值和容器的左border相接触

BFC的作用：

解决margin的重叠问题
由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
解决高度塌陷的问题
在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden
创建自适应两栏布局
可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

CSS 常见的定位方式？
1、默认static
HTML 元素的默认值，没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
2、相对定位relative
元素相对自身偏移某个位置，元素扔保持其未定位的形状，它原本所占用的空间仍会保留，子元素可相对该元素进行绝对定位。
3、绝对定位absolute
赋予绝对定位的元素会从文档流中拖出，使用left、right、top、bottom等属性相对于相对于最近的已定位的父级元素进行绝对定位，如果元素的父级没有设置定位属性，则根据 body 元素左上角作为参考进行定位。绝对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，0位默认值，大的在上面，可以有负值。
4、固定定位fixed
不占空间，相对于浏览器的窗口、屏幕视口、来定位，脱离文档流,这意味着即便页面滚动，它还是会停留在相同的位置，一个固定定位元素不会保留它原本在页面应有的空隙。
5、粘性定位sticky
粘性定位可以被认为是相对定位和固定定位的混合（即元素子再跨越特定阈值前为相对定位，之后为固定定位）例如：display：sticky top：10px
在 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到视口回滚到阈值以下
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
粘性定位不生效的几种情况：
没有设置上下左右的任何一个值
范围表元素本身都小
设置了overflow：hidden

清除浮动的方式？
浮动的定义： 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。
浮动元素引起的问题？
父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素会跟随其后
若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构
为什么要清除浮动，因为浮动的元素不占据标准流中的位置，所以如果外层父元素没有设置高度里面的子元素浮动的话就会高度塌陷
方法一：使用带clear属性的空元素
在浮动元素后使用一个空元素

如<div class="clear"></div>，
并在CSS中赋予.clear{clear:both;}属性即可清理浮动。
亦可使用<br class="clear" />或<hr class="clear" />来进行清理。

方法二：使用CSS的overflow属性
给外层父元素设置overflow：hidden
另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果
方法三：使用CSS的:after伪元素

.father:after {
    content:'';
    display:block;
    clear:both;
    height:0;
}

clear属性只有块级元素才有效的，而::after等伪元素默认都是内联水平，
这就是借助伪元素清除浮动影响时需要设置display属性值的原因
方法四：给父级div设置height

什么是felx布局？
弹性布局用来为何模型提供最大的灵活性，任何一个容器都可以指定为flex布局，容器内的子元素称为项目。
任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
以下6个属性设置在容器上:
flex-direction属性决定即项目的排列方向flex-direction: row | row-reverse | column | column-reverse;
flex-wrap默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。flex-wrap: | wrap | wrap-reverse;
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。flex-flow: ;
justify-content属性定义了项目在主轴上的对齐方式。justify-content: flex-start | flex-end | center | space-between 两端对齐，项目之间的间隔都相等。 | space-around; 每个项目两侧的间隔相等。所
align-items属性定义项目在交叉轴上如何对齐,align-items: flex-start | flex-end | center | baseline | stretch;
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用,align-content: flex-start | flex-end | center | space-between | space-around | stretch;
以下6个属性设置在项目上:
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

元素垂直居中的方式？
方法一：

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

方法二：

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;  子元素的一半
}

方法三：

.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  height: 100px;
  width: 100px;
}

方法四：

.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

css 盒模型？
盒模型：盒模型有四个部分组成，从内向外的话是内容区域的宽高，内边距padding，边框，外边距margin
在W3C标准盒模型中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在怪异模式下，IE的宽度和高度还包含了padding和border。
标准模式和怪异模式的区别
①盒模型：IE下标准模式为：盒模型的宽高一般是content。怪异模式下的宽度是包含了内边距和边框的 。
②怪异模式中IE6/7/8都不识别！important声明
③设置行内元素宽高，标准模式下不生效，怪异模式下生效
④margin:0 auto,在标准模式下会水平居中，怪异模式下不会。
可以通过修改元素的box-sizing属性来改变元素的盒模型：
box-sizeing: content-box 表示标准盒模型（默认值）
box-sizeing: border-box 表示IE盒模型（怪异盒模型）
inherit:从父元素继承这个属性的取值

css 样式优先级？

注意事项：

!important声明的样式的优先级最高；
如果优先级相同，则最后出现的样式生效；
继承得到的样式的优先级最低；
通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

伪类和伪元素的区别？
伪类：是用来定义元素特殊状态的，他可以用来设置鼠标悬停样式、元素获取焦点样式、设置链接样式等。如常见的 hover、active、link 等都是伪类。
伪元素：伪元素也称为伪对象，就是用css 模拟出来了一个盒子。它不存在于 DOM 文档中、是一个虚拟的元素。它可以用来代表某个元素的子元素，但是这个子元素并不存在于文档树中。
伪类和伪元素的根本区别在于：是否创造了新的元素。微元素:: 伪类:

伪元素选择器

伪类选择器

如何实现元素隐藏？
display: none：把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。也不会响应绑定的监听事件。
visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
rgba(0,0,0,0)：透明，会继续在文档流中占位，所以触发重绘。由于只作用于颜色或背景色，所以子元素不会继承，透明后可以触发点击事件

怎么实现偶数盒子变色？
第一种：简单数字序号写法:nth-child(number)直接匹配第number个元素。参数number必须为大于0的整数。例子：

li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

第二种：倍数写法:nth-child(an)匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。例子：

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

第三种：奇偶匹配:nth-child(odd) 与 :nth-child(even)分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。

css动画和js动画的区别？
①js动画是逐帧动画，是在时间帧上逐帧绘制帧内容，由于是一帧一帧的话，所以他的可操作性很高，几乎可以完成任何你想要的动画形式，
css动画制作方法简单方便。只需确定第一帧和最后一帧的关键位置即可，补间动画由浏览器完成。
② js的动画执行在主线程，主线程还有其他任务要执行，容易引发阻塞和等待，降低动画执行效率
css的动画执行在合成线程，专事专干，不阻塞主线程，合成线程的动画也不会触发回流和重绘
③ 一般js动画不会有兼容的问题，但是css会有浏览器的兼容问题
如果动画只是一些简单的状态切换，滑动等效果，不需要中间的控制过程，css3是比较好的选择，如果需要实现一些比较复杂且炫酷的动画，使用js更好

CSS预处理器？
通俗的说，“CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题”，可以在CSS中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

重绘和重排的区别？
重绘就是当元素的外观属性发生改变的时候,浏览器重新绘制渲染出来,但是不影响元素的位置、大小，例如颜色、字体大小
重排也叫回流,每个页面至少回流一次,当渲染树节点发生改变，影响了节点的几何属性（如宽、高、内边距、外边距、或是float、position、display：none;等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。
重绘不一定引起重排,但重排一定引起重绘.
引起重排的原因？
1、添加或者删除可见的DOM元素；
2、元素位置改变——display、float、position、overflow等等；
3、元素尺寸改变——边距、填充、边框、宽度和高度
4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
5、页面渲染初始化；
6、浏览器窗口尺寸改变——resize事件发生时；
如何减少和避免重排？
1.使用transform代替top、left，因为使用transform页面不会出现回流现象，创建⼀个 GPU 图层，复合
2.不要使用table来进行布局，因为一个小改动就会导致整个table的重新布局
3.不要逐条变更DOM的样式，应封装在一个style对象中赋值给DOM的样式属性
4.避免频繁操作DOM，创建一个documentFragment，在他上面应用所有DOM操作，最后再把他添加到文档中
5.使用css动画代替js动画

css3有哪些新特性？
一：CSS3选择器
基本选择器
属性选择器
伪类选择器
二：CSS3边框与圆角
CSS3圆角 border-radius
盒阴影 box-shadow
边框图像 border-image
三：CSS3背景与渐变
CSS3背景
background-image：设置一个元素的背景图像。
background-origin：规定 background-position 属性相对于什么位置来定位。
background-clip：规定背景的绘制区域。
CSS3渐变
定义：可以在两个或者多个指定颜色之间显示平移的过渡
linear-gradient()：线性渐变。
radial-gradient()：径向渐变。
四：CSS3过渡
定义：允许css的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画形式改变css的属性值。
transition：设置元素当过渡效果，四个简写属性为：
transition-property：过渡属性名。
transition-duration：规定完成过渡效果需要花费的时间（以秒或毫秒计）。
transition-timing-function：指定切换效果的速度。
五：CSS3变换
定义：让一个元素在一个坐标系统中变形，这个属性包含一系列的变形函数，可以移动，旋转，缩放元素。
transform：应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
六：动画
定义：使元素从一种样式逐渐变化到另外一种样式的效果。
animation：为元素添加动画，是一个简写属性。
animation-name：为 @keyframes 动画名称。
animation-duration：动画指定需要多少秒或毫秒完成。
animation-timing-function：设置动画将如何完成一个周期。