1，margin重叠问题
块的上外边距跟下外边距，有时会合并为一个边距。其中合并的距离，由其中最大的边距值为准。这个现象称为 外边距重叠 。
如果没有边框border ，内边距padding ，行内内容，也没有创建 块级格式上下文(BFC)或清除浮动 ，内部元素也会根据上面的规则跟父元素发生外边距重叠问题。
2，margin负值问题
margin是允许设置负值的，对于负值的现象。当margin-top,margin-left这两个属性为负值时，他们会往上，左移动，同时如果上，左的元素跟该元素没有之间没有距离有，会发成重叠。有点类似相对定位。
如果是margin-bottom,margin-right这两个属性为负值时，它的右，下方元素会往它身上挤，没有距离时，也会发生重叠。
3，盒模型宽度计算
- offestWidth： 只读属性，返回元素的布局宽度，值是四舍五入后的整数。计算公式offsetWidth = 水平线上border + 水平线上padding + 内容宽度。语法const offsetWidth = element.offsetWidht;
- clientWidth： 只读属性，返回内部宽度。对于 内联元素 以及 没有设置css样式 的元素，其值为0。值是四舍五入后的整数。计算公式clientWidth = 水平线上padding + 内容宽度。语法const clientWidth = element.clientWidth;
- scrollWidth： 只读属性，元素内容宽度的一种度量，包括overflow上溢出的不可见区域的内容宽度。没有水平滚动时宽度跟 clientWidth 一样。语法const scrollWidth = element.scrollWidth;。
4，BFC理解与应用
块格式化上下文（block formatting context, bfc），它是一种影响块级元素布局的一种方法。
使用BFC后会产生一下效果：
包含内部浮动（元素）、排除外部浮动（外部元素的浮动影响不到它）、防止外边距重叠（margin纵向重叠问题）。
触发BFC的方法有很多种，常用的方法有：
根元素（
<html>）、设置浮动元素（float值不为node）、绝对定位元素（position值为absolute或fixed）、overflow值不为【visible，clip】的块元素、display为【inline-block，table-cell，flex，grid等（由于比较多，可自行查看）】.
5，float布局之圣杯布局，双飞翼布局
圣杯布局和双飞翼布局，两者功能相同，都是为了实现，两侧固定宽度，中间宽度自适应的三栏布局。
其中的特点有如下：
1，两侧宽度固定，中间宽度自适应
2，重要内容优先，以便先行渲染（例如编写代码时，先写中间元素(center)，再写左边(left)跟右边(right)的）。
3，允许三列中任意一列成为最高列。
值得注意的是，虽然圣杯布局跟双飞翼布局功能相同，但是html的布局还是差异。
下面是示例代码。
6，清除浮动
.clearfix:after {
content: '';
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* 兼容 IE 低版本 */
}
7，flex布局
常用语法回顾，并且使用flex画一个筛子。
注意：设置flex布局之后，子元素的float、clear、vertical-align 属性将消失。
8，css定位，水平垂直居中
9，css图文样式，line-height继承问题
在说line-height继承之前，先罗列一下默认继承的属性：
- 所有元素可继承：visibility 和 cursor
- 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
- 块级元素可继承：text-indent和text-align
- 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
- 表格元素可继承：border-collapse
关于样式的继承，可以设置关键字 initial,inherit,unset,revert 来实现该属性是否继承。可参考文档： github.com/chokcoco/iC…
言归正传， 现在我们来讲讲line-height继承中需要注意的问题：
我们知道line-height的值可以设置为百分比，常规数值，以及带单位的数值
- 如果line-height的值是百分比或者带单位的数值，子元素就会继承计算后的值
- 如果值是 常规数值 ，则会继承这个常规数值
- codepen.io/kejinbo/pen…
10，响应式布局
我们先了解一下，css中的单位，以及单位的含义
- px：物理像素（绝对长度单位，与其他东西无关。）
- em：相对于当前元素的font-size尺寸，如：当前 font-size: 16px; 则1em = 16px; 同理 1.5em = 24px 。
- rem：相对于根元素
<html>的font-size，不管当前元素的font-size是什么都与他无关。换算规则跟 em 的一样。 - vw/vh：视口宽度/高度的1%。
