CSS学习

摘要：在了解 CSS 基本原理后，本节课进一步深入讨论，通过具体案例对于选择器的特异度展开讲解，在此基础上进一步引出 CSS 继承与布局的话题，对其定义及相关技术分别作出介绍。

1. CSS 选择器的特异度

选择器特异度和优先级之间的联系，需了解id、（伪）类、标签选择器的信息。

选择器名称	选择的内容	示例
元素选择器（也称作标签或类型选择器）	所有指定类型的 HTML 元素	p 选择 <p>
ID 选择器	具有特定 ID 的元素。单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID	#my-id 选择 <p id="my-id"> 或 <a id="my-id">
类选择器	具有特定类的元素。单一页面中，一个类可以有多个实例	.my-class 选择 <p class="my-class"> 和 <a class="my-class">
属性选择器	拥有特定属性的元素	img[src] 选择 <img src="myimage.png"> 但不是 <img>
伪类选择器	特定状态下的特定元素（比如鼠标指针悬停于链接之上）	a:hover 选择仅在鼠标指针悬停在链接上时的 <a> 元素

但现在还是有点小小分不清（尴尬）。

2. CSS 继承

继承，某些属性会自动继承父元素的计算值，除非显式指定一个值。

显式继承，指定一个值

初始值

• CSS 中，每个属性都有一个初始值

  background-color 的初始值为 transparent 显示显示 margin-left 的初始值为 0

• 可以使用 initial 关键字显式重置为初始值

  background-color: initial

3. CSS 求值过程解析

重点：formatting将计算值进一步转化为绝对值

4. CSS 布局方式及相关技术

布局是什么？

• 确定内容的大小和位置的算法
• 依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

• padding（内边距）：是指内容周围的空间。在下面的例子中，它是段落文本周围的空间。
• border（边框）：是紧接着内边距的线。
• margin（外边距）：是围绕元素边界外侧的空间。

今天的课程总结较昨天多了不少课程截图，难度稍有加大需要记得知识点也变多了，继续努力嘿嘿。

星辰大海，你我同行。