2022前端面试—CSS篇

一、CSS部分

css3新特性及详解：

1.圆角border-radius

html的一些常见元素都类似于矩形，四四方方的。css属性border-radius可以为任意html元素设置圆角。这个属性呈现的样式有属性值的个数决定。当有四个值，对应矩形顺时针的四个直角。两个值是分别是：X对角线的两个直角。一个值时包括4个直角。

2.阴影之box-shadow

阴影指的是：物体把光遮住留下的影子。

3.文字阴影text-shadow

4.背景渐变linear-gradient

5.转换transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

1. translate()移动

是transform的属性值，是指元素进行2D变换，2D变换就是指，元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少

2.旋转 rotate

用法：transform: rotate(45deg);
共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。

3.缩放 scale

用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);
参数表示缩放倍数；
一个参数时：表示水平和垂直同时缩放该倍率
两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。

4.倾斜 skew

用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);
参数表示倾斜角度，单位deg
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

5.基准点 transform-origin

在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。
用法：transform-origin: 10px 10px;
共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；
两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。

6.过渡transition

过渡，指的是css的某个属性值如何平滑的改变，就是平常所说的动效
基本用法：
transition：[属性名] [持续时间] [速度曲线] [延迟时间]

我们可以很方便的用这个过渡来给某一个属性加上好看的动效。例如，高度属性的值改变时，延迟 0.5 秒后以 ease 曲线进行过渡，持续2秒：

transition:height 2s ease 0.5s
1

或者一个属性不够，想要监听所有属性。

transition: all 2s ease .5s;
1

6.动画animation

动画能够更加精准地控制样式过渡效果。可以从第一种样式到第二种样式再到第三种样式，利用所占百分比来确定每个过渡所占用的时间。

1，@keyframes创建动画

使一个div元素逐渐移动200像素：

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
1
2
3
4
5
6
7
8
9
10
11
12
13

2.animation执行动画

使用简写属性，将动画与 div 元素绑定：

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
1
2
3
4
5
6
7

7.媒体查询

这里的媒体是指：各种应用前端技术的设备信息。媒体查询是指：自动获取当前设备的屏幕信息，以便于采用渲染方式，使同一种样式在不同设备上显示出不同的效果。

1.设置meta标签

"viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no">
注释：
device-width：宽度等于当前设备宽度
initial-scale：初始缩放比例（默认1.0）
maximum-scale：允许用户缩放最大比例
user-scalable：用户是否可以手动缩放
1
2
3
4
5
6

2.媒体查询语句

1.语法规范

@media mediatype and|not|only (media feature){
      css-code;
}
1
2
3

• 用@media开通 注意@符号
• mediatype 媒体类型
• 关键字 and not only
• media feature 媒体特性，必须有小括号包含

2.mediatype查询类型

将不同的终端设备划分为不同的类型，称为媒体类型

all:所有设备
print：打印机
scree：平板、手机、电脑
1
2
3

3.媒体查询语句

@media screen and (max-width: 768px) {
*设备小于768px加载样式，语法是：and + (属性)*/
body{
background-color: red;
    }
}
@media screen and (max-width: 992px) and (min-width: 768px){
*设备小于768px但小于992px加载样式*/
body{
background-color: pink;
    }
}
@media screen and (min-width: 992px) {
*设备大于992px加载样式*/
body{
background-color: green;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

8.响应式布局

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天，我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是PC端开发一套页面，手机端再开发一套页面。但是这样做非常麻烦，随着不同的终端越来越多，你需要开发多个不同版本的页面。而使用响应式布局只要开发一套就够了。

技术方案1：

less
媒体查询
rem

技术方案2：

flexible.js rem

9.栅格系统

栅格详解连接

10.多列布局

// 以下实例将 
 元素中的文本分为 3 列：
div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
//以下实例指定了列与列间的间隙为 40 像素：
div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

css高频面试问题：

1.盒子水平垂直居中方法：

1. grid 布局
.father {
    display: grid;
}
.son {
    align-self: center;
    justify-self: center;
}
2. absolute+ 负margin
.father {
    position: relative;
}
.son {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
3. absolute+ transform
.father {
    position: relative;
}
.son {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
4. absolute+ margin: auto
.father {
    position: relative;
}
.son {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
5. flex布局
.father {
    display: flex;
    justify-content: center;
    align-items: center;
}
6. margin + transfrom
.father {
    overflow: hidden;
}
.son {
    margin: 50% auto;
    transform: translateY(-50%);
}
7. table-cell
.father {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.son {
    display: inline-block;
}
8. inline-block + vertical-align
.father {
    text-align: center;
    line-height: 300px;
}
.son {
    display: inline-block;
    vertical-align: middle;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

2.css选择器及权重顺序

1.选择器类型：

• 标签选择器

   body,div,p,ul,li...
  1

• 类选择器

   class="p1"
   class="p2"
  1
  2

• ID选择器

   id="name",id="name_t"
  1

• 全局选择器

   *
  1

• 后代选择器

   #head .nav ul li
    /* 从父元素到子孙元素的选择器 */
  1
  2

• 群组选择器

   div,span,img {color:blue}
   /*即具有相同样式的标签分组显示*/
  1
  2

• 继承选择器

   div p
   /*两选择器用空格键分开*/
  1
  2

• 子选择器

   div>p
   /* 带大于号>*/
  1
  2

• 相邻兄弟选择器

   h1+p
   /*  带加号+ */
  1
  2

• 样式后面追加 !important

2.权重排序：

!important > 行内样式1000 > ID选择器100(#) > Class选择器10(.) > 类型选择器1(p/div) > 通配符0(*) > 自带样式 > 继承

3.如何快速地实现盒子的居中对齐？

在父元素中使用弹性盒模型，即display:flex，然后在需要居中的元素中使用margin:auto。

4.padding和margin的区别是什么？

两者的作用对象不同。
padding作用的是自身对象；
margin作用的是外部对象。

5.%和vm有什么区别？

百分比具有继承作用；
vm之和设别的屏幕宽度有关。

6.行内元素和块级元素有什么区别？

行内元素不能自动换行，不能使用width/height设置宽高，大小只能由内容撑开；
块级元素会独占一行，可以通过width/height设置宽高。

7.如何让谷歌浏览器适配更小的字体（默认最小是12px）？

使用缩放，例如transform:scale(0.8)来设置比12px更小的字体。

8.实现0.5px线条

transform：scale（0.5）
注意：全部缩放为0.5，高度需设置 200%；