CSS 布局

目录

1. 上期回顾
   1. CSS 2 属性
   2. 盒模型
   3. BFC
2. Caniuse 介绍
3. 常用布局
4. 作业
5. 问答

layout

释义：布局、版式

fluid

释义：液体、液体的；不固定的、流畅的

solid

释义：固体、固体的；结实的、可靠的

CSS Quiz

http://www.w3school.com.cn/quiz/quiz.asp?quiz=css​

盒模型

CanIUse.com

检查兼容性

查看兼容方案

CSS 布局

1. 什么是布局
2. DIV + CSS？
3. 固定宽度 V.S. 弹性布局
4. 单列布局
5. 双列布局
6. 三列布局
7. 其他布局

什么是布局

现有样式不能满足人们的需求

1. 文档流
2. 浮动
3. 定位

人们需要：

1. 导航栏+内容
2. 导航栏+内容+广告栏
3. ……

CSS 2 并没有提供原生支持，所以需要将一些属性组合起来，以实现布局

什么是 DIV + CSS 布局

中国特色，国外一般不这么叫

<div> 是一个无语义的标签，适合用来做与内容无关的事情

只能用 <div> 吗？

1. 不一定
2. 尽量使用有语义的标签

两种布局（PC）

• 固定宽度布局
  • 淘宝
• 弹性（fluid）布局
  • 例子

响应式布局 —— 多终端（PC、Pad、Phone）

单列布局

一栏布局

一栏布局（通栏）

一块居中

多块居中

多块居中（无间隙）

单列布局

一栏布局

一栏布局（通栏）

如何水平居中

margin-left: auto; margin-right: auto;

如何定宽

width: 1000px; 或 max-width: 1000px;

单列布局

一块居中

多块居中

多块居中（无间隙）

如何水平居中

.parent{text-align:center;}
.child{display: inline-block;}

IE 6 不支持 inline-block？（不支持吗？）

.child{*display: inline; *zoom: 1;}

双列布局

三列布局

flex 布局（简单的）

模仿别人的布局

只学理论是没有用的

模仿

改动

原创

展示、评价

学习的循环

作业

要求：实现一个双栏布局（色块）

时间：一周

问答

下课