大前端笔记

 6) 布局
    1. 浮动布局（x轴）
      float:left
      浮动元素：
        1) 脱离文档流
        2) 块元素的宽度不再是100%，由内容决定
        3) 块元素不再支撑其父元素
        4) 同一层次（兄弟关系）浮动元素会在一行排列，当浮动元素宽度总和大于父元素的时候会发生换行。
      clear
        清理浮动
        left  不与左浮动元素在同一水平线上
        right 不与右浮动元素在同一水平线上
    2. 伸缩盒布局（x轴）
      div.container > div
      ul.container > li
      1) 概念
        伸缩盒容器 div.container 、ul.container
        伸缩盒元素 div、li
        主轴    默认主轴x轴，伸缩盒中，伸缩盒子元素沿着主轴来进行排列
        交叉轴  与主轴垂直的轴
      2) 规则
        伸缩盒容器
          display:flex;
            强制让它的子元素沿着主轴方向中显示，并且子元素不会脱离文档流，交叉轴上元素的高度如果没有指定，应该和父元素保持一致。
          flex-direction:row;
            定义主轴方向，row 表示主轴是x轴，column表示主轴为y轴
          flex-wrap:nowrap 
            当子元素的长度加起来超过主轴上的父元素的宽度，默认不换行，
          align-items: stretch;
            定义伸缩盒容器中的子元素在交叉轴上的排列方式
          justify-content:space-around;
            定义伸缩盒容器中的子元素在主轴上的排列方式
        伸缩盒元素
          flex-basic:   主轴上的基础长度（基本工资）
          flex-grow:    主轴上剩余空间分配的份数（分红）
          flex-shrink:  主轴上亏损空间的分摊份数（亏损）
    3. 定位布局(z轴)
      position:
        static  静态（默认、非定位元素）
        relative  相对（定位元素）
        absolute  绝对（定位元素）
        fixed     固定（定位元素）
        sticky    粘滞（定位元素）
      定位元素的特点: 可以使用定位规则。top right bottom left
      1) 相对定位
        1. 不脱离文档流
        2. 相对于它原来所在位置移动
      2) 绝对定位 
        1. 脱离文档流
        2. 相对于距离它最近的父定位元素位置移动！如果所有的父元素都不是定位元素，相对于浏览器视口位置移动
        一般情况下，绝对定位元素应该嵌套在相对定位元素内容来使用
      3) 固定定位
        1. 脱离文档流
        2. 相对于浏览器视口进行定位
      4) 粘滞定位
        1. 在没有达到阈值的时候是不脱离文档流（相对），达到阈值脱离文档流（固定）
        2. 通过left、top、right、bottom来设定阈值

      定位布局的应用：
        1. 二级栏目
        2. 模态框
        3. 特殊布局