CSS前端面试

rem、em、vh、px各自代表的含义？

px：绝对单位，页面按精确像素展示
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值
rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算
vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

盒模型

盒模型由内而外分别是：width+height(html元素)；padding(内边距);border(边框)；margin(外边距)。
盒模型分为：
怪异盒模型（IE盒模型）
使用属性：

box-sizing:border-box;//怪异盒模型
//width + height = html + border + padding

标准盒模型

box-sizing:context-box;//标准盒模型
//width + height = width + height 

弹性盒模型（flex）

display:flex;

poison 定位属性

相对定位 (position:relative;)
相较于原来的位置。相对定位会保留原来的位置，【不脱离文档流】。

绝对定位 (position:absolute;)
不保留原来的位置，【脱离文档流】。绝对定位若父级没有设置相对定位，则默认会以浏览器为基准变化，若父级设置了相对定位，则以父级为基准变化。

固定定位 (position:fixed;)
会一直固定在某个不位置，不随滚动条滚动而改变。【脱离文档流】

粘性定位 (position:sticky;)
会随着滚动条滚动，【脱离文档流】

flex属性

flex属性是 flex-grow、flex-shrink、flex-basis三个属性的缩写。

flex-grow： 定义元素的的放大比例

默认为0；即使存在剩余空间，也不会被放大
所有元素flex-grow都为1，等分所有空间，自动放大
当某个元素flex-grow为n，占的空间是flex-grow为1的n倍

我们通常将flex:1用作自适应布局，即flex:1 == flex-grow:1

flex-shrink： 定义元素的缩小比例

默认为1，即 如果空间不足，该元素将缩小；
所有元素的flex-shrink都为1：当空间不足时，缩小的比例相同；
flex-shrink为0：空间不足时，该元素不会缩小；
当某个元素flex-grow为n，空间不足时缩小的比例是flex-shrink为1的n倍。

flex-basis： 定义在分配多余空间之前，元素占的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值。

默认值为auto，即元素原本大小；
设置后元素将占据固定空间。（如flex-basis:100px;）

让元素水平垂直居中

1、定位 + margin
给父级设置相对定位。给子级设置绝对定位，并且给子级的top bottom left right 都设置为0，margin设置为auto。

2、定位 + margin负值
给父级设置相对定位。给子级设置绝对定位，并且给子级的top bottom 设置为50%，margin-left设置为子元素width的一半，margin-top设置为子元素height的一半。

以上两种方法都需要固定宽高，以下是几种不需要固定宽高的方法

---

3、定位 + transform
给父级设置相对定位。给子级设置绝对定位，并且给子级的top bottom 设置为50%，transform设置为translate(-50%，-50%)。

4、table布局
给父级设置display:table-cell;vertical-align:midlle;text-align:center;给子级设置display:inline-block;这样可以使所有为行内块元素的子级都可以水平垂直居中

5、flex布局
给父级设置display:flex;align-items:center;justify-content:center;

6、grid布局
给父级设置display:grid;align-items:center;justify-content:center;

页面适配的方法有哪些

1、根据不同根据不同的分辨率，加载不同的CSS样式文件

// 分辨率大于等于1680，大部分为1920的范围情况下，调用此css
if(window.screen.width >= 1680){document.write('<link rel="stylesheet" href="css/index_1920.css">');
}

2、媒体查询

/* 大屏幕 */
@media (min-width:1200px) {.container:{width:1000px;}
}