1、盒子模型

1.1、border-box

1. content-box；内容的宽度高度，实际占位是内容+内边距+边框

2. border-box：内容+内边距+边框，和元素的实际占位一样
3. 怪异盒模型的宽度高度按照border-box来算
4. 标准盒模型按照content-box来算

2、常用单位

1. em根据当前元素的字体，1em = 1字体，如果没有设置，则默认是16px
2. rem根据html的字体
3. vh vw是将当前的屏幕分成100份，1份就是1vw/vh

3、外边距叠加

如图

1. 普通流盒子，相邻兄弟元素外边距叠加，父元素和第一个和最后一个一个子元素外边距叠加
2. 给父元素添加border，消除了父元素和子元素的外边距叠加，添加overflow：hidder一样效果

3. 给蓝色元素添加display:inline-block

3.1、避免外边距叠加

• 浮动元素不会与任何元素发生叠加，也包括它的子元素
• 创建了BFC的元素不会和它的子元素发生外边距叠加
• 绝对定位元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
• inline-block元素和其他任何元素之间不发生外边距叠加，也包括它的子元素

3.1、避免父元素高度塌陷

1. 如图-父元素没有设置高度，子元素浮动，则父元素感度塌陷

3.2、自适应两栏布局

1. 如图，父元素清楚浮动
2. 子元素一个设置浮动定宽，一个设置BFC,不定宽。
3. 因为浮动元素不会和BFC重叠

居中

1、块级元素水平居中

margin: 0 auto

1. 表示设置上下外边距为 0，左右外边距自动计算。
2. 在水平方向上，左右外边距会自动计算为相等的值，从而将元素水平居中对齐。

2、块级元素垂直居中

2.1 使用绝对定位

1. 父元素设置position:relative