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）

响应式布局 —— 多终端（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 布局（简单的）

模仿别人的布局

只学理论是没有用的

模仿

改动

原创

展示、评价

学习的循环

作业

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

时间：一周

问答

下课

Made with Slides.com