css布局

一、思维脑图

使用块元素搭建页面框架

• 块元素独占一行空间
  布局的本质就是让块元素在一行中显示

二、浮动布局

float:left/right

脱离文档流：

1. 宽度高度默认由内容决定
2. 原先所在位置就会被其他块元素抢占
3. 浮动元素在一行中依次排列，当一行无法容纳的时候会自动换行

应用：

1. 全部浮动（2+ 列）

   ul::after {
   display:block;
   content:"";
   clear:both;
   }
   ul> li {
   float:left;
   with:计算
   }
   
   <ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   </ul>

2. 左侧浮动，右侧不浮动（2列）

   .content > .left{
   float:left;
   width:220px;
   }
   .content > .right {
   margin-left:230px;
   }
   <div class="content">
   <div class="left"></div>
   <div class="right"></div>
   </div>

三、定位布局

1. 作用：当一个元素悬挂在其他元素之上，优先考虑定位布局

eg: 模态框、下拉菜单、二级菜单、固定宣传栏、网页聊天页面

1. 用法：
   position:static/ relative / absolute / fixed /
   static 默认 静态布局，默认文档流中，非定位元素

relative 定位元素(相对定位)

1. 没有脱离文档流
2. 参照点为当前元素原本的位置

absolute 定位元素(绝对定位)

1. 脱离了文档流
2. 参照距离当前元素最近的父定位元素，如果所有的父元素都没有定位元素，参照浏览器视口

fixed 定位元素(固定定位)

1. 脱离了文档流
2. 参照浏览器视口

sticky 定位元素(粘滞定位)

1. 不脱离文档流
2. relative 和 fixed 的结合

例如：

top:50px

当当前元素距离浏览器视口顶端为50px的时候，体现fixed的特点

定位元素的特点

1. 可以使用描述当前元素位置的属性 top、right、bottom、left

2. z-index

3. 参照点

4. 是否脱离文档流

四、 伸缩盒布局

1. 作用：使得子元素在父元素中分列显示，与float的作用类似。一般用于响应式布局（手机app中）

2. 用法：

• 父元素在主轴上一定要有一个固定的宽/高
  子元素在交叉轴上默认宽/高占满父元素

  如果主轴为x轴，那么资源的默认高度占满父元素
  如果主轴为y轴，那么资源的默认宽度占满父元素

1. <ul>
   <li></li>
   <li></li>
   <li></li>
   </ul>
   
   ul {
   display:flex;
   }

ul 伸缩盒

1. 设置父元素为伸缩盒 (display)

   flex

2. 主轴 （flex-direction）

   主轴 	默认情况下为x轴
   row 【左中右】/column【上中下】
   交叉轴 默认情况下为y轴
   元素沿着伸缩盒的主轴排列的

3. 伸缩盒自动换行（flex-wrap）

   -----------------（子元素宽度和大于父元素的时候是否换行）-----------------

   nowrap 	默认值，不换行
   wrap 		换行

li 伸缩盒的元素

1. 基础值

   flex-basis 	主轴上元素的基础值(宽/高)

2. 对盈余空间的分配

   flex-grow

3. 对亏损空间的贡献

   flex-shrink:

4. 速写

   flex: grow shrink basis;