css布局

1.表格布局 display:

• table-cell; 转换成单元格

• table; 转换成表

表格布局标签量多 浏览器引擎渲染速度延缓 一般不使用

2.浮动 float:

• 对自身影响 脱离文档流 使元素独立起来 都有了浮动的一些属性 都能设置宽高

• 对兄弟元素 改变兄弟元素的布局

• 对父级影响 造成坍塌

3.定位 position:

• **推荐使用固定布局：**使用px单位

• **流式布局：**使用百分比

4.多列布局

section

column-width: 列宽

column-gap:线

column-count: 多少列

5.弹性盒模型布局 flex:

可以实现子元素在父元素中自动伸缩，适合移动端布局

• display: flex; 默认主轴方向是x轴 起始线是左边 终止线是右边
• flex-direction： 改变主轴方向 默认x主轴
  • column; y轴变为主轴
  • row-reverse; x为主轴起始线 从右开始
  • column-reverse; y为主轴起始线 从下开始
• flex-wrap: wrap; 换行 不会被压缩
• flex-wrap: nowrap; 默认不换行
• flex-flow: 以上两种的综合属性

justify-content:

设置子元素在父容器中主轴的排列位置

• flex-start;
• space-between; 两端对齐 有空余会分配给每个子元素中间
• space-around; 剩余空间分成元素的二倍 给每个元素左右平均分配
• space-evenly; 平均分配剩余空间

设置子元素在父容器中侧轴的排列位置

align-items:

• flex-end; 排列到侧轴的终止线
• center; 侧轴居中

ailgn-self:

• fiex-end; 设置在子元素上 在侧轴的位置