盒模型

怪异盒模型

• 标准盒模型：box-sizing:content-box
  • 盒子宽度 = 内容区的width+padding的左右+border的左右+margin的左右
• 怪异盒模型：box-sizing:border-box ie8以下不支持
  • 盒子宽度 = 内容区的width + margin的左右

弹性盒布局(flex)

• 父元素
  • 形成弹性盒 display:flex;
  • 主轴对齐方式 justify-content
    • flex-start 默认值 主轴起点
    • flex-end 主轴终点
    • center 主轴中心
    • space-between 两端对齐
    • space-around 中间空隙是两边的2倍
    • space-evenly 平均分配
  • 交叉轴 align-items
    • stretch 默认值拉伸 (主轴是横向的话，看到该效果需要去掉子元素的高度，子元素的高会拉伸到和父元素一样高，主轴是纵向的话，看到该效果需要去掉子元素的宽度，子元素的宽会拉伸到和父元素一样宽)
    • flex-start 交叉轴的起点
    • flex-end 交叉轴的终点
    • center 交叉轴的中心
  • 主轴的方向 flex-direction
    • row 默认值 横向从左向右xxx
    • row-reverse 横向从右向左
    • column 纵向从上到下
    • column-reverse 纵向从下到上
  • 换行 flex-wrap
    • nowrap 默认值 不换行
    • wrap 换行
  • 多行之间的对齐方式 align-content
    • stretch 拉伸
    • flex-start 整个盒子的起始
    • flex-end 整个盒子的终点
    • center 主轴中心
    • space-between 多行内容两端对齐
    • space-around 多行内容中间空隙是两边的2倍
    • space-evenly 多行内容平均分配
• 子元素
  • 子项在交叉轴的对齐方式 align-self 重写父元素中交叉轴对齐方式(align-items)
    • stretch 拉伸
    • flex-start 交叉轴的起点
    • flex-end 交叉轴的终点
    • center 交叉轴的中心
  • 排列顺序 order
    • 数值 值越大，越在后面排，可以为负数
  • 放大比例 flex-grow
    • 0 不放大
    • 数值
  • 压缩 flex-shrink
    • 1 默认值 压缩
    • 0 不压缩
    • 滚动导航的实现
      1. 设置子项不压缩 flex-shrink:0;
      2. 给父元素设置溢出显示滚动条 overflow-x:auto;
  • 子项的宽度 flex-basic:数值+px
  • 复合属性 flex:flex-grow(0) flex-shrink(1) flex-basic(auto);
    • flex:1; 子项占满整个剩余控件

利用弹性盒对盒子进行水平垂直居中

  父元素{
    display:flex;
    justify-content:center;
    align-items:center;
  }