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 都设置为0margin设置为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;
	}
}