一、盒模型

盒模型分为两种，为w3c标准盒模型和IE盒模型

盒模型的组成：是由content（内容区）、padding（填充区）、border（边框区）、margin（外边距区）这四个部分组成！

标准盒模型的大小

我们通过实验来探究标准盒模型的大小，上代码！

 <div class="box"></div>
.box{
    width: 300px;
    height: 300px;
    padding: 10px;
    border:10px solid black;
    margin: 10px;
    background-color: green;
}

W3C盒模型的宽度或者高度计算方式为：width/height = content

IE怪异盒模型的大小

 <input type="submit" class="box" />
.box{
	width: 300px;
	height: 300px;
	padding: 10px;
	border:10px solid black;
	margin: 10px;
	background-color: green;
	}

IE盒模型的宽度或者高度计算方式为：width/height = content + padding + border

二、css选择器优先级

对于选择器的优先级：

!important
内联样式style=""
ID选择器#id
类选择器/属性选择器/伪类选择器.class.active[href=""]
元素选择器/关系选择器/伪元素选择器html+div>span::after
通配符选择器*

注意事项：

!important声明的样式的优先级最高；
如果优先级相同，则最后出现的样式生效；
继承得到的样式的优先级最低；
通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；

display:none与visibility:hidden的区别

这两个属性都是让元素隐藏，不可见。两者区别如下：

（1）在渲染树中

display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；
visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。

三、水平垂直居中

<div class="box">
  <div class="child">水平垂直居中</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: flex;
  align-items: center; // 纵轴对齐方式，默认是纵轴 子元素垂直居中
  justify-content: center; //纵轴对齐方式，默认是纵轴
}
.child {
  background: red;
}  
</style>

四、css3新特性

border-radius 圆角
text-shadow文字阴影
animation 动画
transform拉伸，压缩，旋转，偏移等变换
transition过渡效果 transition-duration：过渡的持续时间

五、绝对定位和相对定位

绝对定位 `position: absolute`

绝对定位是以父元素的左上角原点为定位基准点
会脱离文档流

相对定位`position:relative`

相对于被定位元素在父级内容区中的上一个元素进行偏移），无父级则以BODY的左上角为原始点。
不会脱离文档流

六、为什么要清除浮动？清除浮动的几种方式，各自的优缺点?

子元素float脱离文档流后，父元素高度塌陷问题
垂直方向上margin塌陷问题
父级div定义height
结尾处加空div标签clear:both
父级div定义伪类:after和zoom
父级div定义overflow:hidden
父级div也浮动，需要定义宽度
结尾处加br标签clear:both
比较好的是第3种方式

七、重排与重绘

重绘（Repaint）概念

当一个元素的外观发生改变，但是没有改变布局，重新把元素的外观绘制出来的过程，叫做重绘。

例如：元素的填充颜色

重排/回流（Reflow）概念

重新生成布局，重新排列元素。

『重绘』不一定会出现『重排』，『重排』必然会出现『重绘』。

下面情况会发生重排：

页面初始化，这是开销最大的一次重排
添加/删除可见的DOM元素
改变元素位置
改变元素尺寸，比如边距、填充、边框、宽度和高度等
改变元素内容，比如文字数量，图片大小等
改变元素字体大小
变浏览器窗口尺寸，比如resize事件发生时
查询某些属性或调用某些计算方法：offsetWidth、offsetHeight等，除此之外，当我们调用 getComputedStyle方法，或者IE里的 currentStyle 时，也会触发重排，原理是一样的，都为求一个“即时性”和“准确性”。

八、position 属性的值有哪些及其区别

固定定位 fixed：

元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。

相对定位 relative：

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位 absolute：

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

粘性定位 sticky：

元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

默认定位 Static：

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit: 规定应该从父元素继承 position 属性的值。

九、如何创建块级格式化上下文(block formatting context),BFC有什么用?

创建规则：
- 根元素
- 浮动元素（float不取值为none）
- 绝对定位元素（position取值为absolute或fixed）
- display取值为inline-block、table-cell、table-caption、flex、inline-flex之一的元素
- overflow不取值为visible的元素
作用：
- 可以包含浮动元素
- 不被浮动元素覆盖
- 阻止父子元素的margin折叠

css高频面试题