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样式文件文章来源：https://www.toymoban.com/news/detail-627498.html
// 分辨率大于等于1680，大部分为1920的范围情况下，调用此css
if(window.screen.width >= 1680){
document.write('<link rel="stylesheet" href="css/index_1920.css">');
}
2、媒体查询文章来源地址https://www.toymoban.com/news/detail-627498.html
/* 大屏幕 */
@media (min-width:1200px) {
.container:{
width:1000px;
}
}
到了这里，关于CSS前端面试的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
