CSS布局

css布局

1、表格布局

display:table;转换成table标签

display:table-cell；table-cell是单元格的意思

特别适合做布局但是标签量过大造成缓存慢，让用户等待时间长

2、浮动

floft

对自身有影响都脱离文档流，使元素独

立起来并且可以设置宽高,

改变兄弟元素布局,

对父容器造成了坍塌；

所以需要在使用完浮动后清除浮动

3、定位

能不用相对定位就不用，用绝对定位

固定布局：使用标准px单位（推荐）

流式布局：使用百分比定位

4、多列布局

section；根据列宽自适应窗口分为几列

列宽：column-width

改变列间间隙：column-gap

列间加入一条分割线：column-rule

5、弹性布局

flex：实现子元素在父元素中自动伸缩；特别适合移动端布局

主轴：排列方向是水平方向主轴就是X轴，排列方向是垂直方向主轴就是Y轴

侧轴：与主轴垂直关系

弹性盒模型：

• display:flex; 默认主轴方向是x轴，起始线是左边开始

• 改变主轴方向：

  • flex-direction；

  • row:X轴为主轴；

  • column：Y轴为主轴；

  • row-reverse:X轴为主轴，起始线从右开始；

  • column-reverse:Y轴为主轴，起始线从下开始；

• 换行:

  • flew-wrap;
  • 默认是不换行(压缩)：no-wrap
  • 换行(子元素在父元素中换行)：no-wrap

• 以上两种的综合属性

  • flew-flow :主轴方向 换行；

• 设置子元素在父容器的排列位置

  • justify-content:;
    • 两端对齐（有空余会分配给每个子元素中间）：space-between
    • （将剩余空间分为元素的2倍，分别为元素的左右分配）：space-around
    • 平均分配：space-evenly

• 设置侧轴上的位置

  • align-items
    • 居中：center；
    • 起始线：flex-start
    • 终止线：flex-end
  • 设置侧轴在子元素上的位置
    • align-self