1. CSS 先导

(1) 历史

CSS was first proposed by Håkon Wium Lie on October 10, 1994. At the time, Lie was working with Tim Berners-Lee at CERN.
目前使用最广泛的版本：CSS 2.1，所有浏览器都支持
从CSS 3开始分模块，模块各自升级

(2) 特性：层叠样式表

不停对已有样式进行覆盖

样式层叠：可以多次对同一选择器进行样式声明
选择器层叠：可以用不同选择器对同一个元素进行样式声明
文件层叠：可以用多个文件进行层叠

(3) 查看哪些浏览器支持特性

caniuse

(4) CSS文档（最权威）

CSS Specification

(5) 语法

语法1 （英文符号，区分大小写）：
#id, .class
id或class中的第几个元素接 ">"
id或class中所有的元素接空格 " "

选择器 {
  属性名: 属性值;
  /*注释*/
}

语法2：at语法
a. @charset "UTF-8"; 指定文件编码（而不是字符集）
b. @import url(2.css); 引入其他CSS
c. @media (min-width: 100px) and (max-width: 200px) { 语法1 }

(6) 开发者工具调试

找到标签
查看选择器
查看样式是否被划掉
查看样式是否含警告

(7) Border调试法

border: 1px solid red;

把border放在合适的位置查看哪行代码出错

(8) 学习网站推荐

2. 文档流 Normal Flow

HTML 5中不再把元素分为内联和块级元素，只看display中的描述：内联 display: inline，块级 display: block

(1) 排列

文档中元素的流动方向：从左到右，从上到下

inline 从左到右排列，到达最右边才会换行，空间不够分成两半，第二半到下一行
block(div) 从上到下排列，且每个元素占一行，不会出现并排的现象
inline-block 也是从左到右，空间不够不会分成两半，元素放一行

(2) 宽度

inline元素不接受width设定，其宽度由其包含的所有inline元素总和决定
默认block元素宽度是能有多宽有多宽（默认 width: auto），不影响其他元素，可以用width指定宽度
大部分情况不要写width: 100%!
inline-block 元素默认宽度为其包含的所有inline元素总和，但可以通过width设置宽度

(3) 高度

inline元素不接受height设定，其高度由line-height间接确定（间接决定 -> 如果字体不一致，可能实际高度不一致，产生误差）
block元素高度由它其中的文档流元素高度确定（会包含所有的元素），可以通过height设定高度
ps. 只包裹文档流元素，脱离文档流的元素不会被包裹，如：position: absolute
inline-block 类似block，可以通过height设定高度

(4) overflow 解决方法

overflow：设定的宽度/高度 < 文档流宽度/高度

方法1：放置不处理
方法2：隐藏超出部分overflow: hidden
方法3：隐藏超出部分但可以滚动查看overflow: scroll
但有Bug：即使你的内容不overflow，也会显示滚动条
方法4：自动识别，超出时配置必要的滚动条，不超出不配置滚动条 overflow: auto
方法5：直接显示溢出部分 overflow: visible
方法6：overflow-x 和 overflow-y

(5) 脱离文档流

脱离文档流后，容器不会将其算在内

position: absolute/fixed
float

(6) 注意事项

不要在inline元素中包含block元素，否则block元素会单独占一行切断inline元素
padding增加了可视大小，但没有改变实际大小，实际高度是line-height
如果配置了滚动条，inline元素默认只在第一屏显示，后面的留空

3. 盒模型

盒模型.png

从外到内：

margin 外边距
border 边框
padding 内边距
content 内容

(1) 两种盒模型

box-sizing: content-box 内容盒（标准盒模型） content box：只包含content
box-sizing: border-box 边框盒（IE盒模型） border box：包含content、padding和border

Example:

.box{
  margin: 25px;
  border: 5px solid red;
  padding: 15px;
  width: 100px;
}

如果是box-sizing: content-box，内容100px，padding15px，border5px，100 + 15 x 2 + 5 x 2 = 140px，加上border共140px
width 和 height 是内容的宽高
如果是box-sizing: border-box，padding15px，border5px，? + 15 x 2 + 5 x 2 = 100px，加上border共100px，内容缩减为60px
width 和 height 是内容 + padding + border的宽高
border-box 更好用

(2) margin合并（只有上下合并，左右不合并）

两个上下排列的block子元素外边距合并

margin合并1.png
第一个和最后一个子元素与不设置border/padding的父元素margin合并

margin合并2.png

有border/padding/overflow: hidden 其中之一的父元素不会发生此现象
消除margin合并的方法: 变成两个inline-block

.child {
  display: inline-block;
  width: 100%; /*占满整行*/
  margin: 30px 0;
}

4. 长度单位 & 颜色

(1) 长度单位

px 像素
em 相对于自身font-size倍数
百分数
整数
rem
vw和vh

(2) 颜色

十六进制，如#FF6600
RGBA颜色，如rgb(0, 0, 0) rgba(0, 0, 0, 1)
alpha通道表透明度
hsl颜色，如hsl(360, 100%, 100%，1)
（赤-橙-黄-绿-青-蓝-紫-赤（色相），饱和度，亮度，透明度）
小作业：彩虹

2020-12-02 CSS先导