【知识整理】css常见面试题整理前言：主要整理一些常见的CSS相关面试题，一来梳理知识点，二来加强对知识点的记忆与理解

前言：主要整理一些常见的css相关面试题，一来梳理知识点，二来加强对知识点的记忆与理解。如果对你也有帮助，那就更好啦

1、行内元素，块级元素？

（1）块级元素

独占一行，自动换行
可设置宽高
margin和padding都可设置

（2）行内元素

不独占一行，不会自动换行
不可设置宽高
margin和padding可设置水平方向，但不能设置垂直方向

（3）简单举例

block：div，p，h1，form
inline： span，img，a
inline-block： input，button

2、css元素优先级？

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器 > 继承 > 浏览器默认属性

!important：最高权重
内联样式： 1000
id选择器： 100
类选择器： 10
属性选择器： 10
伪类选择器： 10
标签选择器： 1
伪元素选择器： 1
相邻兄弟选择器： 0
子选择器： 0
后代选择器： 0
通配符选择器： 0

3、垂直居中有哪些实现方式？

（1）尺寸确定：假设居中的元素为大小10px的正方形

1、定位 + 负margin

position: absolute;  // 父盒子使用position: relative;
left: 50%;
top: 50%;
magrin-left: -5px;
magtin-top: -5px;

2、定位 + calc

position: absolute;    // 父盒子使用position: relative;
left: calc(50% - 5px);
top: calc(50% - 5px)

（1）尺寸不确定：不确定居中元素的大小

1、定位 + transform

position: absolute;    // 父盒子使用position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,  -50%)

2、定位 + margin：auto

position: absolute;   // 父盒子使用position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin：auto;

3、flex布局

display: flex
justify-content: center;
align-items: center;

4、grid布局

display: grid;
align-self: center;
justify-self: center;

4、box-sizing有哪些值？

（1）content-box：宽度和高度的计算值不包含边框（border）和内边距（padding）

width = 内容的宽度
height = 内容的高度

（2）border-box：宽度和高度的计算值包含边框（border）和内边距（padding）

width = border + padding + 内容的宽度
height = border + padding + 内容的高度

5、display:none与visibility:hidden的区别？

（1）display:none

元素不存在渲染树中，不会占据空间
修改display通常会造成文档的重排

（2）visibility:hidden

元素存在渲染树中，会占据空间，只是内容不可见
修改visibility属性会造成本元素的重绘

6、重排和重绘？

重绘（repaint）：某些元素的外观被改变，但尺寸和定位不变，例如：改变元素的背景色。
重排（reflow）：重新生成布局，重新排列元素。如一个元素高度变化，导致所有元素都下移。

重绘不一定重排，但重排一定会导致重绘。

7、BfC是什么？

BFC（块级格式化上下文）：创建一个特殊的区域，有自己的布局规则，这个特殊的区域不受外界影响

如何形成BFC：

根元素
浮动元素：float
绝对定位元素：position为absolute或fixed
具有overflow，值不是visible块元素
display: inline-block（内联块）/ table-cell（表格单元格） / table-caption（表格标题）

BFC的特点

BFC区域是一个独立的渲染容器，内部元素与外部元素互不干扰
垂直方向上，自上往下排列
同一个BFC的两个相邻容器的margin会出现边距折叠
BFC区域不会与浮动元素重叠，依次排列
每个box在水平方向上的左边缘与BFC的左边缘相对齐
浮动元素的高度也参与BFC的高度计算

8、写一个loading动画（css3）？

给需要旋转的icon，增加ID选择器 id="loadingIcon"

#loadingIcon {
    animation: Clockwise 2.2s linear infinite;
}
 
@keyframes Clockwise {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
 }

【知识整理】css常见面试题整理