CSS

选择器

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

页面使用css的三种方式

• 外链：引入css
• 嵌入：在style标签里面编辑
• 内联：标签直接编辑

CSS 工作过程

选择器Selector

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

通配选择器*

匹配所有

标签选择器

使用标签设置样式

id选择器

保持唯一性

类选择器 class

比较常用的选择器

属性选择器（多样性）

根据属性是某个特定的值设置样式

伪类选择器

• 不急于标签和属性定位元素
• 几种伪类
  • 状态伪类：这个元素处于某一种状态
  • 结构型伪类

组合

选择器组

颜色

• 颜色名称
• 十六进制
• RGB
• RGBA
• HSL
• HSLA

字体

• font-family
• web font: 解析会有性能开销

选择器的特异度

继承

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

显式继承

inherited 关键字来让原本不可以继承的属性来可以继承

初始值

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

CSS取值过程

布局相关技术

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

盒模型

• width
  • 指定content box宽度
  • 取值为长度、百分数、auto
  • auto 由浏览器根据其他属性确定
  • 百分数相对于容器的content box宽度
• height
  • 指定content box高度
  • 取值为长度、百分数、auto
  • auto 由浏览器根据其他属性确定
  • 百分数相对于容器的content box高度
  • 容器有指定的高度时，百分数才生效
• padding
  • 指定元素四个方向的内边距
  • 百分数相对于容器的宽度
• border
  • 指定容器边框样式、粗细和颜色
  • 多种方向、属性 自由组合
• margin
  • 指定元素四个方向
  • 取值为长度、百分数、auto
  • 百分数相对于容器宽度
• overflow
  • auto
  • hidden
  • scroll

块级元素

body、article、div、main、section、h1-6、p、ul、li等

行级元素

sapn、em、strong、cite、code等

行级排版上下文

• Inline Formatting Context(IFC)
• 只包含行级盒子的内容会创建一个IFC
• IFC内的排版规则
  • 盒子在一行内水平拜访
  • 一行放不下时，换行显式
  • text-align决定一行内盒子的水平对其
  • vertical-align决定一个盒子在行内的垂直对齐
  • 避开浮动元素

块级排版上下文

• Block Formatting Context(BFC)
• 某些容器会创建一个BFC
  • 根元素
  • 浮动、绝对定位、inline-block
  • Flex子项和Grid子项
  • overflow值不是visible的块盒
  • display：flow-root

BFC内的排版规则

• 盒子从上到下拜访

• 垂直margin合并

• BFC内盒子的margin不会与外面的合并

• BFC不会和浮动元素重叠