理解CSS｜青训营笔记

1 在页面中使用CSS

<!-- 外链 -->
<link ref="stylesheet" href="/assets/style.css">

<!-- 嵌入 -->
<style>
  li {
    margin: 0;
  }
</style>

<!-- 内联 -->
<p style="margin: 1em 0">Example</p>

2 CSS是如何工作的

3 选择器Selector

• 找出页面中的元素，以便给他们设置样式
• 使用多种方式选择元素

• • 按照标签名、类名或id
  • 按照属性
  • 按照DOM树中的位置

3.1 通配选择器

codepen.io/webzhao/emb…

* {
  color: red;
  font-size: 20px;
}

3.2 标签选择器

codepen.io/webzhao/emb…

h1 {
  color: orange;
}

3.3 id选择器

codepen.io/webzhao/emb…

#logo {
  font-size: 60px;
  font-weight: 200;
}

3.4 类选择器

codepen.io/webzhao/emb…

.done {
  color: gray;
  text-decoration: line-through;
}

3.5 属性选择器

codepen.io/webzhao/emb…

codepen.io/webzhao/emb…

codepen.io/webzhao/emb…

input[type="password"] {
  border-color: red;
  color: red;
}
[disabled] {
  background: #eee;
  color: #999;
}
a[href^="#"] {
  color: #f54767;
  background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
  padding-left: 1.1em;
}
a[href$=".jpg"] {
  color: deepskyblue;
  background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
  padding-left: 1.2em;
}

3.6 伪类选择器

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

• • 状态伪类

a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

:focus {
  outline: 2px solid orange;
}

• • 结构性伪类

li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}

codepen.io/webzhao/emb…

codepen.io/webzhao/emb…

3.7 组合

codepen.io/webzhao/emb…

codepen.io/webzhao/emb…

3.8 选择器组

body, h1, h2, h3, h4, ul, ol, li {
  margin: 0;
	padding: 0;
}

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

4 样式优先级

5 选择器的特异度

6 样式继承

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

codepen.io/webzhao/emb…

3.1 显式继承

7 初始值

CSS中，每个属性都有一个初始值

• background-color的初始值为transparent
• margin-left的初始值为0

可以使用initial关键字显示重置为初始值

• background-color: initial

8 CSS求值过程

cdpn.io/webzhao/deb…

9 布局

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

9.1 布局相关技术

• width

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

• height

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

• padding

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

• border

• • 指定容器边框样式、粗细和颜色
  • cdpn.io/webzhao/deb…
  • 3种属性

• • • border-width
    • border-style
    • border-color

• • 4个方向

• • • border-top
    • border-right
    • border-bottom
    • border-left

cdpn.io/webzhao/deb…

• margin

• • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度
  • 使用margin: auto水平居中

• • • codepen.io/webzhao/emb…

• • margin collapse

• • • codepen.io/webzhao/emb…

• box-sizing: border-box

• • 
  • codepen.io/webzhao/emb…

• overflow

• • cdpn.io/webzhao/deb…

9.2 块级vs.行级

• Block Level Box

• • 不和其它盒子并列摆放
  • 适用所有的盒模型属性

• Inline Level Box

• • 和其它行级盒子一起放在一行或拆开成多行
  • 盒模型中的width、height不适用

• 块级元素

• • 生成块级盒子
  • body、article、div、main、section、h1-6、p、ul、li、等
  • display: block

• 行级元素

• • 生成行级盒子
  • 内容分散在多个行盒（line box）中
  • span、em、strong、cite、code、等
  • display: inline

9.3 display属性

• block：块级盒子
• inline：行级盒子
• inline-block：本身是行级，可以放在行盒中；可以设置宽、高；作为一个整体不会被拆散成多行
• none：排版时完全被忽略

9.4 常规流

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

9.5 排版上下文

9.5.1 行级排版上下文

• Inline Formatting Context（IFC）
• 只包含行级盒子的容器会创建一个IFC
• IFC内的排版规则：

• • 盒子在一行内水平摆放
  • 一行放不下时，换行显示
  • text-align决定一行内盒子的水平对齐
  • vertical-align决定一个盒子在行内的垂直对齐
  • 避开浮动（float）元素*

• codepen.io/webzhao/emb…

9.5.2 块级排版上下文

• Block Formatting Context（BFC）
• 某些容器会创建一个BFC

• • 根元素
  • 浮动、绝对定位、inline-block
  • flex子项和grid子项
  • overflow值不是visible的块盒
  • display: flow-root

• BFC内的排版规则：

• • 盒子从上到下摆放
  • 垂直margin合并
  • BFC内盒子的margin不会与外面的合并
  • BFC不会和浮动元素重叠

• codepen.io/webzhao/emb…

9.5.3 Flex Box

• 一种新的排版上下文
• 它可以控制子级盒子的：

• • 摆放的流向
  • 摆放顺序
  • 盒子的宽度和高度
  • 水平和垂直方向的对齐
  • 是否允许折行

• codepen.io/webzhao/emb…
• flex-direction

• • row
  • row-reverse
  • column
  • column-reverse

• justify-content

• • 

• align-items

• • 

• align-self

• • 

• order

• • 

• flex

• • 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
  • flex-grow 有剩余空间时的伸展能力

• • • codepen.io/webzhao/emb…

• • flex-shrink 容器空间不足时收缩的能力

• • • codepen.io/webzhao/emb…

• • flex-basis 没有伸展或收缩时的基础长度
  • 

9.5.4 Grid布局

• display: grid使元素生成一个块级的Grid容器
• 使用grid-template相关属性将容器划分为网格
• 设置每一个子项占哪些行/列
• cdpn.io/webzhao/deb…
• cdpn.io/webzhao/deb…

10 float浮动

codepen.io/webzhao/emb…

11 position属性

• static 默认值，非定位元素
• relative 相对自身原本位置偏移，不脱离文档流

• • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏移
  • 使用top、left、bottom、right设置偏移长度
  • 流内其它元素当它没有偏移一样布局
  • 

• absolute 绝对定位，相对非static祖先元素定位

• • 脱离常规流
  • 相对于最近的非static祖先定位
  • 不会对流内元素布局造成影响
  • 
  • codepen.io/webzhao/emb…

• fixed 先对于视口绝对定位

• • codepen.io/webzhao/emb…