## 一、基本概念
盒子模型就是网页布局中的一种手段，包括边框（border）、外边距（margin）、内边距（padding）、网页元素（content）、宽（width）、高（height）等元素。
**要点：**
- Margin(外边距) - **清除边框外的区域，外边距是透明的。**
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - **清除内容周围的区域，内边距是透明的。**
- Content(内容) - 盒子的内容，显示文本和图像。
```
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
.parent {
width: 400px;
height: 400px;
background: #ccc;
}
.child1, .child2 {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 10px solid #000;
background: #f00;
}
```
## 二、盒模型的两种标准
**要点：**
- 标准模型中盒模型的宽高只是内容（content）的宽高
- IE模型中盒模型的宽高是内容（content）+填充（padding）+边框（border）的总宽高
## 三、CSS3 box-sizing 属性
box-sizing 是用于告诉浏览器如何计算一个元素的总宽度和总高度
- **标准盒模型 box-sizing: content-box**
<p> width = content width</p>
<p> height = content height</p>
- **IE盒模型 box-sizing: border-box**
<p> width = border + padding + content width</p>
<p> height = border + padding + content height</p>
```
<div class="parent">
<div class="child1 content-box"></div>
<div class="child2 border-box"></div>
</div>
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
```
## 四、margin折叠问题
css2.1盒子模型中规定：
> In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、padding或border分隔。
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，所结合成的外边距称为折叠外边距。折叠的结果按照如下规则计算：
1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3. 两个外边距一正一负时，折叠结果是两者的相加的和。
**产生折叠的必备条件：margin必须是邻接的!**
解决嵌套元素产生折叠问题的方法：
- 给父元素设置padding
- 给父元素设置透明border
```
.parent {
/* padding-top:1px; */
border: 1px solid rgba(0,0,0,0);
width: 400px;
height: 400px;
background: #ccc;
}
```
## 五、什么是BFC
### 1、BFC 定义
> BFC（Block formatting context）直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level Box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
**Box：css布局的基本单位**
Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。
Box盒子的类型：
- block-level box : display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
- inline-level box : display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
**Formatting Context**
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
### 2、如何创建BFC
- float的值不是none
- position的值不是static或者relative
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
### 3、BFC的布局规则
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
### 4、BFC的应用场景
**（1）利用BFC避免margin重叠**
- 解决嵌套元素margin重叠，父元素可选择添加以下样式之一
```
padding-top:1px;
border: 1px solid rgba(0,0,0,0);
display: inline-block;
display: table;
display: table-caption;
display: flex;
display: inline-flex;
float: left;
position: absolute;
overflow:hidden;
```
- 解决同级相邻元素margin重叠，任意相邻元素可选择添加以下样式之一
```
display:inline-block;
display:table-caption;
display:inline-flex;
```
**（2）自适应两栏布局**
- 要点：BFC的区域不会与float box重叠
```
<body>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</body>
.left {
float: left;
width: 200px;
height: 150px;
line-height: 150px;
text-align: center;
font-size: 40px;
background: #00f;
}
.right {
overflow: hidden;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 40px;
background: #f00;
}
```
**（3）清除浮动**
- 当我们不给父节点设置高度，同时给子节点设置了浮动的时候，就会发生高度塌陷，这个时候我们就要清除浮动
- 要点：计算BFC的高度时，浮动元素也参与计算
```
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
.parent {
overflow: hidden;
width: 300px;
border: 5px solid #f00;
}
.child {
float: left;
width:100px;
height: 100px;
border: 5px solid #00f;
}
```
- 前言
- 一、css垂直居中的几种实现方法
- 二、简单说一下盒模型，说下如何利用BFC解决外边距重叠的问题
- 三、说一说产生塌陷的原因以及清除浮动的几种方法
- 四、伪类和伪元素的区别？聊一下css选择器的优先级
- 五、css中的过渡和动画效果了解吗
- 六、弹性盒模型了解吗
- 七、简单说下BOM和DOM的区别
- 八、如何解决浏览器的兼容性问题？浏览器调优都用到过哪些方法
- 九、之前写过h5吗？有遇到过哪些兼容性问题？说下怎么解决的
- 十、h5是如何做移动端适配的？折行的时候如何实现不断行
- 十一、聊一聊js中实现数组拷贝的常用方法
- 十二、聊聊js中的数据类型，如何用js实现一个对象的深拷贝
- 十三、伪数组和数组的区别？相互转化的方法有哪些
- 十四、请介绍Js中有哪些循环遍历的方法，关于数组常用的方法有哪些
- 十五、js中的reduce了解吗？都用他解决过什么问题
- 十六、事件冒泡和捕获的执行顺序了解吗？什么是事件委托
- 十七、call和apply的区别是什么？caller和callee的区别有哪些
- 十八、javascript中的this都有哪些用法
- 十九、怎么理解js中的原型链？如何实现继承？实现继承常用的方式有哪些
- 二十、聊一聊js的作用域和作用域链
- 二十一、js的闭包了解吗？闭包的常见用法说一下
- 二十二、setTimeout和setInterval的运行机制了解吗
- 二十三、函数的柯里化了解吗？说下函数柯里化应用的场景
- 二十四、用js写一个ajax的原生实现方法
- 二十五、js如何实现跨域？聊一聊你之前用到过的方法
- 二十六、聊一下cookie、session和token三者的区别及使用
- 二十七、用js实现一下数组去重和排序，有哪些方法可以实现
- 二十八、写一个方法，统计一下html文档的元素包括元素的数量
- 二十九、用js实现一个省市级联效果
- 三十、用js实现一个轮播图效果，简单说下原理
- 三十一、请你实现一个大文件上传和断点续传
- 三十二、什么是模块化开发？谈下AMD、CMD、CommonJs和ES6的区别
- 三十三、es6了解吗？说几个常见的新特性，set和weakSet的区别是什么
- 三十四、解构赋值的用法了解吗？如何实现对象和数组的嵌套和重命名
- 三十五、谈谈你对promise的用法和理解
- 三十六、谈谈你对es6中的Generator函数的认识
- 三十七、谈一下async-await的实现原理
- 三十八、用js实现一下观察者模式？简单说一下原理
- 三十九、了解JavaScript中的装饰器吗？聊一下JS中的getter与setter的用法
- 四十、聊一下正则表达式里的常见用法