1.CSS（Cascading Style Sheets），层叠样式表，用于定义页面元素的样式。
2.样式：内联、内嵌、外链
内联：<a href="aa.com" style="color:blue">你好</a>
内嵌：<style> span{ color:red; } </style>
外链：<link rel="stylesheet" href="/assets/style1.css">
3.如何工作的：浏览器页面加载并解析html，然后会加载并解析css、创建DOM树，css添加样式到DOM节点上，将页面渲染出来。
4.选择器：
①标签选择器
p { color: orange; font-size: 20px; }
②类选择器<div class="haha">css学习</div> .haha{font-size=13px}
③id选择器 <p id="logo">在山的那边海的那边</p><style> #logo { font-size: 30px; font-weight: 170; }</style>
④通配选择器
*{ color: red; font-size: 20px; }
⑤伪类选择器 a:hover{color:orange;}
⑥属性选择器 [disabled] { background: #eee; color: #999; }
⑦兄弟选择器
⑧结构选择器
⑨结构选择器（根据DOM树中的节点位置）
5.颜色
rgb、rgba、hsl、hsla
6.字体 font-size、font-family、font-style
、font-weight ...
7.样式优先级 可以通过特异度进行计算
8.继承：某些属性会自动继承其父元素的计算值，除非显式指定一个值
在这个例子中，p、em和strong都继承body的属性，em和strong会继承p的属性，但em指定了颜色，所以em这里字体是红色而不是蓝色。
9.布局 常规流（行级、块级、表格布局、FlexBox、Grid布局）、浮动、绝对定位
盒子模型：
margin：外边距，border：边框，padding：内边距
·width：指定content box的宽度，取值为长度、百分数（相对于容器的content box宽度）、auto（由浏览器根据其他属性确定）
·height：指定content box的高度，取值为长度、百分数（相对于容器的content box高度，只有容器指定了高度，百分数才生效）、auto（由内容计算得来）
·margin：auto水平居中 margin collapse默认竖直方向上取最大margin作为间距
·box-sizing：控制元素的盒模型处理方式，决定如何计算元素的总宽和总高，有border-box和content-box两个取值。
【content-box是默认值，它遵循标准的CSS盒模型。设置元素的width和height时，这些值仅包括内容区域的大小，不包括边框（border）和内边距（padding）。如果元素有边框和内边距，它们会增加到元素的总尺寸上。】
【border-box】当设置这个值时，元素的width和height包括内容、内边距和边框的宽度，但不包括外边距（margin）。这意味着，如果为元素设置了width为100px，那么这100px将包含内容、边框和内边距的宽度。这种模式使得管理元素的尺寸更加直观和容易。
·overflow：控制流溢出显示，巨顶是否建材溢出区域的内容或者添加滚动条，有auto、visible、hidden、scroll等取值。
10.块级、行级元素
display属性有inline、block、inline-block（本身是行级，可以放在行盒中，可以设置宽高；作为一个整体不会被拆散成多行）、none
