CSS ｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第2天
CSS是什么？
Cascading Style Sheets 用来定义页面颜色的样式
在页面中使用CSS
一共有三种方式：外链、嵌入、内联
CSS是如何工作的
浏览器渲染页面原理
HTML被HTML解析器解析成DOM树，CSS被CSS解析成CSS规则树，浏览器会将CSS规则树附着在DOM树上，并结合两者生成渲染树Render Tree，生成布局，浏览器通过解析计算出每一个渲染树节点的位置和大小，在屏幕上画出渲染树的所有节点，将布局绘制在屏幕上，显示出整个页面。
选择器
Selector
目的：找出页面中的元素，以便给他们设计样式
- 使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
伪类
不基于标签和属性定位元素
- 分类
- 状态伪类
- 结构性伪类
继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值
布局相关的技术
常规流、浮动、绝对定位
行级元素与块级元素
- 块级元素：会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；
- 行级元素：不会独占一行，设置Width、Height属性无效。可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin。
常规流
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其他元素都在常规流之内
- 常规流中的盒子，在某种排版上下文中参与布局
Flex布局 FlexibleBox
弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿水平主轴排列。
总结
CSS主要用来构建页面的样式，在学习过程中，我们要充分利用MDN和W3C CSS规范。
