深入理解CSS
课程概述
为什么学习CSS？
解决网页排版布局和装饰问题第一个有层叠概念的语言，对CSS2的修正，扩展代替CSS2，表现和内容分离，规范模块化发展样式丰富、酷炫提高网站的可维护性以及性能速度。
一、基础知识
Cascading规则、选择器、继承、值和单位、盒模型
（1）层叠、优先级
叠层-解决冲突
样式表-规则声明的集合-产生冲突-解决冲突
层叠三大规则-样式表来源-选择器优先级-源码位置
样式表来源重要排序
用户样式表
作者样式表
作者样式表中的！important
用户样式表中的！important
用户代理样式表中的！important
（2） 选择器有哪些?基础选择器
#id——ID选择器。Tagname—一类型选择器或者标签选择器。62.29.class一―类选择器。*――通用选择器。该选择器匹配所有元素组合器
子组合器(>)—―匹配的目标元素是其他元素的直接后代。如:.parent >.child。相邻兄弟组合器（+)—―匹配的目标元素紧跟在其他元素后面。如: p +h2。
通用兄弟组合器(~)-―匹配所有明随左地宁元去心儿'口l。如: p +h2。6228复合选择器多个基础选择器可以连起来使用，如:h1.page-header。
属性选择器
通过约束属性值, div[data-title=“aaa"]伪类选择器
选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素。如:first-child ,:hover伪元素选择器
匹配在文档中没有直接对应HTML.元素的特定部分，或插入内容。如 h2:: first-letter, div:.before
逻辑选择器
较新的选择器:is( :has() :where() :not()
（3） 叠层、优先级
由叠层概念引申出的CSS代码good practice
选择器尽量少用ID
尽量不要用！important
自己的样式加载在引用库样式的后面
继承：
大部分具有继承性的属性跟文本相关：
color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、 white-space以及word-spacing
还有少部分列表、表格的属性
可以使用inherit关键字显式指定一个属性值从其父元素继承。
CSS的值和单位
单位：长度：绝对长度和相对长度
角度：deg,grad,turn,rad
时间：s ms
分辨率：dpi,dpcm,dppx
值：文学类：比如像initial这种关键字，颜色，位置
数值类：比如z-index:1这种数值或者带有单位的数值、百分比等
函数生成：比如calc(),min(),max()等
（4）盒模型
浏览器根据视觉格式化模型将所有元素表示为盒子模型，CSS通过盒模型layout
控制盒子类型
display: block、inline、inline-block、flex、...控制盒子大小&计算方式
width，height ...
box-sizing : content-box、border-box
控制盒中内容流
overflow: auto、scroll、hidden、 ...
控制定位
position: static、relative、absolute、fixed、sticky
是否可见
visibility: visible、hidden、...
