CSS面试题

盒模型组成是什么？，box-sizing有什么作用？

盒模型：margin(外边距)
padding(内边距)
border(边框) content(内容)
box-sizing:content-box /border-box / inherit有以下三个属性
1：content-box:指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度，元素的填充和边框布局和绘制
指定宽度和高度除外.
2 ：border-box:指定宽度和高度（最小/最大属性）确定元素边框box，对元素指定宽度和高度包括padding和border
的指定，内容的宽度和高度减去各自双方该边框和填充的宽度从指定的“宽度”和“高度”属性计算
3 ：inherit:指定box-sizing属性的值，应该从父元素继承

重绘和回流

重绘:当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制
，使元素呈现新的外观叫做重绘。

重排（回流）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程

重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）

引起重绘Repaint的属性

color border-style visibility background
text-decoration background-image background-position background-repeat
outline-color outline outline-style border-radius
outline-width box-shadow background-size

引起重排（回流reflow）的场景和属性

1.添加、删除可见的dom

2.元素的位置改变

3.元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)

4.页面渲染初始化

5.浏览器窗口大小改变
6.设置style属性

7.改变文字大小
8.添加/删除样式表
9.激活伪类，如:hover
10.操作class属性
11.内容的改变，(用户在输入框中写入内容也会)

如何减少重绘（Repaint）和重排（reflow）

（1）不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class，然后修改 DOM 的 className。
（2）不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
（3）为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
（4）千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。(table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。)
（5）不要在布局信息改变的时候做查询（会导致渲染队列强制刷新）
（6）用translate替代top改变
（7）用opacity替代visibility（在独立图层下优化重绘）

解释一下css3的flexbox，以及适用场景？

弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有
类型的显示设备和屏幕尺寸）的能力，flexbox布局是最合适的一个应用程序的组件，以及小规模的布
局，而网络布局是用于较大规模的布局

display：flex；先将元素变成弹性容器，那么这个元素中的子元素自然而然就变成了弹性子元素。（容器是一个块状元素）

display：inline-flex；容器是一个行内flex元素

弹性盒子属性：

flex-direction:弹性子元素的排列方式（主轴排列方式）

flex-warp:设置弹性盒子的子元素是否换行

flex-flow:flex-direction 和 flex-wrap 的简写

align-item:设置弹性盒子在纵轴对其方式

align-content:修改flex-wrap属性行为，类似align-items.但是不是设置元素对其，而是设置行对其（行与行的对其方式）

justify-content：设置弹性盒子元素在主轴对其方式

flex-direction:弹性容器中子元素的排列方式(主轴排列方式)【子元素在主轴上的排列方式】

align-item:设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式


1.弹性盒子/伸缩盒子

如果要使用弹性盒子属性，首先要将父级元素变成弹性盒子

Flex-direction 设置伸缩盒子的内部元素的排列方式

Row    从左到右安行排列

Column  从上到下按照列排列

Row-reverse   从右到左按照行排列

Column-reverse  从下到上按照列排列

Flex-shrink  设置弹性盒子的内部元素的收缩方式

注意：所有盒子的默认收缩方式都是1

Flex-grow   设置弹性盒子的扩展比例

注意：所有盒子的默认扩展比率为0

Flex-basis   设置伸缩盒子内部元素的基准值

注意：所有元素默认伸缩基准值为元素的宽度

Flex-wrap 设置伸缩盒子的子元素超出的处理方式

Nowrap   自动收缩子元素以适应盒子

Wrap     超出盒子换到下一行

Wrap-reverse   超出盒子换到上一行

Justify-content  设置伸缩盒子的子元素在水平方向的对齐方式

Flex-start   靠左对齐

Flex-end    靠右对齐

Center      居中对齐

Flex-between   两端对齐

Flex-around    平均分布

如果flex-between和flex-around这两个属性不起作用的话可以换成

Space-between和space-around

Align-items  设置伸缩盒子的子元素的排列方式

Flex-start  在伸缩盒子的左上角排列

Flex-end   在伸缩盒子的左下角排列

Center     在伸缩盒子的中间排列

Baseline   在伸缩盒子的左上角基线排列

Strecth     拉伸所有的子元素同父元素等高

Align-self  针对伸缩盒子中的某个元素单独设置排列方式

Auto   使用默认方式

Flex-start   在伸缩盒子左上角排列

Flex-end   在伸缩盒子的左下角排列

Center     在伸缩盒子的中间排列

Baseline   在伸缩盒子的左上角基线排列

Strecth     拉伸所有的子元素同父元素等高

注意：该属性是在align-items的基础上对某个子元素进行单独设定

该属性的默认方式并不是左上角，而是父级添加的属性

Align-content   设置伸缩盒子的子元素换行后的对齐方式

注意：如果伸缩盒子的子元素没有换行，那么该属性无效

Flex-start  换行内容靠左上角

Flex-end   换行内容靠左下角

Center     换行内容居中显示

Space-between   换行内容在垂直方向的顶部和底部分开

Space-around   各行在弹性盒子容器中平均分布，两端保留子元素和子元素之间间距大小的一半

Strecth    拉伸子元素

Order  设置弹性盒子内的子元素的排列顺序

值为整数

数越小，排列越靠前

什么是BFC,如何去创建BFC? 它能解决什么问题？

BFC：简单说，它是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用
如何创建BFC：当一个HTML元素满足下面条件的任何一点，都可以产生BFC,常见的，float的值不为‘none’，
overflow的值不为‘visible’,display的值为‘table-cell’,‘table-caption’,or‘inline-block’中的任何一个，
position的值不为‘static’或‘relative’中的任何一个创建一个BFC的元素就是一个独立的盒子，里面的子元素不
会在布局上影响外面的元素，反之亦然，同时BFC仍然属于文档中的普通流

CSS3新特性有哪些，伪类，伪元素，锚伪类分别有哪些？

1. 伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
2. 伪元素：用于创建一些不在文档树中的元素，并为其添加样式。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。

常见的状态伪类主要包括：

:link 应用于未被访问过的链接； :hover 应用于鼠标悬停到的元素； :active 应用于被激活的元素；
:visited 应用于被访问过的链接，与:link互斥。 :focus 应用于拥有键盘输入焦点的元素。

伪元素的应用： before，after
清除浮动：如果父元素的所有子元素都是浮动的，父元素的高度则无法撑开。可以通过对父元素添加after伪类撑开父元素高度，因为after就是其最后一个子元素。

.clear::after {
   
    content: '';
    display: block