CSS布局方式

CSS盒子模型 （box model）

传统模型

  • 外边距 margin
    • 透明的，不会撑大整个box
  • 边框 broder
  • 内边距 padding
    • 会撑大整个box
  • 内容 content

CSS 弹性盒子模型 （flex model）

新的布局样式，适合小程序

当页面需要适应不同屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

  • 弹性容器 （flex container）

    • 通过display: flex 来定义为弹性容器
    • 弹性容器外以及弹性元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局
    • 默认弹性盒内容横向摆放

    flex-direction 布局方向

    • row 横行排列
    • row-reverse 反转横行
    • column 纵向排列
    • column-reverse 反转纵向

    justify-content 垂直方向上的摆放

    • flex-start 靠上
    • flex-end 靠下
    • center 居中

    align-items 水平方向上的摆放

    • flex-start 靠左
    • flex-end 靠右
    • center 居中

  • 弹性子元素（flex item）

    • flex-grow/flex

      根据弹性盒子元素所设置的扩展因子作为比率来分配空间

文档流

标准流有些问题

  • 高矮不齐，底边对齐
  • 空白折叠

如何脱离标准文档流

  • 浮动

    • float

      • 浮动以后元素脱离文档流

      • 浮动只有左右浮动，没有上下浮动

      • 脱离文档流，相当于在页面上增加一个浮层来放置内容，此时可以理解为有两层界面，所以会有折叠效果

    • 浮动的缺点

      • 造成父元素高度塌陷
      • 后续元素也会受到影响

    • 清除浮动

      • 父元素设置高度
      • 受影响元素添加 clear属性（left，right，both）
      • overflow 清除浮动
        • 父级元素添加 overflow: hidden; clear: both;
      • 伪对象方式 主要也是用clear

  • 绝对定位

  • 固定定位

定位 position

设置定位后，相对定位和绝对定位是相对于有定位的父级元素定位，如果父级元素不存在定位，会向上逐级寻找，直至顶层文档。

  • relative 相对定位
    • 还在标准流中
  • absolute 绝对定位
    • 脱离标准流
  • flxed 固定定位
  • 不会随着页面滚动变化
  • Z-index
    • 设置显示顺序