常见布局模式

1. 静态布局

• 特点：
  • 给页面元素设置固定的宽度、高度，一般采用px等绝对长度单位
  • 一般设置了min-width，当窗口缩小时，会出现滚动条
  • 针对不同分辨率的设备，分别写入不同的样式文件
• 缺点：
  • 用户体验不好，固定宽度的布局可能给屏幕分辨率大的用户造成过多空白空间
  • 不能根据用户的屏幕尺寸做出不同的表现
• 应用：大部分门户网站、大部分企业的PC宣传站点

2. 浮动布局

• 脱离文档流
• 优点：
  • 可以使元素block块状化，行内元素浮动后可以设置宽高
  • 可以使块元素同行排列
• 缺点：
  • 导致父元素高度塌陷
  • 元素脱离文档流，布局困难
• 应用：PC端网页使用此布局较为频繁，和固定布局结合使用

3. 流式布局

• 页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变
• 设计方法：使用%百分比定义宽度，高度大都是用 px 来固定住，可以根据可视区域和父元素的实时尺寸进行调整
• 缺点：如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示
• 应用：
  • 移动端
  • 大的轮播图等，宽度100%自适应

4. 自适应布局

• 为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，本质是多个静态布局
• 屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化
• 设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式
• 应用：适配大部分设备

5. 响应式布局

• 布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变
• 设计方法：
  • 媒体查询 + 流式布局
  • 通常使用 @media 媒体查询 和网格系统 配合相对布局单位进行布局
• 缺点：
  • 媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高
  • 要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本
• 应用：bootstrap

6. 弹性布局

• CSS3的一种新布局模式
• 当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
• 缺点：浏览器兼容性比较差

7. 常见布局模式

7.1 单列布局

• header、content、footer等宽
  • 对三者统一设置width: 1000px或者max-width: 1000px
  • 设置margin: 0 auto实现居中
• header、footer等宽，content略窄
  • header、footer的内容宽度不设置，块级元素充满整个屏幕
  • header、content和footer的内容区设置同一个width，并通过margin: 0 auto实现居中

7.2 双列自适应布局

• 一列由内容撑开，另一列撑满剩余宽度的布局方式

1. float + overflow

• 通过overflow触发BFC，而BFC不会重叠浮动元素
• 由于设置overflow: hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom: 1来兼容IE6-浏览器

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>        
</div>

*{
	margin: 0;
	padding: 0;
}
.parent {
  overflow: hidden;
  zoom: 1;
}
.left {
  float: left;
}
.right {
  overflow: hidden;
  zoom: 1;
}

• 如果侧边栏在右边时，注意渲染顺序。即在HTML中，先写侧边栏后写主内容

2. flex布局

//html部分同上
.parent {
  display: flex;
}  
.right {
  flex: 1;
}

3. grid布局

• 基于网格的二维布局系统，目的是用来优化用户界面设计

.parent {
            display: grid;
            grid-template-columns:auto 1fr;
}

7.3 三列布局

详细请见：三栏布局的实现方法