CSS 布局

目录

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

layout

释义:布局、版式

fluid

释义:液体、液体的;不固定的、流畅的

solid

释义:固体、固体的;结实的、可靠的

CSS Quiz

盒模型

检查兼容性

查看兼容方案

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