2021-05-30

怪异盒：

box-sizing 属性允许你以特定的方式定义元素；

怪异盒模型：（又称ie盒模型）：在低版本浏览器如果丢失了文本类型，触发ie盒模型；

属性值：content-box 默认 标准盒模型；

border-box 怪异盒模型 特点：当盒子形成怪异盒模型之后，当前padding值不会撑大盒子；

标准盒模型由content+padding+border+margin组成;自身大小：content+padding+border；所占位置：content+padding+border+margin；

在怪异盒模型中 ，border是向内形成的。

怪异盒模型由content形成（内容包括padding+border）；所占大小由content（padding+border）+margin；

两者区别：怪异盒模型不需要计算border和padding的值；

工作的项目中如果使用怪异盒模型，不考虑兼容问题；怪异盒模型通常都在移动端使用；

弹性盒的基础概念：

控制子级元素在父级元素中的排列位置；

属性：display；

属性值：flex;

盒模型是控制子级元素在父级元素中的排列顺序位置；display:fkex;一定要添加在父级容器上；

当前元素形成盒模型后，默认：主轴是x轴，侧轴是y轴

注意：在弹性盒环境中，浮动不可使用，定位、盒模型正常使用；

如果在元素中设置了盒模型则不考虑元素类型，都可以设置宽高大小；

弹性盒居中的两种方式：1、父级元素设置弹性盒，子级设置margin：auto；2、弹性盒对齐方式居中

弹性盒属性很多可以分为两类：1、添加在父级元素上，控制所有子级元素2、添加在子级元素上，控制单个子级元素

改变默认的主轴方向：

属性：flex-dirction;

属性值：row 方向x轴（默认）；column 方向y轴；column-reverse 相反的排列；

主轴上的对齐方式：

属性：justify-content

属性值：flex-startr 默认，表示元素在初始位置

flex-end 元素在结束位置

center 元素在居中的位置

space-between 两端对齐，其余空间自动分配；

space-around 所有的空间，都是自动分配的；

space-evenly 所有的间距都是一样的

侧轴上的对应方式：

属性：align-itmes

属性值：fiex-start

fiex-end

center

baseline 基线对齐。

1、所有子级元素都有宽高的情况下，baseline和flex-start一样的效果 。

2、当子级元素不设置高低的情况下，并且不设置baseline,子级默认拉伸。

3、当前所有页面都是文本类型的时候排列顺序再设置字体大小，以基线对齐

stretch 拉伸；（line-height：原理以基线对齐）

4、当子级元素的宽度总和大于父级元素，默认挤压。

flex-wap：wap 换行；no -wap 不换行；wap-reverse 排序倒转；

当设置换行属性，行与行之间有间距；

属性：align-content

属性值：flex-start;

flex-end;

center;

space-between;

space-around;

space-evenly;

align-self属性

控制子级元素在侧轴上对齐方式

属性值：auto：如果父级元素有侧轴对齐方式，那就继承父级的对齐方式，如果没有默认拉伸

flex-start;

flex-end;

stretch;

order 优先级 

属性值：unmber 数字大排在后面；

flex属性

常用值：1  表示占据主轴上剩余的空间；父级必须为弹性盒

flex-grow 空间分配

规定项目将相对于其他项目的灵活

flx-shrink 收缩的量

0 不缩放

1 正常缩放

flex-basis 盒子的宽度

auto自适应

0%-100% 当前主轴占据的宽度