高频CSS面试题

height: 100px;
background-color: pink;

}
.center{
overflow: hidden;
/* 如果不写，center的width和wrapper的width一样 */
height: 100px;
background-color: yellow;
}

![截屏2023-08-20 上午3.00.23.png](https://img-blog.csdnimg.cn/img_convert/48252d136a6cc83ecb7bf9e5f1117f46.webp?x-oss-process=image/format,png)


### 居中


定宽高


* absolute+负margin
* absolute+margin auto
* absolute+calc 不定宽高
* absolute+transform
* lineheight
* writing-mode
* table
* css-table
* flex
* grid


#### absolute+负margin

.father {
position: relative;
}
.son {
position: absolute;
left: 50%;
top: 50%;
margin-left: -(父元素宽度-子元素宽度)/2 px;
margin-top: -(父元素高度-子元素高度)/2 px;
}

#### absolute+auto

.father{
position: relative;
width: 200px;
height: 200px;
background-color: red;
}
.son{
background-color: black;
position: absolute;
width: 100px;
height: 100px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}

#### absolute+cale

.father {
width: 200px;
height: 200px;
position: relative;
}
.son {
width: 100px;
height: 100px;
position: absolute;
top:cale(50% - 50px);
left:cale(50% - 50px);
}

#### absollute+transform

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

#### flex

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

#### grid

.father {
display: grid;
}
.son {
justify-self: center;
align-self: center;
}

### 一些概念


* 屏幕尺寸：用对角来计算。1英寸=2.54厘米  ![](https://img-blog.csdnimg.cn/img_convert/6ba8f89766b33bb1c77c8a56eb56dc70.webp?x-oss-process=image/format,png)
* 像素：硬件和软件所能控制的最小单位。
* 屏幕分辨率：一个屏幕具体由多少个像素点组成
* 物理像素：设备的像素点个数
* 逻辑像素：让n个像素当一个像素使用
* 视觉视口  ![](https://img-blog.csdnimg.cn/img_convert/7acdf033a0218b863d990a3d7bd56219.webp?x-oss-process=image/format,png)
* 理想视口：所谓理想视口，即页面绘制区域可以完美适配设备宽度的视口大小，不需要出现滚动条即可正常查看网站的所有内容，且文字图片清晰，如所有iphone的理想视口宽度都为320px，安卓设备的理想视口有320px、360px等等。 width=device-width 宽度等于屏幕宽度 initial-scale=1缩放等于1 maximum-scale=2最大缩放等于2 minimum-scale=0.5最小缩放等于0.5 user-scalable=no不允许缩放

### 移动端适配方案


#### rem

但这样我们会发现在写布局的时候会非常复杂，也就是你需要自己手动去计算一下对应的rem值，比如上面的font-size设计稿上是20px，那我们就要计算一下20px对应的rem是多少，按我们上面的规则，1px = 1/37.5rem，所以20px应该对应20/37.5 = 0.53rem。所以这种方案我们通常搭配着CSS预处理器使用。 rem.less

@device-width:375;
@rem:(@device-width/10rem)

然后将@rem配置成less全局变量

font-size:(24/@rem)

##### 特点


* 适配原理稍复杂
* 需要使用JS
* 设计稿标注的px换算到rem
* 方案灵活，既能实现整体缩放，又能实现局部不缩放


#### vw、vh适配


rem.less

@device-width:375;
@vw:(100vm/@device-width)

font-size: 16*@vw

##### 特点


* 适配原理简单
* 不需要JS即可适配
* 设计稿标注的px换算到vw
* 方案灵活，既然实现整体缩放，又能实现局部不缩放


#### px

export function initViewport() {
const width = 375; // 设计稿宽度
const scale = window.innerWidth / width
// console.log(‘scale’, scale)
let meta = document.querySelector(‘meta[name=viewport]’)
let content = width=${width}, init-scale=${scale}, user-scalable=no
if(!meta) {
meta = document.createElement(‘meta’)
meta.setAttribute(‘name’, ‘viewport’)
document.head.appendChild(meta)
}
meta.setAttribute(‘content’, content)
}

* 适配原理简单
* 需要JS
* 无需转换
* 方案死板，只能实现页面级别肢体缩放


### CSS3动画


CSS3动画分为transition、animation、transform


#### transition（过度）

transition: transition-property transition-duration transitino-timing-function transition-delay

包含四个属性 transition-property:执行变换的属性 transition-duration：变换延续的时间 transitino-timing-function：在延续的时间段变换的速率变化 transition-delay：变换延迟时间


##### transitino-timing-function具体值


* linear 缺点：
* 不能重复
* height：auto不会产生动画效果
* 不支持所有的属性


##### 支持的属性


* background-color
* background-position
* border-color
* border-width
* border-spacing
* bottom
* clip
* color
* font-size
* font-weight
* height
* left
* letter-spacing
* line-height
* margin
* max-height
* max-width
* min-height
* min-width


#### animation


keyframes规则用于定义动画的每个阶段。通过keyframe规则，可以指定动画的每个关键帧。

@keyframes example{
0% {left: 0; top:0px;}
50% {left:200px; top:200px;}
100% {left: 0px; top:0px;}
}
div {
animation-name: example;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction:alternate;
animation-play-state:running;
}

##### 详细属性


* animation-name:指定应用的动画名称
* animation-duration：指定动画的持续时间
* animation-timing-function：指定动画的速度曲线
* animation-delay: 指定动画开始之前的延长时间
* animation-interation-count: 指定动画应该重复的速度
* animation-direction: 指定动画的方向