day08:怪异盒模型+弹性布局

一、怪异盒模型

1.怪异盒模型的border和padding是内嵌的  不增加盒模型面积

2.如果内部空间不够 会向外扩展

#second{

            box-sizing: border-box;

        }

 

 二、弹性布局

1.排列方式

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

2.是否换行

flex-wrap: wrap;

3.水平方向对齐方式

justify-content: flex-start;

justify-content: flex-end;

justify-content: space-around;

justify-content: space-between;

4.垂直方向对其方式

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

5.多行的对齐方式

flex-wrap: wrap;

align-content: stretch;