h5 day15笔记 2021.09.03

怪异盒模型：(IE盒模型:丢失文档类型的时候,在IE低版本浏览器中会以怪异盒模型方式解析)

box-sizing：content-box（标准盒模型）/border-box（怪异盒模型）

特点：1）padding不会撑大容器大小；2）border向内长（button也是）

--不推荐PC端使用，建议在移动端使用；

弹性盒:   display：flex；（控制子级元素在父级元素上的排列方式）

-- 弹性盒属性要给父级添加,使父级形成弹性盒环境 控制子级元素；

-- 弹性盒中默认主轴方向是X轴(水平方向) 默认的侧轴是Y轴；

--弹性盒环境下所有的元素都可以直接设置宽高大小；

--居中方式:针对于单个元素设置(margin:auto)；

注意：浮动在弹性盒的环境下是没有作用；定位、盒模型可以使用；

添加在父级元素上的属性：

控制弹性盒主轴方向： flex-direction：row（默认x轴）/column（主轴为Y轴，测轴为X轴）

主轴的对齐方式：justify-content：flex-start /flex-end /center /space-between（两端对齐，其他空间自动分配）/space-around（元素间间距自动分配）/space-evenly（元素间间距完全相等）

侧轴对齐方式：align-items：flex-start/ flex-end/ center/ baseline

换行：flex-wrap：nowrap/wrap   （弹性盒中默认所有的子级元素都会在一行内显示 进行挤压）

行间距：align-content：flex-start /flex-end /center /space-between（两端对齐，其他空间自动分配）/space-around（元素间间距自动分配）/space-evenly（元素间间距完全相等）

添加在子集元素上的属性：

align-items:表示侧轴上的对齐方式 控制所有的子级元素

align-self:表示侧轴上的对齐方式 控制单个子级元素

flex作为属性：

flex：数字  （表示所占份额）

flex:1 占主轴上的剩下的空间并且会撑大当前盒子的大小    重点！！！

居中方式的总结：

- 表格居中 align、valign

- 文本居中 text-align、line-height

- 版心居中 margin:0 auto

- 基线对齐 加标签 转类型 基线对齐 vertical-align 

- 背景居中 background-position

- 定位居中 已知(1. left50%、top50% + margin：-本身宽高的一半;  2.计算属性)和未知居中（上下左右都为0）

- 位移居中

- 弹性盒的主轴/侧轴居中