CSS基础之盒子模型（标准盒模型、怪异盒模型、弹性盒）

/--------------------------------------------标准盒子-------------------------------------------/

1.标准盒子(w3c盒子)：box-sizing:content-box;

自己定义的width是内容区宽度，加了内间距和边框线会导致盒子变大

总宽：width+2*padding+2*border

/---------------------------------------------怪异盒子-------------------------------------------/

1.怪异盒子（IE盒子）：box-sizing:border-box;

自己定义的width是盒子宽度，加了内间距和边框线会导致内容区变小

总宽=width

内容区宽=总宽-2*padding-2*border

/---------------------------------------------弹性盒子------------------------------------------/

1.主要作用：控制子元素布局

2.形成弹性盒布局的语句：display：flex；

3.特点：

1）父元素一旦变成弹性盒子，子元素默认横向排列

2）父元素一旦变成弹性盒子，子元素无论是什么类型，都可以设置宽高

3）父元素一旦变成弹性盒，margin：auto；上下左右都会生效

4）父元素一旦变成弹性盒子，子元素多不会超出也不会换行，而是会挤压

4.弹性盒子关于轴的概念

1）主轴：子元素默认沿着主轴做排列

2）设置主轴的方向：

a.纵向：flex-direction：；

column：从上到下

column-reverse：从下到上

b.横向：flex-direction：；

row：从左到右（默认）

row-reverse：从右向左

3）设置子元素在主轴的对齐方式：justify-content：；

a.flex-start：起点对齐

b.flex-end：终点对齐

c.center：中心对齐

d.space-between:两端对齐

e.space-around：中间元素的间距是贴边元素的2倍

f.space-evenly：均分，所有间距都是一样的

4）设置子元素在侧轴的对齐方式：align-items：；

a.flex-start：起点对齐

b.flex-end：终点对齐

c.center：中心对齐

d.baseline：基线对齐

e.strech（默认值）：拉伸（不设置宽或者不设高）

5）设置子元素换行：flex-wrap：wrap；

a.wrap：换行

b.nowrap：不换行（默认值）

c.wrap-reverse：反向换行

6）设置多行的对齐方式：align-content：；

a.flex-start：起点对齐行与行之间没有间距

b.flex-end：终点对齐行与行之间没有间距

c.center：中点对齐行与行之间没有间距

d.space-between：两端对齐，第一行最后一行贴边，其余自动分配

7）设置在子元素上的属性：

1）align-self：；控制子元素自己在侧轴上的对齐方式

a.flex-start：起点对齐

b.flex-end：终点对齐

c.center：中心对齐

d.baseline：基线对齐

e.strech（默认值）：拉伸（不设置宽或者不设高）

2）order：控制子元素的排列顺序，值越大越靠后，支持负数，不带单位

3）flex-shrink：；

0：控制子元素不受挤压，超出

1：控制子元素受挤压（默认值）

4）flex：数字；用来分配剩余空间写几就让这个元素站剩余空间的几份