2.CSS布局

 

1. 1盒子模型的宽度

（offsetwidth)=content宽度+padding左+pading右+boder左+border右 （不含margin）

1. 2 margin纵向重叠

指相邻的两个元素如果同时设置了margin-top和margin-bottom会发生重叠现象。

 

1. 3margin 负值

口诀：margin-top和,margin-left负值改变自身，margin-right和margin-bottom负值改变相邻的元素。

 

1. 4 对于BFC的理解

 

 

1.  5. 手写clearfix

.clearfix:after{

content:'';

display:table;

clear:both

}

1. 6.flex布局

flex-direction ：设置主轴方向，有column(列布局), row(水平方向，默认不设置就是水平方向)

flex-wrap:wrap ；设置换行，如果一行排列不下。可以设置换行

justify-content:flex在主轴上的位置 

align-item：控制在交叉轴上的位置

flex:值，表示每个flex项沿主轴的可用空间大小。

flex:flex_grow (扩张比例) flex_shrink(收缩系数) flex_basis(项目长度，水平布局为宽度，垂直布局为高度);

计算口诀：赚钱（扩张）的时候很公平，兄弟按比例分钱。亏钱（收缩）的时候不公平，兄弟按系数亏钱。

align-self:单独设置子元素的对齐方式，继承父元素的align-item。

 

 

 

1. 7.用flex布局画骰子

 

1.  8.用flex布局画出圣杯布局