4月14日css3弹性盒子知识点梳理

box-sizing:
属性值：
box-sizing:content-box; 常规盒模型
box-sizing:border-box: 怪异盒模型（IE盒模型）
怪异盒模型：
触发怪异盒模型：
box-sizing:border-box;
怪异盒模型特点：padding和border都会在元素的宽高的内部，不会把盒子撑大。
弹性盒子：布局方案。
作用：控制离它最近的一层子元素,布局方式。
特点：
a：弹性盒子里面的离它最近的一层子元素都可以添加大小。
b: 如果想让弹性盒子里面的一个子元素左右上下居中，只需要给子元素添加margin:auto即可
c: 弹性盒子里面的子元素都是沿着“主轴”排列
“主轴”:有可能是X轴也有可能是Y轴，如果X轴为主轴，Y轴就是侧轴。
注：默认情况下X轴为主轴。
一：触发弹性盒子：
display:flex;
二：改变主轴的方向：
flex-direction:
属性值：
row (默认值：X轴为主轴)
column (Y轴为主轴)
column-reverse (以Y轴为主轴反向排列)
row-reverse (以X轴为主轴反向排列)
三：改变主轴的对齐方式：
justify-content:
属性值：
flex-start 默认状态：在弹性盒子开始的地方显示
flex-end 在弹性盒子末端对齐
center 居中对齐
space-between 两端对齐
space-around 自动分配间距
四：侧轴的对齐方式:
align-items:
flex-start 侧轴开始的位置
flex-end 侧轴结束的位置
center 侧轴居中的位置
baseline 基线（flex-start等效）
stretch（默认值） 拉伸
五：控制弹性盒子里面的子元素（灵活元素）换行处理：
flex-wrap:
wrap 换行
nowrap 不换行
wrap-reverse 反向换行
六：控制行与行的对齐方式：
align-content:
flex-start 默认状态：行与行之间不存在默认的行间距
flex-end 在弹性盒子末端对齐
center 居中对齐
space-between 两端对齐
space-around 自动分配间距
七：补充：flex-direction 和 flex-wrap简写：
flex-flow:;
注：以上7个属性全部添加在父元素弹性盒子上面！！！！！！！！！！！！！
添加在子元素上面的属性：
一：控制弹性盒子里面 某个 灵活元素 在侧轴的对齐方式。
align-self:
auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
Stretch 元素被拉伸以适应容器。
Center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。
二：控制子元素的排列顺序：
order: 数值越大越往后排列。支持负数。
三：剩余空间的分配：
flex:1; 分配主轴剩余空间。
flex:1; 简写形式。
flex-grow:; 扩展的量
flex-shrink:; 收缩的量
flex-basis:; 元素的大小
记住：flex-shrink:0; 不压缩。
多列属性：
1：列数：
column-count:;
2:列间距：
column-gap:;
3:列分割线：
column-rule:
4:控制每一列的列的高度是否统一：
column-fill:;
auto 列高度自适应内容
balance 有列的高度以其中最高的一列统一
5:跨列：
column-span:all;
6:列宽
column-width:
7:columns: 7
column-count 和 column-width 简写
今天老师带领我们学习新课程， 怪异盒模型：box-sizing:border-box; 弹性盒子： display:flex；多列布局的属性， 感觉老师讲的太快了，基础太差有些跟不上，前几天外出办事课程跟不上了，听不懂老师讲的了有点怀疑人生了。希望能从头再学一遍多给些练习的时间。老师的期望太高了，我现在只停留在能听懂的阶段，只能比着老师的案例写，问题也归纳不出来，只感觉脑子里一团浆糊。虽然也能听得懂， 但是思维逻辑跟不上，案例转换方面不灵活老师一往深里讲就犯晕。到自己单独作的时候，却是有一种无从下手的感觉。也不知道能不能学会这一行，心理也是有一点担忧。只能硬着头皮学下去实在不行的话就留级，好想线下上课主要是家里有琐事打扰，想要全身心投入学习中！因为我想要改变以后的生活，不得不砥砺前行。