91_css笔记7_css的布局方式和布局案例概览

一，布局方式

网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的

1. display 属性（文档流布局），传统盒模型布局方式
   1. 按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行
2.  position 属性（定位布局） ，传统盒模型布局方式
   1. 通过 position 属性来进行定位
3.  float属性（浮动布局），传统盒模型布局方式
   1. 使用 float 属性，使元素脱离文档流，浮动起来
4. flex布局（伸缩布局）
5. grid布局（网格布局）

二，布局案例

1. 单列布局
   1. 上中下同宽
   2. 上下为浏览器宽度，中间没有
2. 双列&三列布局
   1. float+margin
   2. position+margin
   3. 圣杯布局（float+负margin）
   4. 双飞翼布局（float+负margin）
   5. flex布局