1.1CSS是什么

• Cascading Style Sheets
• 用来定义页面元素的样式
  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

1.2在页面使用CSS

• 外链式
• 嵌入式
• 内联式

2.1选择器Selector

• 找出页面中的元素，以便给他们设置样式
• 使用多种方式选择元素
  • 按照标签名、类名、id
  • 按照属性
  • 按照DOM树中的位置

2.2伪类（pseudo-classes）

• 不基于标签和属性定位元素
• 几种伪类
  • 状态伪类
  • 结构性伪类

2.3组合

2.4调试CSS

• 右键点击页面，选择‘检查’
• 使用快捷键
  • Ctrl+Shift+I (Window)
  • Cmd+Opt+I (Mac)

3.1继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值

3.2初始值

• CSS中，每个属性都有一个初始值
  • background-color的初始值为transparent
  • margin-left的初始值为0
• 可以使用initial关键字显示重置为初始值
  • background-color:initial

3.3布局（Layout）

• 确定内容的大小和位置的算法
• 依据元素、容器、兄弟节点和内容等信息来计算

3.4布局的相关技术

• 常规流
  • 行级
  • 块级
  • 表格布局
  • FlexBox
  • Grid布局
• 浮动
• 绝对定位

4.1width

• 指定content box宽度
• 取值为长度、百分数、auto
• auto由浏览器根据其他属性确定
• 百分数相对于容器的content box宽度

4.2height

• 指定content box宽度
• 取值为长度、百分数、auto
• auto取值由内容计算得来
• 百分数相对于容器的content box高度
• 容器有指定的高度时，百分数才生效

4.3padding

• 指定元素四个方向的内边距
• 百分数相对于容器宽度

4.4border

指定容器边框样式、粗细和颜色

4.5margin

• 指定元素四个方向的外边距
• 取值可以是长度、百分数、auto
• 百分数相对于容器宽度

5.1常规流

• 根元素、浮动和绝对定位的元素会脱离常规流
• 其他元素都在常规流之内
• 常规流中的盒子，在某种排版上下文中参与布局

5.2行级排版上下文

• Inline Formatting Content
• 只会包含行级盒子的容器会创建一个ifc
• ifc内的排版规则

  • 盒子在一行内水平摆放

  • 一行放不下时，换行显示

  • text-align决定一行内盒子的水平堆积

  • vertical-align决定一个盒子在行内的垂直对齐

  • 避开浮动元素

CSS重点

• 布局
• 动画
• 定位
• 规范化