CSS3（网页编程）

目录

一、选择器

二、盒子模型

三、定位

一、选择器

CSS3 提供了多种选择器，使得我们能够更精确、更灵活地选择并样式化 HTML 元素。以下是 CSS3 中一些主要的选择器类型：

1. 元素选择器 ：
   基于 HTML 元素的名称来选择元素。

   p {color: red;}

   上述代码会选择所有的 

    元素并将它们的文本颜色设置为红色。

2. 类选择器 ：
   使用 HTML 元素的 class 属性来选择元素。

   .myClass {font-size: 20px;}

   上述代码会选择所有 class 属性为 myClass 的元素，并将它们的字体大小设置为 20 像素。

3. ID 选择器 ：
   使用 HTML 元素的 id 属性来选择元素。

   #myID {background-color: yellow;}

   上述代码会选择 id 属性为 myID 的元素，并将其背景色设置为黄色。注意，ID 应该是唯一的，一个页面内不应有重复的 ID。

4. 属性选择器 ：
   基于元素的属性和属性值来选择元素。

   a[href] {color: blue;}

   上述代码会选择所有具有 href 属性的  元素，并将它们的文本颜色设置为蓝色。

5. 伪类选择器 ：
   选择 HTML 元素的特定状态。

   a:hover {text-decoration: underline;}

   上述代码会在鼠标悬停在  元素上时，为其添加下划线。

6. 后代选择器 （也称为空格选择器）：
   选择特定元素的后代元素。

   div p {color: green;}

   上述代码会选择所有 

    元素内部的 

    元素，并将它们的文本颜色设置为绿色。

7. 子元素选择器 （使用 >）：
   选择特定元素的直接子元素。

   div > p {color: purple;}

   上述代码会选择所有作为 

    元素直接子元素的 

    元素，并将它们的文本颜色设置为紫色。

8. 相邻兄弟选择器 （使用 +）：
   选择紧接在另一个元素后的元素，且二者有相同父元素。

   div + p {margin-top: 0;}

   上述代码会选择紧接在 

    元素后的 

    元素（二者有相同的父元素），并将其上边距设置为 0。

9. 通用兄弟选择器 （使用 ~）：
   选择特定元素之后的所有兄弟元素。

   div ~ p {color: orange;}

   上述代码会选择 

    元素之后的所有 

    兄弟元素（它们有相同的父元素），并将它们的文本颜色设置为橙色。

10. 伪元素选择器 ：
    选择元素的特定部分，如首字母、首行或内容之前 / 之后的部分。

    p::first-letter {font-size: 2em;}

    上述代码会选择所有 

     元素的首字母，并将其字体大小设置为 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属性有以下可能的值：

1. static：默认值，元素按照正常的文档流进行定位。即使设置了 top、right、bottom、left 等属性，这些值也不会生效。
2. relative：相对定位。元素相对于它在正常流中的原始位置进行定位。如果没有设置偏移量（如 top、left 等），元素不会发生任何变化。相对定位会提升元素的层级，使其可以覆盖其他元素，但不会脱离文档流，不会影响其他元素的位置。
3. absolute：绝对定位。元素相对于最近的已定位父级（即 position 不为 static 的父级）进行定位。如果没有已定位的父级，那么它会相对于初始包含块进行定位。绝对定位的元素会脱离正常的文档流，其位置通过 top、right、bottom、left 属性确定。
4. fixed：固定定位。元素相对于浏览器窗口进行定位，即使页面滚动，它也会始终位于同一的位置。固定定位的元素同样会脱离文档流。
5. sticky：粘性定位。可以被看作是相对定位和固定定位的混合。元素在跨越特定滚动阈值之前为相对定位，之后为固定定位。

除了 position 属性外，还可以使用 top、right、bottom 和left属性来设置元素的偏移量，从而精确地控制元素在页面上的位置。

需要注意的是，绝对定位和固定定位的元素会生成一个块级框，而不论该元素本身是什么类型。而相对定位的元素会保持其原有的显示类型（块级或行内）。

通过合理地使用 CSS3 的定位属性，可以实现复杂的页面布局和元素排列，使网页更具吸引力和用户体验。

---

 文章制作不易，如果有帮助的话，还希望能给个 点赞 和关注 支持一下，谢谢大家！🙏🙏🙏