【讲义】第12课:HTML 和 CSS 小结

直播讲义

(方方) #1

作业

  1. 完成第 11 课的作业
  2. 完成问卷
  3. 一篇博客(选作)
  4. 玩一个游戏并通过:青蛙游戏

响应式页面

首先我们来完成「最简单页面」。
上节课已经将手机端的页面完成了,接下来我发做 iPad、PC 和 宽屏版本。

技巧

  1. Media Query
  2. Flex
  3. 把一个东西做两个版本,然后显示和隐藏

CSS 概念

选择器

  • 从右往左理解(由左往右也行)
  • 优先级

  • 越具体,优先级越高

  • 后写的,压倒先写的
  • !important 最牛逼

两种盒模型

border-box & content-box

浮动

  1. 脱离 normal flow
  2. 对文本元素的影响
  3. 对块级元素的影响
  4. 清除浮动

使用浮动做一个 Bootstrap 2 Grid System

定位

  1. position: static
  2. position: relative
  3. position: fixed
  4. position: absolute
  5. z-index

关于堆叠上下文,可以认为是「景深」

常见情形:

  1. 堆叠上下文(如根元素)
  2. block元素
  3. inline 元素

如果一个元素浮动了,那么它位于2和3之间;
如果一个元素被定位了(position 不为 static),且 z-index 不为负数,那么它位于 3 之上。
如果定位了,且 z-index 为负数,那么它位于 1 和 2 之间。

注意 z-index 是相对堆叠上下文的,不是绝对的。


(方方) #2

(方方) #3