2022大厂高频面试题之CSS篇(带答案)

系列文章：
2022前端大厂面试题之JavaScript篇(1)
2022前端大厂面试题之JavaScript篇(2)
2022前端大厂面试题之JavaScript篇(3)
2022大厂高频面试题之 *** 作系统篇
2022前端大厂高频面试题之HTTP篇
2022大厂高频面试题之计算机网络篇

文章目录 2022大厂高频面试题之CSS篇(带答案)css的position属性取值css选择器优先级和权重box-sizing属性CSS 盒子模型CSS实现三角形CSS布局d性布局display:flex 实现一个垂直水平居中隐藏页面元素的方法style-componentsHTML脱离文档流的方法block，inline和inlinke-blocktransition与animation区别

2022大厂高频面试题之CSS篇(带答案) css的position属性取值 static 默认值。fixed 生成固定定位的元素，相对于浏览器窗口进行定位。absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。relative 生成相对定位的元素，相对于其正常位置进行定位。inherit 该元素的position的属性值继承自父元素，跟其父元素一样。sticky 粘性定位，该定位基于用户滚动的位置。它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
详细用法 css选择器优先级和权重

下面的优先级逐级增加：
通用选择器（*）< 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式

元素选择器：

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

属性选择器：

a[href] {color:red;}
<a href="http://w3school.com.cn">W3School</a>

css优先级规则：

css选择规则的权值不同时，权值高的优先；css选择规则的权值相同时，后定义的规则优先；css属性后面加 !important 时，无条件绝对优先； box-sizing属性

box-sizing: content-box(默认，标准盒子模型)|border-box(IE 盒子模型)|inherit(继承父元素的 box-sizing 值);

CSS 盒子模型

CSS 盒模型本质上是一个盒子，它包括：边距，边框，填充和实际内容。CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。

在标准的盒子模型中，width 指 content 部分的宽度。
在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度。

故在计算盒子的宽度时存在差异：
标准盒模型： 一个块的总宽度 = width+margin(左右)+padding(左右)+border(左右)
怪异盒模型： 一个块的总宽度 = width+margin(左右)(既 width 已经包含了 padding 和 border 值）

CSS实现三角形

宽度高度设为0，边框设为透明色，然后需要的部分设为红色即可。

#box {
    width: 0px;
    height: 0px;
    border: 10px solid transparent;
    /*上下左右哪设颜色哪个方向就会是一个等边直角三角形*/
    border-top-color: deeppink;
    /*border-left-color: deeppink;*/
    /*border-right-color: deeppink;*/
    /*border-bottom-color: deeppink;*/
}

CSS布局 d性布局display:flex

给父元素设置display:flex，父元素表现为块盒子，开启d性布局。

给父元素设置diisplay:inline-flex，父元素表现为内联块盒子，开启d性布局。

区别于默认布局，d性布局中：

子元素成为d性盒子，宽度、高度、外边距可以d性变化，自适应父元素的尺寸
子元素可以在垂直、水平方向上，正向或反向排列
父元素通过justify-content决定子元素在主轴的对齐方式
父元素通过align-items决定子元素在交叉轴的对齐方式
父元素通过align-content决定多行子元素整体在交叉轴的对齐方式
子元素通过align-self决定自身在交叉轴的对齐方式

实现一个垂直水平居中

垂直水平居中
好文：CSS水平居中+垂直居中+水平/垂直居中的方法总结

行内元素

.parent {
   height: 高度; 
   text-align: center;
}
.son {
    line-height: 高度;
}

flex布局

.parent {
    display: flex;
    align-items: center;垂直居中
    justify-content: center;水平居中
}
//或者设置父flex ，子 margin: auto;

table

.parent {
  display: table;
  text-align: center;
}
.son {
  display: table-cell;
  vertical-align: middle;
}

绝对定位定宽 定高

.son {
 position: absolute;
    top: 50%;
    height: 高度;
    margin-top: -0.5高度;
    width: 宽度;
    left: 50%;
    margin-left: -0.5*宽度
}

transform绝对定位不定宽 不定高

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

left/right: 0 top/bottom: 0;

.son {
    position: absolute;
    width: 宽度;
    left: 0;
    right: 0;
    margin: 0 auto;

    height: 高度;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

隐藏页面元素的方法

完全隐藏：元素从渲染树中消失，不占据空间。
1.display 属性display: none;把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉。
2.hidden 属性：HTML5 新增属性，相当于 display: none
视觉上的隐藏：屏幕中不可见，占据空间。
1.利用 position 和 盒模型 将元素移出可视区范围：通过设置 top、left、margin 等值，将其移出可视区域。
2.利用 transfrom
缩放

transform: scale(0);
height: 0;

移动 translateX, translateY

transform: translateX(-99999px);
height: 0

旋转 rotate

transform: rotateY(90deg);

3.设置其大小为0
4.设置透明度为0opacity:0;该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件也能触发
5.visibility属性visibility: hidden;该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件。
6.层级覆盖，z-index 属性
7.clip-path 裁剪
语义上的隐藏：读屏软件不可读，但正常占据空。
aria-hidden 属性

style-components

强制你使用组件化样式的最佳实践，让你在 JavaScript 中写CSS，react是用js写html的框架，为了在react框架中使用js编写一切代码，使用css-in-js库编写css代码，style-components是近期使用人数最多的css-in-js库。
参考

HTML脱离文档流的方法

1：float：使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。
2：absolute
3：fixed：完全脱离文档流，相对于浏览器窗口进行定位。

block，inline和inlinke-block

display:block
1.block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2.block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3.block元素可以设置margin和padding属性。

display:inline
1.inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2.inline元素设置width,height属性无效。
3.inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block
简单来说就是不独占一行的块级元素。将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。使其既具有block的宽度高度特性又具有inline的同行特性。

transition与animation区别

1.transition需要触发条件，不能自动执行；animation不需要触发条件，页面加载完成后自动执行
2.transition触发一次，只能执行一次，多次执行，需要多次触发条件
3.transition只能设置开始和结束两个状态，不能设置中间的状态
4.animation像flash动画一样，可以设置动画关键帧