• 一、浮动布局
  • 1.1 固定宽度布局
  • 1.2 流体布局
• 二、响应式布局
  • 2.1 流体布局
  • 2.2 流体 + 固定布局
  • 2.3 表现形式改变
  • 2.4 总结

• 参考资料：

一、浮动布局

1.1 固定宽度布局

• demo

• html 代码：布局是左边栏 ===》 中间栏 ===》 右边栏

• 这里只左中右浮动布局，并且是固定宽度布局

• 关键 css 代码如下：
  • 左右两边栏向左浮动，宽度为 200px，中间栏也向左浮动，宽度为800px

 .container .center-inner {
    width: 1200px;
    margin: 0 auto;
}
 .container .aside {
    float: left;
    width: 200px;
    color: white;
    background: black;
}
.container .main {
    float: left;
    width: 800px;
    color: white;
    background: #333333;
}

• 以下是效果图：

1.2 流体布局

• demo

• html 代码：布局是 中间栏 ===》 左边栏 ===》 右边栏

• 关键 css 代码如下：
  • 中间栏宽度设置为100%，左浮动
  • div.content 设置 margin: 0 200px（留出空位给左右两栏）
  • 左右两栏左浮动，宽度设置为200px
  • 左栏margin-left: -100%
  • 右栏margin-left: -200px

.container .main {
    width: 100%;
    float: left;
}
.main .content {
    margin: 0 200px;
    padding: 10px;
}
.aside--left,
.aside--right {
    float: left;
    width: 200px;
    background: white;
}
.aside--left {
    margin-left: -100%; /* 这里 -100% 是因为左边栏在下一行，要回到上一行的最左边*/
}
.aside--right {
    margin-left: -200px;
}

• 以下是效果图：

二、响应式布局

2.1 流体布局

• 流体布局：元素宽度无时无刻都在自适应
• demo
• 这里使用了 flex 布局 以及设置断点

2.2 流体 + 固定布局

• demo

• 固定：有一个固定宽度，比如1200px 或者 1000px
• 流体：在特定的断点，布局会有所转换，并且部分内容的宽度会自适应

2.3 表现形式改变

• demo

2.4 总结

• 如果做响应式布局，要想清楚是做流体布局，还是固定 + 流体布局，还是表现形式改变的响应式布局。
• 想清楚有什么断点，每个断点有哪些元素的展现形式是有变化的，变化的效果又是什么