day15-16

目录

1.盒模型

1.分类：

1.标准盒模型

2.怪异盒模型

3.转换

2.弹性盒子

1.作用

2.特点

3.使用

1.主轴排列方式

2.主轴对齐方式

3.子项在Y轴（交叉轴 侧轴）的对齐方式------单行

4.换行( flex-wrap)

5.多行子项在y轴对齐方式

6.margin:auto原理

子项添加

1.align-self------子项在垂直方法的排列方式

2.order:n;--------子项的排列顺序

3.子项扩展flex-grow

4.子项收缩flex-shrink

5.子项的长度flex-basis

3.多列

---

1.盒模型

1.分类：

1.标准盒模型

组成：content(width+height)+padding+border+margin

宽度：width+padding左右+border左右

content=width，此处width指的是内容宽度而非整个盒模型

2.怪异盒模型

组成：content+padding+border+margin

宽度：width=content(自动压缩后的宽度)+padding左右+border左右

content<width,是它的组成部分，这里width指的是整个盒模型宽度，height同理

3.转换

box-sizing:content-box;--------转换为标准盒模型（默认值）

box-sizing:border-box;---------转换为怪异盒模型

特点：content宽高自动压缩

标准盒模型，width定义的是content的宽（height同理），但怪异盒模型，width定义的是content+左右padding+左右border的总和，因此怪异盒模型可在实际应用中随意调整padding和border的值，基本不会影响盒子整体的大小，也就不会影响其他的内容布局。

2.弹性盒子

1.作用

概念：

  弹性盒模型的核心思想是赋予父元素一种超能力，让父元素对子元素拥有掌控力：

- 控制子元素的尺寸

- 控制子元素的位置

- 控制子元素的排序

- 控制子元素之间的空白

作用：

用来控制子元素的排列方式

关键词：

容器：父元素

项目（子项）：子元素

2.特点

1.使所有子元素横向排列；

2.使所有子元素默认不换行（子元素比较少按照自己定义的样式横向排列，过多出现自动压缩）

3.所有子元素可以定义宽高（转化为块元素）

4.父元素是弹性盒子，子元素的margin:auto;起作用（即此处可以用这个办法垂直水平居中）

至此，我们已经学习到了共计五种可令块元素水平垂直居中的办法：（面试题）

1.position：absolute；

top：0；

left:0;

bottom:0;

right:0;

margin:auto;

2.position：absolute；

top：50%；

left：50%；

margin-top：-height/2;

margin-left：-width/2;

3.position：absolute；

top：50%；

left：50%；

transform(-50%,-50%)=transform: translateX(-50%) translateY(-50%);

4.父元素添加display：flex；属性转化为弹性盒子，然后直接使用margin：auto；

5.父元素添加display:flex;            

justify-content:center;            

align-items:center;

要注意其中不需要得知元素宽高数据的方法（共计四种：1，3，4，5）。

3.使用

父元素添加(display:flex)

1.主轴排列方式

（四种排列方式合为一条，一个换行，三种对齐方式，共五点）

1.flex-direction:row;-------------------沿着X轴方向从左向右

2.flex-direction:row-reverse;-----------沿着X轴方向从右向左

3.flex-direction:column;----------------沿着Y轴（交叉轴）方向从上向下

4.flex-direction:column-reverse;--------沿着Y轴（交叉轴）方向从下向上

2.主轴对齐方式

justify-content:

1. flex-start:默认值 主轴的排列方式
2. flex-end：内容整体靠右（子项之间本来的排列顺序不改变，与右浮动效果不同。）
3. center:内容居中
4. space-between:在主轴方向两端对齐，剩余空间在子项之间均分，盒子两侧子项会贴边，不同于space-around与space-evenly
5. space-around:剩余空间平均分配到每个子项左右两侧（相当于margin-left = margin-right）
6. space-evenly:剩余空间均分给每个子项，不同于space-around，前者每个子项左右两侧共获得一份，后者两侧则各获得一份空间距离

3.子项在Y轴（交叉轴 侧轴）的对齐方式------单行

交叉轴与侧轴不一定是竖轴或者y轴，交叉轴与主轴垂直，它的横竖取决于主轴，主轴的横竖由flex-direction定义。

align-items:

1. flex-start:  在y轴从上向下（内容是一个整体，只是靠上竖向排列，不改变子项原本顺序。）
2. flex-end:  在y轴从下向上（内容是一个整体，只是靠下竖向排列，不改变子项原本顺序。）
3. center:  在Y轴居中（中线居中）
4. baseline: 在y轴基线对齐
5. stretch：默认值 拉伸，当子项高度没有定义的时候，子项高度默认继承父级高度

4.换行( flex-wrap)

1. nowrap-----默认值不换行
2. wrap------换行
3. wrap-reverse----------反向换行（第一行在最下面）

5.多行子项在y轴对齐方式

align-content:

1. flex-start:默认值 主轴的排列方式
2. flex-end：内容从右向左（效果类似横向对齐中的这个属性值，子项顺序不改变）
3. center:内容居中
4. space-between:在主轴方向两端对齐，剩余空间均分，两侧子项贴边
5. space-around:剩余空间平均分配到左右两侧（相当于margin-left = margin-right）
6. space-evenly:剩余空间均分，这两个的区别等同于横向中的该属性值。

6.margin:auto原理

就是主轴居中，侧轴居中

align-items:center

justify-content:center

margin:auto原理

子项添加

1.align-self------子项在垂直方法的排列方式

1. auto:默认值
2. flex-start:  在y轴从上向下（内容是一个整体）
3. flex-end:  在y轴从下向上（内容是一个整体）
4. center:  在Y轴居中（中线居中）
5. baseline: 在y轴基线对齐
6. stretch： 拉伸，当子项高度没有定义的时候，子项高度默认继承父级高度

2.order:n;--------子项的排列顺序

n默认值 0

数字n控制权重，数字越小排列顺序越靠前，数字越大排列顺序越靠后

3.子项扩展flex-grow

该属性用来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。

flex-grow 的默认值为 0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。（适合在父元素有剩余空间的时候使用，子元素太多，挤满父元素时，几乎不生效）

flex:2;

默认值：0；

4.子项收缩flex-shrink

默认值为1，如果没有显示定义该属性，将会自动按照默认值1，在所有因子相加之后计算比率来进行空间收缩

flex-shrink:0;

1：默认值，可以挤压

0：不挤压

5.子项的长度flex-basis

flex-basis basis 的中文意思就是 基础、基准 ，该属性用来设置元素的宽度，通常情况下大家使用 width 设置宽度。但是如果元素上同时设置了 width 和 flex-basis ，那么 width 的值就会被 flex-basis 覆盖掉。

flex复合属性

flex: flex-grow  flex-shrink flex-basis;

flex:1 0 auto;=flex:1;------扩展

flex:0 1 auto;--------------挤压

flex:0 0 auto;--------------默认

.....

flex:n;--------扩展

3.多列

规定元素应该被分隔的列数

1. column-count:将当前元素分为多少列
2. column-gap:间隔的宽度
3. column-rule:类似于border,设置间隔的边界
4. column-width：每列的宽度,不能和column-count同时设置
5. column-fill:列的高度自适应

             auto：列高度自适应内容

             balance：所有列的高度以其中最高的一列统一

      6.column-span:使某个元素横跨所有元素成为一列

             none：不跨列

             all:跨列

 以下为h1标签添加column-span：all；属性后呈现的效果：