这是我参与「第四届青训营 」笔记创作活动的第2天
1.什么是CSS？
CSS全称（Cascading Style Sheets）中文译为层叠样式表，是用来定义页面元素的样式。
-
设置字体的颜色。 -
设置位置和大小 -
添加动画效果
2.在页面中使用CSS
3种方法：外链、嵌入、内联。
3.CSS是如何工作的
4.选择器 Selector
4.1选择器的作用
- 找出页面中的元素，以便给他们设置样式
- 使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
4.2 选择器的分类
- 通配选择器：选中页面中所有的元素
- id选择器：根据元素的id属性值选中一个元素
- 标签选择器：根据标签的名字来选中页面中的元素
- 类选择器：根据元素的class属性值选中一组元素
- 属性选择器：根据属性名字来选中页面中的元素
- 伪类选择器
- 不基于标签和属性定位元素
- 几种伪类：
- 状态伪类
- 结构性伪类
4.3 选择器的优先级
!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认
5.颜色
5.1 颜色RGB用法
RGB（红绿蓝），即颜色是由红绿蓝混合搭配出现的颜色，取值范围（0-255）。
用法：rgb（红色、绿色、蓝色）。
5.2 颜色HSL用法
HSL（Hue（色彩）、Saturation（饱和度）、Lightness（亮度）），即元素又这三种组成。
色彩取值范围（0-360）、饱和度和亮度取值范围（0-100%）
用法：hsl（色彩、饱和度、亮度）。
5.3 颜色饱和度
饱和度（alpha），即用来选择是否遮盖所做样式，取值范围（0-1）。
搭配rgb或hsl来使用，如：rgba（255,0,0,1）或hsla（0,100%，50%，1）等。
6.字体
6.1字体样式（font-family）
-
Serif衬线体：Georgia、宋体 -
Sans-Serif无衬线体：Arial、Helvetica、黑体、微软雅黑 -
Cursive手写体：Caflisch、Script、楷体 -
Fantasy：ComicSansMS、Papyrus -
Monospace等宽字体：Consolas、Courier、中文字体
注意事项：字体列表最后写上通用字体族，且英文字体放在中文字体前。
6.2字体大小（font-size）
-
关键字：small、medium、large -
长度：px、em -
百分数：相对于父元素字体大小
7.CSS盒子模型
- Content(内容) - 盒子的内容，显示文本和图像。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
8.布局
8.1 什么是布局？
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
8.2 布局的相关技术
9.常规流
9.1 dispaly属性
-
display：block（块级盒子） -
display：inline（行级盒子） -
display：inline-block（本身是行级，可以放在行级盒子中；可以设置宽高，作为一个整体不会被拆散成多行） -
display：none（排版是完全被忽略）
9.2 常规流
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其他元素都在常规流之内（in-flow）
- 常规流中的盒子，在某种排版上下文中参与布局
9.3行级排版上下文
- Inline Formatting Context(IFC)
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则：
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
text-align决定一行内合资的水平对齐vertical-align决定一个盒子在行内的垂直对齐- 避开浮动（float）元素
9.4块级排版上下文
- Block Formatting Context(BFC)
- 某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、
inline-block Flex子项和Grid子项overflow值不是visible的块盒display:flow-root
- 排版规则：
- 盒子从上到下摆放
- 垂直
margin合并 - BFC内盒子的
margin不会与外面的合并 - BFC不会和浮动元素重叠
