【面试】前端基础（二）

CSS

---

Flex

画色子

box设置flex，设置主轴的对齐方式，再设置交叉轴的对齐方式。个别的需要分成多列，单独设置item的样式

要画多少个点就加多少个item

<box><item></item></box>

从一个色子开始：

item1:

box:
justify-content: center;
align-items: center;
或者
box:
justify-content: center;
item1:
align-self: center;

item2:

box:
(flex-direction: column;)
align-items: center;
justify-content: space-between;

item3:

box:
justify-content: center;
item1:
align-self: flex-start;
item2:
align-self: center;
item3:
align-self: flex-end;

item4:

分成两列

box:
display: flex;
flex-direction: column;
justify-content: space-between;
cul:
display: flex;
justify-content: space-between;

item5:

分成三列

其他不变
cul:nth-child(2):
justify-content: center;

item6:

分成三列

样式设置和item4一样

定位

分别根据什么来定位

relative:根据自身，并原来的位置会被占据

absolute:根据最近一层的定位元素进行定位（absolute/relative/fixed/body）

居中对齐

水平居中

inline元素

text-align:center

block元素

margin:auto（要有宽度）

absolute元素

left50%+margin-left/transform:translateX-50%

flex

父元素设置flex，justify-content:center

垂直居中

inline元素

line-height:height

absolute元素

top:50%+margin-top/transform:translateY-50%

或top,left,bottom,right都设置成0+margin:auto（不用考虑兼容性）

flex

父元素设置flex，align-items:center

line-height的继承

父元素设置了line-height:

设置的是数值->直接继承

设置的是比例->继承该比例并乘以子元素的font-size

设置的是百分比->乘以父元素的数值->继承该数值

下列代码中，p的行高为？

div{
    font-size:20px;
    /*1*/line-height:200%;
    /*2*/line-height:20px;
    /*3*/line-height:1.5;
}
div p{
    font-size:16px;
}

1.40px

2.20px

3.24px(16x1.5)

响应式和屏幕适配

rem

回答是什么的问题。

rem是一种单位，类似于px，em。但计算方式不同。

rem转换成px的值，是根据当前页面的根元素的font-size的值转换的。

所以将页面所有需要设置长度宽度的元素单位设置成rem，再根据屏幕视口宽改变根元素的font-size，就能实现自适应。

栅格布局

将页面分为多个列，每块区域的内容按行展示。

使用%作单位。

比如将页面分为12列，那么占一列的宽度就是8.3333%，占两列的宽度是16.66667%

要想空出一列，margin-left:8.33333%

要想将一列推到前面：left:8.3333%

由于要根据不同屏幕适配，代码非常的长且重复，网上搜一下都有。使用flex也可以实现。

bootstrap就是使用栅格系统，理解后使用它会更容易。

使用rem实现屏幕适配

监听页面的缩放事件，获取视口宽并计算对应的font-size

以视口宽为375px为例，设置html的font-size为20px;

则当视口宽为750px时，html的font-size要设置为40px才能使元素等比放大。

那么公式为
$$视口宽/375\ast 20$$
那么代码为

window.onresize=()=>{
    var docEl = document.documentElement
    docEL.style.fontSize = docEl.clientWidth/375*20
}

注意视口宽不一定是用clientWidth，考虑兼容性可以写一个函数求视口宽。

元素的单位要使用rem而不是px了