前端高频面试题总结（CSS部分）

1.盒子模型

2.flex布局（弹性布局）

3.positon基础

4.页面隐藏一个元素的几个方法

5.css垂直居中

6.css选择器

1.盒子模型

用来封装周围的html元素，包括margin（外边距），padding（内边距），border（边框），content（内容）

2.flex布局（弹性布局）

displax:flex

flex-direction：决定主轴方向（row：按行排列（默认），column：按列排列）

flex-warp：定义如何换行

justify-content：主轴对齐方式（center，space-around，space-between）

align-items：交叉轴对其方式

3.position基础

通过改变：top、bottom、left、right

①static：自动定位（静态定位）

②relative：相对定位，相对于自己本身的位置

③absolute：绝对定位，如果没有祖先元素，则以浏览器定位；如果有祖先元素，则以最近的祖先元素为参考点定位，并且层叠性越高，在最上面

④fixed：固定定位

4.页面隐藏一个元素的方法

display:none

visibility:hidden

两者的区别，display:none的主体的其他属性都不会渲染，而visibility:hidden仅将主体变为透明，它的其他属性还是存在的。

5.css垂直居中

①verticle-align:middle

②display:flex

    justify-content:center

    align-items:center

③position:relative

    transform:translateY(-50%)

6.css选择器

通配符选择器

标签选择器

类选择器

ID选择器

属性选择器

伪类选择器

选择器的优先级:内联样式>id>类>标签