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) 查看哪些浏览器支持特性
(4) CSS文档（最权威）
(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)
（赤-橙-黄-绿-青-蓝-紫-赤（色相），饱和度，亮度，透明度） - 小作业：彩虹
