布局的分类

1.表格布局display：table-cell；
(1)display：table-cell（单元格）
①特点：代码量大，使用率少，会使浏览器渲染率提高。
2.浮动布局：float
(1)对自身影响：脱离文档流，使元素独立起来并且可以设置宽高。
(2)对兄弟元素影响：改变兄弟元素布局。
(3)对都容器影响：造成了父容器坍塌。
①清浮a：：after{ content:’’;
display:blok;
cler:both;}
3.定位布局position；
(1)固定布局：使用px单位。
(2)流式布局：使用百分比 %;
4.多列布局
(1)Column-width:xx (px)列宽 。
①宽根据窗口大小自适应
5.弹性布局diaplay：flex
(1)默认主轴方向是X轴，起始线是左边开始
(2)flex-diretion改变主轴方向
①row （X轴为主轴）
②colum （Y轴为主轴）
③row-reverse（X轴为主轴，起始线从右开始）
④Colum-reverse（Y轴为主轴，起始线从下开始）
(3)flex-wrap （子元素在父元素中换行，默认是nowrap不换行）
(4)flex-flow（以上两种的综合属性）
(5)justify-content 设置子元素在父容器中主轴的排列位置
①flex-start: 弹性盒子元素将向行起始位置对齐
②flex-end : 弹性盒子元素将向行结束位置对齐
③center: 弹性盒子元素将向行中间位置对齐
④常用：
⑤space-between:两端对齐，有空余会分配给每个子元素中间
⑥space-around:将剩余空间分成元素的2倍，分别在元素的左右分配
⑦space-evenly：平均分配剩余空间
(6)align-items(侧轴)
①Center 设置侧轴上居中
(7)align-self 设置元素在侧轴的位置
①flex-end 终止线
属性：
十九、表格布局display：table-cell；
1．display：table-cell（单元格）
（1）特点：代码量大，使用率少，会使浏览器渲染率提高。
二十、浮动布局：float
1．对自身影响：脱离文档流，使元素独立起来并且可以设置宽高。
2．对兄弟元素影响：改变兄弟元素布局。
3．对都容器影响：造成了父容器坍塌。
（1）清浮a：：after{ content:’’;
display:blok;
cler:both;}
二十一、定位布局position；
1．固定布局：使用px单位。
2．流式布局：使用百分比 %;
二十二、多列布局column
1．Widt(单位px)列宽
2．gap（单位em） 列于列之间的间距为2em
3．Count(5) 分列 单位是几就是几列
4．宽根据窗口大小自适应
二十三、弹性布局diaplay：flex
（1）默认主轴方向是X轴，起始线是左边开始
（2）flex-diretion改变主轴方向
① row （X轴为主轴）
② colum （Y轴为主轴）
③ row-reverse（X轴为主轴，起始线从右开始）
④ Colum-reverse（Y轴为主轴，起始线从下开始）
（3）flex-wrap （子元素在父元素中换行，默认是nowrap不换行）
（4）flex-flow（以上两种的综合属性）
二十四、justify-content 设置子元素在父容器中主轴的排列位置
（1）flex-start: 弹性盒子元素将向行起始位置对齐
（2）flex-end : 弹性盒子元素将向行结束位置对齐
（3）center: 弹性盒子元素将向行中间位置对齐
2．常用：
3．space-between:两端对齐，有空余会分配给每个子元素中间
4．space-around:将剩余空间分成元素的2倍，分别在元素的左右分配
5．space-evenly：平均分配剩余空间
6．align-items(侧轴)
7．Center 设置侧轴上居中
8．align-self 设置元素在侧轴的位置
（1）flex-end 终止线