1、面试官：说说你对盒子模型的理解?

CSS盒模型本质上是一个盒子，它包括：content、padding、border、margin。CSS 中的盒子模型包括IE 盒子模型和标准的 W3C 盒子模型。

在标准的盒子模型中，width 指 content 部分的宽度。

在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度

故在计算盒子的宽度时存在差异：

标准盒模型： 一个块的总宽度= width+margin(左右)+padding(左右)+border(左右)

怪异盒模型： 一个块的总宽度= width+margin（左右）（既 width 已经包含了 padding 和 border值）

2、box-sizing属性

CSS中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

box-sizing:content-box|border-box|inherit:

content-box：元素的 width/height 不包含padding，border，。【标准盒子模型】

border-box：元素的 width/height 包含 padding，border。【IE 盒子模型】

inherit：继承父元素的 box-sizing 值。

3、面试官：css选择器有哪些？优先级？哪些属性可以继承？

关于css属性选择器常用的有：

id选择器(#myid)

类选择器(.myclass)

属性选择器(a[rel="external"])

伪类选择器(a:hover, li:nth-child)

标签选择器(div, h1,p)

兄弟选择器（h1 + p）

子选择器(ul > li)

后代选择器(li a)

通配符选择器(*)

优先级：

!important

内联样式（1000）

ID选择器（0100）

类选择器/属性选择器/伪类选择器（0010）

元素选择器/伪元素选择器（0001）

关系选择器/通配符选择器（0000）

带!important 标记的样式属性优先级最高； 样式表的来源相同时：!important> 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

继承属性：

字体系列属性

font-familyfont-weightfont-sizefont-style字体字体的粗细字体的尺寸字体的风格

文本系列属性

text-indenttext-alignline-heightdirectioncolor文本缩进文本水平设置行高书写方向文本颜色

元素可见性visibility等

无继承的属性：

display

文本属性：vertical-align、text-decoration、

背景属性、盒子模型的属性、定位属性等

4、面试官：说说em/px/rem/vh/vw区别?

px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值

rem：相对单位，相对的只是HTML根元素font-size的值

vw，就是根据窗口的宽度，分成100等份，100vw就表示满宽，同理，vh则为窗口的高度vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

5、面试官：css中，有哪些方式可以隐藏页面元素？区别?

通过css实现隐藏元素方法有如下：

1、display:none 将元素设置为display:none后，元素在页面上将彻底消失，导致浏览器的重排和重绘，无法响应点击事件。

2、visibility:hidden 仅仅是隐藏该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘，无法响应点击事件。

3、opacity:0 将元素的透明度设置为0后，元素也是隐藏的，不会引发重排，一般情况下也会引发重绘，可以响应点击事件

4、设置height、width模型属性为0 将元素的height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素，无法响应点击事件

5、position:absolute 将元素移出可视区域 top: -9999px; left:-9999px; 特点：元素不可见，不影响页面布局

6、面试官：谈谈你对BFC的理解？

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

1、内部的盒子会在垂直方向上一个接一个的放置

2、对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。

3、每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此

4、BFC的区域不会与float的元素区域重叠

5、计算BFC的高度时，浮动子元素也参与计算

6、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

如何创建BFC？

1、根元素，即HTML元素

2、float的值不为none

3、position为absolute或fixed

4、display的值为inline-block、table-cell、table-caption

5、overflow的值不为visible

BFC应用场景

1、防止margin重叠（塌陷）

2、清除内部浮动

3、自适应多栏布局等

7、面试官：元素水平垂直居中的方法有哪些？

一、水平居中

对于行内元素 : text-align: center;

对于确定宽度的块级元素：

（1）width和margin实现。margin: 0 auto;

（2）绝对定位和margin-left: (父width - 子width）/2,前提是父元素position: relative

对于宽度未知的块级元素

（1）inline-block实现水平居中方法。子元素display：inline-block和父元素text-align:center实现水平居中。

（2）绝对定位+transform，translateX可以移动本身元素的50%。

（3）flex布局父元素使用justify-content:center

（4）table标签配合margin左右auto实现水平居中。使用table标签，再通过给该标签添加左右margin为auto。

二、垂直居中

1、利用 line-height 实现居中，这种方法适合纯文字类

2、通过设置父容器 相对定位 ，子级设置绝对定位，标签通过margin实现自适应居中

3、弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中

4、父级设置相对定位，子级设置绝对定位，并且通过位移 transform 实现

5、table 布局，父级通过转换成表格形式，然后子级设置 vertical-align 实现。

8、面试官：如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

两栏布局：

两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满。

实现思路1：

1、float 左浮左边栏

2、使用 margin-left 撑出内容块做内容展示

3、级元素添加BFC，防止下方元素飞到上方内容，如overflow: hidden

实现思路2：

flex弹性布局

父盒子display: flex，左侧盒子写入宽度，右侧盒子flex: 1占一份

三栏布局

三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之

实现思路：

1、两边使用 float，中间使用 margin

2、使用 absolute，中间使用 margin

3、圣杯布局，利用margin负值法(详细解释)

使用圣杯布局首先需要在center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度为百分之百，这样中间盒子独占一行，左右盒子被挤到下方，让左边的盒子上去要设置margin-left:-100%，让右边的盒子上去要设置margin-left: 负自身宽度

4、使用 display: table 实现

5、使用flex实现 将父级设置为display: flex; justify-content: space-between;即可

6、grid网格布局

设置display: grid; width: 100%; grid-template-columns: 300px auto 300px;即可

9、面试官：说说flexbox（弹性盒布局模型）,以及适用场景？

关于flex常用的属性，我们可以划分为容器属性和容器成员属性，

一、容器属性

flex-direction：决定主轴的方向flex-direction: row | row-reverse |column | column-reverse;

flex-wrap：决定换行规则 flex-wrap: nowrap | wrap |wrap-reverse;

flex-flow： flex-direction属性和flex-wrap属性的简写形式

justify-content：对其方式，水平主轴对齐方式

1、space-between：两端对齐，项目之间的间隔都相等

2、space-around：两个项目两侧间隔相等

align-items：对齐方式，竖直轴线方向

align-content：定义了多根轴线的对齐方式

二、项目的属性（元素的属性）：

order属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0

flex-grow属性：定义项目的放大比例，默认为0，即使存在空间，也不会放大

flex-shrink属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果 定义个item 的 flow-shrink 为 0，则为不缩小

flex-basis属性：定义了在分配多余的空间，项目占据的空间。

flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。

align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖

10、flex实现div左上角、中间、左下角布局css

父级设置 子级利用绝对定位，自由移动到页面的不同位置，例左上角。

display:flex;

position:relative;

flex-direction:row;

justify-content:space-around;

align-items:center;

11、面试官：清除浮动的方式有哪几种？

1、添加额外标签 给父级添加