深入理解CSS

00 为什么学习CSS

CSS可以美化页面，拥有更好的视觉效果，可以向用户更好地传递信息

CSS发展史

CSS 1 ：始于1966年，解决网页排版布局和装饰问题。
CSS 2 ：诞生于1998年，添加定位，z-index，media 属性，表现和内容分离。
CSS 2.1：诞生于2004~2011年，目前使用最广泛的版本（IE支持），对CSS2进行修正和扩展。
CSS 3：1999年开始起草，把CSS模块化，独立升级各功能，提高网站的可维护性和性能速度。

01 基础知识

CSS：Cascading Style Sheet，层叠样式表。

层叠规则

层叠三大规则

样式表来源 > 选择器优先位置 > 源码位置

样式表来源

样式表来源的重要顺序：用户代理样式 < 用户样式表 < 作者样式表 < 作者样式表中的!important < 用户表中的!important < 用户代理样式表中的!important

一般来说，不建议使用!important，个人使用!important的场合只在覆盖UI库样式中见过

选择器优先位置

内联样式1000

id选择100

类和伪类10

元素选择器1

通配选择器0

当选择器中包含多种选择器时，需要将各种选择器的优先级相加然后再比较，但是多个相同级的选择器相加的结果不会超过上一个级别的优先级。

越详细的选择拥有更高的权重，优先级也就越高，而权重的计算也是相当值得借鉴的。

一般来说，id选择不建议使用，因为id选择具有唯一性

组合器

子组合器（>)—―匹配的目标元素是其他元素的直接后代。如: .parent >.child。相邻兄弟组合器(+)――匹配的目标元素紧跟在其他元素后面。如: p+h2。

通用兄弟组合器(~)――匹配所有跟随在指定元素之后的兄弟元素，如: li.active ~ li。复合选择器多个基础选择器可以连起来使用，如:h1.page-header。

属性选择器

通过约束属性值，div[data-title="aaa"] 伪类选择器

选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素。如:first-child ,:hover

伪元素选择器

匹配在文档中没有直接对应HTML元素的特定部分，或插入内容。如 h2:: first-letter div::before 逻辑选择器

较新的选择器:is() :has() :where() :not()

在uniapp小程序开发中貌似只能使用class选择器和上述的组合器，id和tagname都是不建议的

源码位置

对于@import的样式，根据@import的顺序

对于link和style标签的样式，根据在document中的顺序决定

所以一般是UI库放前，自己写的样式放后（在Vue中一般都会提前引入UI库）

继承

大部分可以继承的属性都与文本相关：

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关键字显式指定一个属性值从父元素传承（不过前面的大部分就都够用了，除非是使用一些其他属性）

值和单位

QQ图片20230426120110.png

在uniapp中，还有rpx等单位

盒模型

面试中被问了很多遍关于盒模型的问题...

QQ截图20230426164320.png

盒模型中，只有margin可以有负边距，其中设置顶部和左部是移动元素与前面元素重叠，而底部和右部是将后面的元素拉过来，不会移动本身的元素

未完待续...

深入理解CSS① | 青训营笔记