盒子模型宽度计算
offsetWidth=(内容宽度+内边距+边框),无外边距
margin纵向重叠问题
相邻元素的margin-top和margin-bottom会发生重叠
空白内容的<p>标签也会重叠
margin负值问题
margin-top和margin-left负值,元素向上、向左移动
margin-right负值，右侧元素左移,自身不受影响
margin-bottom负值,下方元素上衣,自身不受影响
什么是BFC?如何应用?
Block format context，块级格式化上下文
一块独立渲染区域,内部元素的渲染不会影响边界以外的元素
形成BFC的常见条件
float不是none
position是absolute或fixed
overflow不是visible
display是flex inline-block等
圣杯布局
通过padding为左右留白
双飞翼布局
通过maring为左右留白
手写clearfix
.clearfix:after {
content: ' ';
display:table;
clear:both
}
圣杯布局和双飞翼布局目的：
三栏布局,中间一栏最先加载渲染
两侧内容固定,中间内容随着官渡自适应
flex布局
常用语法回顾：
flex-direciton 主轴方向 可以是横向也可以是纵向
jusify-content 横向
align-items 纵向
flex-wrap 是否换行
align-self 子元素在交叉轴开始对其
定位
relative 依据自身定位
absolut 依据最近一层的定位元素定位
水平居中
inline元素:text-align:center
block元素:margin:auto
absolute元素:left:50% + margin-left负值
垂直居中
inline元素:line-height的值等于height值
absolute元素:top50% + margin-top负值
absolute元素:transform(-50%,-50%)
absolute元素:top,left,bottom,right =0 +margin:auto
