高频CSS面试题css中有两种盒子模型，分别是标准盒模型（W3C）和怪异盒模型（IE）。标准盒模型：标准盒子模

两种盒子模型分别说一下

盒子模型包括: content(内容)、padding（内边距）、margin（外边距）、border（边框）

css中有两种盒子模型，分别是标准盒模型（W3C）和怪异盒模型（IE）。

两个盒子模型的区别：

标准盒模型： 标准盒子模型的width和height 只表示 content（内容）的宽高。
怪异盒模型： 怪异盒子模型的width和height，表示 padding、border、content三个整体的宽高。

css3中的一个属性： box-sizing 可以指定盒子模型

box-sizing：content-box 指标准盒模型，默认的
box-sizing：border-box 指怪异盒模型。

水平居中垂直居中垂直水平居中

水平居中

方法一：首先父元素是块级元素（如果不是，设置为块级元素），父元素 text-algin：center
方法二：flex布局，给父元素添加 display: flex; justify-content: center;

垂直居中

父元素高度没写死情况下
- 用 padding值撑起来就是垂直居中了
父元素高度写死情况下
- 高度多少， line-height 就多少（一般用于单行文字）
- 用flex布局，主轴设为 column ，然后写 justify-content: center;
- 用定位，子绝父相后，给子元素设置 top:50% ; transform: translateY(-50%);

垂直水平居中

定位，子绝父相后，给子元素设置 top:50%;left:50%,tarnsorm:transloate(-50%,-50%)
flex布局， align-items: center; justify-content: center;

flex怎么用，常用属性有哪些？

flexbox 是由俩个轴来排列的，默认主轴是水平的

justify-content :center 主轴的居中
align-items ： center 侧轴居中
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center：居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
flex-direction：row 默认主轴为 row （row-reverse、column、column-reverse ）
flex-wrap：wrap 默认是不换行 (nowrap 、 wrap 、wrap-reverse)

flex:1 表示什么

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

flex-grow：定义项目的的放大比例；
flex-shrink: 定义项目的缩小比例；
flex-basis: 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间，

flex：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。

BFC是什么 / BFC怎么解决各种问题

（不要回答BFC是什么，举例子说明什么是bfc）

解： BFC 中文全称：块级格式上下文，它是一种规则

创建、触发BFC的方法：

position：absolute 或 fixed
float 不是none
overflow 不是 visible
display： inline-block 或者 flex

BFC的作用：

可以阻止元素被浮动的元素覆盖（可以做俩栏布局）
可以包裹住浮动的元素--即清除浮动
解决同一个区域垂直margin（外边距）塌陷（合并）的问题

外边距塌陷（合并）问题

什么是外边距塌陷

外边距塌陷也成为外边距合并，是指两个相邻的块级元素的外边距，组合在一起变成了单个外边距，不过只有上下外边距才会有塌陷。

解决外边距塌陷

1.使用绝对定位方式，使用相对定位，注意只能用top 不能用margin-top
2.设定为行内块元素，（前提元素必须要有宽高）
3.触发BFC
4.添加内边距padding
5.添加边框

CSS选择器优先级

写得越具体优先级越高
写在后面，覆盖写在前面的（就近原则）
!import 最高，但少用

清除浮动

方法一: 添加伪元素

.clearfix{
  content:'';
  display:block / table;
  clear:both;
}

// 把 .clearfix 加到容器上，里面的子元素就会清除浮动

方法二：创建、触发 BFC

px、em、rem、vw、百分比区别

px

是固定单位，其他几种都是相对单位

当我们把电脑屏幕的分辨率调为1440*900时，css里设置的1px实际的物理尺寸就是屏幕宽度的1/1440 -

em

默认字体大小的倍数。继承于父亲的大小。

如别给该元素设置 2em ，那么是根据父亲的字体大小来计算的，相当于父亲字体大小的2倍。

rem

根元素 HTML 字体大小的倍数。

比如：一个元素设置 width：2rem 表示该元素宽度为 html 节点的font-size 大小的2倍。如果html未设置font-size的大小，默认是16px。需要注意的是chrome浏览器下文字最小是12px，设置低于12px的值最终也会展示12px。

1vw

代表浏览器视口宽度的1%

1%

对不同属性有不同的含义。

font-size：200% 和 font-size：2em 一样，表示字体大小是默认（继承父亲）字体大小的2倍。

line-height：200%表示行高是自己字体大小的2倍 (注意这是一个关于行高继承的坑)

width：100% 根据盒子模型来判断。 -

高频CSS面试题