这是我参与「第五届青训营 」伴学笔记创作活动的第2天，下面跟我一起看看青训营第二天讲了什么吧~
由于之前曾经开发过静态网站对CSS如何编写有所了解，所以本篇文章只是我的个人看法，以查漏补缺为主！
一.CSS=Cascading Style Sheets，用于定义样式，主要有以下几个功能：
- 字体、颜色
- 位置、大小
- 动画效果
二.一个CSS例子：
h1:{ color:white; font-size:14px; }
其中h1为选择器，color为迭代器，white为属性，类似“color:white;”被叫做声明。
三.CSS的三种使用方式：
- 外链(preferred)
- 嵌入
- 内联（直接把CSS写在html中，不推荐）
四.CSS与HTML等编译时的步骤：
CSS与HTML单独解析，通过DOM把CSS附加到DOM树形成渲染树再展示出来。
五.关于一些选择器的基本知识
- 通配选择器： *.{}
- 标志选择器: h1{}
- id选择器： 设置id属性后，使用“#id属性”（一般id是唯一的）
- 类选择器：class='xxx' 调用时：.xxx{} (类可以出现多次）
- 属性选择器： 如input中的disabled属性：[disabled]{}
- 属性值做匹配： 如a[href^='#']表示标签为a,href属性值以“#”开头（$=表示以某某结尾）
六.关于伪类
分为状态伪类和结构伪类：
- 状态伪类：处于某一种状态，比如链接: a:link{color:black;};a:visited{color:gray;};a.hover（指的是鼠标悬停在链接上）；a.active(按下去之后的情况）
- 结构伪类：根据节点在DOM树中的位置确定：如： li:first-child.{} 表示选中li列表中的第一个元素
七.组合
- ab:同时满足ab，如 input:focus
- a b:选中b如果它是a的子孙
- a>b:选中b如果它是a的子元素
- a~b： 选中b如果它在a后且和a同级
- a+b:选中b，如果它紧跟在a后
八.选择器组：用","分割即可，比如:a1,a2{}
九.颜色
-
000000(前两个数字代表红，中间代表绿，最后两个代表蓝）（可以再加两位代表透明度）
- rgb(xx,xx,xx) 每个数字取值范围为0-255,可以最后加入透明度（0~1）
- HSL:hsl(xx,xx%,xx%) 第一个代表色相，取值范围为0-360；第二个代表饱和度，取值范围为0-100%；第三个代表亮度，取值范围为0~100%（可以最后加入透明度）
- 关于透明度：越低越透明
十.字体
- font-family:{xx,xx,xx}(设置多个字体因为每个设备可以用的字体不同
- font-size: _px / _em/ _%(em是相对单位）
- font-style:normal/italic(斜体）
- font-weight:粗细度
十一.行高
- 1.6（行高是字体的多少倍）
- 45（实际大小）
十二.对齐（text-align)
- left
- right
- center
- justify(拉长空格，使得文本好看，但是可能由于最后一行比较短对最后一张不生效）
十三.首行缩进：text_indent : _px
十四.关于空格
- 正常情况写了多个空格只会有一个空格（合并空格）
- nowrap:强制不换行
- pre:会保留所有空格
- pre-wrap:一行显示不下，则自动换行（有换行，保留多个空格）
- pre-line:合并空格，保留换行
十五.调试：检查+CTRL+SHIFT+I
十六.特异度(当多个选择器对应同一个元素时判断应该使用哪一个选择器）
规则：id（#）>（伪）类（如'.':'':hover',':focus'等）>标签（如h1,div,:before,:after等）
十七.继承：和模型相关的没有办法继承(如box-sizing)，但是如color、font-size等可以继承
如何使得原先无法继承的属性变得可以继承？ {box-sizing:inherit;}
十八.关于计算值和使用值：计算值指的是拿到CSS后可以得到的值，比如em转化为px;使用值在计算值后转化百分比等
十九.关于布局
- 常规流：行级、块级、表格布局、Grid布局、FlexBox等
- 块级只能自己独占一行，适用于所有属性(display:block)
- 行级可以和其他行级一起放/放在一行，不能指定宽高(display:inline)
- inline-block:本身属于行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
- 浮动
- 绝对定位
二十.关于position属性
- static:默认值。非定位元素
- relative:相对自己原本位置偏移
- absolute:绝对定位，相对于非static祖先元素定位
- fixed：相对于窗口绝对定位，滚动不影响
