学习代码(CSS布局)

1.表格布局：diaplay：table-cell；

特点：代码量太大，会使浏览器渲染率提高，使用率少

2.浮动布局：float ；

可接收属性：left(左)，right(右)
对自身影响，脱离文档流,使元素独立起来并且可以设置宽高人
对兄弟元素影响，改变兄弟元素布局
对父容器影响是造成坍塌

3.定位布局：position ；

固定布局：使用标准 px单位
流式布局：使用百分比 %

4.多列布局：column-width：xxpx(列宽)

宽根据窗口大小自适应

5.弹性布局※：display：flex；

默认状态下是从左到右，主轴为x轴

fiex-direction：column(y轴为主轴)row(x轴为主轴)
row-reverse(x轴为主轴，起始线为右边开始)
column-reverse(y轴为主轴，起始线为下边开始)
flex-wrap：wrap(子元素在父容器中换行，默认值为nowrap不换行)
(综合属性)flex-flow：column-reverse nowrap；
空格隔开，先写方向，后写是否换行
align-items:center(设置侧轴上居中)

※justfy-content：设置子元素在父容器中主轴的排列位置的。

space-between;两端对齐，有空余会分配给子元素中间
space-around;将剩余空间分成元素的2倍，分别在元素的左右分配
space-evenly;平均分配剩余空间

align-self: flex-end; 设置元素在侧轴的位置