这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.
CSS基础选择器
基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器
标签选择器：
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
类选择器：
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器.
id选择器 于对应元素身上的id关联，优先级高于类选择器
优先级：id选择器>类选择器>标签选择器
浏览器渲染原理
浏览器在接收到服务器返回的html页面后，
浏览器开始构建DOM树DOM TREE，遇到CSS样式会构建CSS规则树CSS RULE TREE，
遇到javascript会通过DOM API和CSSDOM API来操作DOM Tree和CSS Rule Tree，解析完成后，
浏览器引擎会通过DOM Tree 和CSS Rule Tree 来构造 Rendering Tree（渲染树），
最后，渲染树构建完成后就是 "布局" 处理，也就是确定每个节点在屏幕上的确切显示位置
下个步骤（渲染之后），开始 "绘制" ，遍历渲染树，并用UI后端层，将每一个节点绘制出来。
css常见的布局方式
浮动
定位
flex布局 flex是弹性盒子布局,在一维的平面上分割成对应的份数，子盒子选择式填充，以实现布局 父元素设置后display：flex
Grid布局 Grid网格布局负责把元素分割成网格，子盒子选择对应的网格区域去填充进去实现布局 父元素设置display：grid
display: grid
/* 声明列的宽度 */
grid-template-columns: repeat(3, 200px);
/* 声明行间距和列间距 */
grid-gap: 20px;
/* 声明行的高度 */
grid-template-rows: 100px 200px;
grid的新单位fr可以实现剩余空间的等分，repeat(2，200px)等同于 200px 200px 200px
