目录
一、选择器
二、盒子模型
三、定位
一、选择器
CSS3 提供了多种选择器，使得我们能够更精确、更灵活地选择并样式化 HTML 元素。以下是 CSS3 中一些主要的选择器类型：
-
元素选择器：
基于 HTML 元素的名称来选择元素。p { color: red; }上述代码会选择所有的
<p>元素并将它们的文本颜色设置为红色。 -
类选择器：
使用 HTML 元素的class属性来选择元素。.myClass { font-size: 20px; }上述代码会选择所有
class属性为myClass的元素，并将它们的字体大小设置为 20 像素。 -
ID 选择器：
使用 HTML 元素的id属性来选择元素。#myID { background-color: yellow; }上述代码会选择
id属性为myID的元素，并将其背景色设置为黄色。注意，ID 应该是唯一的，一个页面内不应有重复的 ID。 -
属性选择器：
基于元素的属性和属性值来选择元素。a[href] { color: blue; }上述代码会选择所有具有
href属性的<a>元素，并将它们的文本颜色设置为蓝色。 -
伪类选择器：
选择 HTML 元素的特定状态。a:hover { text-decoration: underline; }上述代码会在鼠标悬停在
<a>元素上时，为其添加下划线。 -
后代选择器（也称为空格选择器）：
选择特定元素的后代元素。div p { color: green; }上述代码会选择所有
<div>元素内部的<p>元素，并将它们的文本颜色设置为绿色。 -
子元素选择器（使用
>）：
选择特定元素的直接子元素。div > p { color: purple; }上述代码会选择所有作为
<div>元素直接子元素的<p>元素，并将它们的文本颜色设置为紫色。 -
相邻兄弟选择器（使用
+）：
选择紧接在另一个元素后的元素，且二者有相同父元素。div + p { margin-top: 0; }上述代码会选择紧接在
<div>元素后的<p>元素（二者有相同的父元素），并将其上边距设置为 0。 -
通用兄弟选择器（使用
~）：
选择特定元素之后的所有兄弟元素。div ~ p { color: orange; }上述代码会选择
<div>元素之后的所有<p>兄弟元素（它们有相同的父元素），并将它们的文本颜色设置为橙色。 -
伪元素选择器：
选择元素的特定部分，如首字母、首行或内容之前/之后的部分。p::first-letter { font-size: 2em; }上述代码会选择所有
<p>元素的首字母，并将其字体大小设置为 2 倍。
这些选择器可以单独使用，也可以组合使用，以创建更复杂的样式规则。通过灵活使用这些选择器，你可以精确地控制页面上的元素样式。
二、盒子模型
CSS3中的盒子模型（Box Model）是描述HTML元素布局和排版的基本概念。它涵盖了元素的内容（content）、内边距（padding）、边框（border）和外边距（margin），这些部分共同形成了一个矩形的盒子。每个盒子都可以相互嵌套，并且每个部分都可以有其自身的样式和属性。
- 内容（Content）：这是盒子模型的核心部分，显示文本、图像或其他媒体内容。
- 内边距（Padding）：内边距是内容区域与边框之间的空间。它位于内容的周围，增加了元素的总尺寸。内边距的大小可以通过CSS属性进行设置，并且可以影响盒子的实际大小。
- 边框（Border）：边框包围在内边距和内容周围，是可见的线条，用于分隔相邻的元素。边框的大小、样式和颜色都可以通过CSS进行定义，并且边框也会影响盒子的实际大小。
- 外边距（Margin）：外边距是盒子与其他元素之间的空间，用于控制元素之间的间距。外边距不会占用元素本身的空间，而是创建了一个“空白区域”，将元素与其相邻元素隔开。外边距具有一些特殊的特性，比如可以合并（在垂直方向上），并且可以用来使元素垂直居中。
盒子模型的总宽度和总高度是由内容、内边距、边框和外边距共同决定的。在CSS中，你可以通过修改这些属性的值来调整元素的尺寸和位置，从而实现复杂的页面布局和设计。
此外，CSS3还引入了一个box-sizing属性，它允许你改变盒子模型的计算方式。默认情况下，盒子的宽度和高度只包括内容区域，不包括内边距、边框和外边距。但当你将box-sizing设置为border-box时，盒子的宽度和高度将包括内容、内边距和边框，但不包括外边距。这可以使得在进行布局时更加直观和方便。
总的来说，盒子模型是CSS布局的基础，理解并掌握它对于实现精确和灵活的页面设计至关重要。
三、定位
CSS3中的定位是一种布局手段，通过定位可以将元素摆放到页面的任意位置。主要使用position属性来设置定位，该属性定义了元素的定位类型，并决定了元素如何与其他元素进行布局和定位。
position属性有以下可能的值：
- static：默认值，元素按照正常的文档流进行定位。即使设置了
top、right、bottom、left等属性，这些值也不会生效。 - relative：相对定位。元素相对于它在正常流中的原始位置进行定位。如果没有设置偏移量（如
top、left等），元素不会发生任何变化。相对定位会提升元素的层级，使其可以覆盖其他元素，但不会脱离文档流，不会影响其他元素的位置。 - absolute：绝对定位。元素相对于最近的已定位父级（即
position不为static的父级）进行定位。如果没有已定位的父级，那么它会相对于初始包含块进行定位。绝对定位的元素会脱离正常的文档流，其位置通过top、right、bottom、left属性确定。 - fixed：固定定位。元素相对于浏览器窗口进行定位，即使页面滚动，它也会始终位于同一的位置。固定定位的元素同样会脱离文档流。
- sticky：粘性定位。可以被看作是相对定位和固定定位的混合。元素在跨越特定滚动阈值之前为相对定位，之后为固定定位。
除了position属性外，还可以使用top、right、bottom和left属性来设置元素的偏移量，从而精确地控制元素在页面上的位置。
需要注意的是，绝对定位和固定定位的元素会生成一个块级框，而不论该元素本身是什么类型。而相对定位的元素会保持其原有的显示类型（块级或行内）。
通过合理地使用CSS3的定位属性，可以实现复杂的页面布局和元素排列，使网页更具吸引力和用户体验。
文章制作不易，如果有帮助的话，还希望能给个点赞和关注支持一下，谢谢大家！🙏🙏🙏
