HTML5 CSS——Day6

HTML5+CSS——Day6

• • 盒子模型
  • • 盒子模型概述
    • 宽度和高度
    • 内边距
    • 边框
    • 外边距
    • 外边距合并
    • BFC——块级格式化上下文
    • • 概念
      • 实现BFC属性的方法
      • BFC的作用
      • 解决外边距塌陷
    • 定位
    • • position属性
      • position: static;
      • position: relative;
      • position: fixed;
      • position: absolute;
      • position: sticky;
      • 重叠元素
    • 背景图像
    • • 背景重复
      • 背景位置
      • 简写背景属性
    • 图像精灵
    • • 图像精灵实例
      • 图像精灵-悬停效果
    • 浮动和清除
    • • float属性
      • clear属性
      • overflow
      • CSS清除浮动影响的方式
    • CSS对齐方式
    • • 元素居中对齐
      • 文本居中对齐
      • 左右对齐-使用定位方式
      • 左右对齐-使用float方式
      • 文本垂直居中对齐-使用padding
      • 文本垂直居中-使用line-height
      • 垂直居中-使用position和transform
    • display属性
    • • 隐藏元素
    • 块和内联元素
    • • display:inline-block
    • 伪类：
    • 伪元素
    • 超链接
    • CSS列表
    • • HTML列表和CSS列表属性
      • 不同的列表项目标记
      • 图像作为列表项标记
      • 删除默认设置
      • 设置列表的颜色样式
    • CSS表格
    • • 边框
      • 宽度和高度
      • 水平对齐
      • 垂直对齐
      • 表格内边框
      • 水平分割线
      • 可悬停表格
      • 条纹表格
      • 表格颜色
    • CSS表单
    • • 修改表单元素的外观：
      • 修改文本输入框：
      • 修改选择框（下拉框）：
      • 修改单选按钮和复选框：
      • 修改按钮：
    • CSS尺寸
    • CSS媒体查询
    • • 媒体类型查询语法
      • 菜单的媒体查询
      • 列表的媒体查询
    • !important的规则
    • CSS变量
    • • var()函数

盒子模型

盒子模型概述

CSS盒子模型是一种用于描述元素在页面中占据空间的模型。它将每个元素看作是一个矩形的盒子，每个盒子由四个部分组成：内容区域、内边距、边框和外边距。

• 内容区域（Content Area）：包含元素的实际内容，比如文本、图片或其他嵌套的元素。

• 内边距（Padding）：围绕在内容区域外部的空白区域，用于控制内容与边框之间的距离。

• 边框（Border）：围绕在内边距外部的线或边界，用于定义元素的外部边界。

• 外边距（Margin）：围绕在边框外部的空白区域，用于控制元素与相邻元素之间的距离。

这些部分一起决定了元素在页面中的总尺寸。CSS盒子模型的默认行为是将盒子的宽度和高度应用到内容区域的边界，包括内边距和边框。外边距则是指定元素与相邻元素之间的距离。

可以使用CSS的width和height属性来设置元素的宽度和高度，padding属性来设置内边距，border属性来设置边框样式和大小，以及margin属性来设置外边距。

总结起来，CSS盒子模型提供了一种灵活的方式来控制元素在页面布局中的尺寸、间距和边界，使得网页设计更加可控和自适应。

宽度和高度

CSS盒子模型的宽度和高度是指整个盒子模型所占据的空间大小，包括内容区域、内边距、边框和外边距。

要设置元素的宽度和高度，可以使用CSS的width和height属性。

• width属性用于设置元素的宽度，可以接受以下值：

  • 固定像素值（px）：例如，width: 200px;
  • 相对单位（%）：相对于父元素的宽度的百分比。例如，width: 50%; 表示元素宽度为父元素宽度的50%。
  • 预定义关键字：例如，width: auto; 表示元素的宽度由其内容决定。

• height属性用于设置元素的高度，其用法与width属性类似。

例如，以下是一些使用width和height属性设置盒子模型宽度和高度的示例：

div {
  width: 300px;
  height: 200px;
}

p {
  width: 50%;
  height: 150px;
}

img {
  width: auto;
  height: 80%;
}

在上面的示例中，div元素的宽度为300像素，高度为200像素；p元素的宽度为父元素宽度的50%，高度固定为150像素；img元素的宽度由其内容决定，高度为父元素高度的80%。

需要注意的是，设置盒子模型的宽度和高度时，会包括内边距、边框和内容区域。如果同时设置了这些部分的大小，它们会相加而得到元素的总宽度和高度。

内边距

盒子模型的内边距（padding）指的是元素内容区域与元素边框之间的空白区域。内边距可以用于调整元素内容与边框之间的距离，给元素提供额外的空间或视觉效果。

要设置盒子模型的内边距，可以使用CSS的padding属性。padding属性可以接受一个值或四个值来指定各个方向的内边距。

当指定一个值时，表示对所有方向使用相同的内边距。例如：padding: 10px; 表示所有方向的内边距都为10像素。

当指定四个值时，按照顺序依次指定上、右、下、左四个方向的内边距。例如：padding: 10px 20px 15px 30px; 表示上边距为10像素、右边距为20像素、下边距为15像素、左边距为30像素。

此外，还可以使用缩写的形式，指定两个值或三个值来设置内边距。例如：padding: 10px 20px; 表示上下方向的内边距为10像素，左右方向的内边距为20像素。而 padding: 10px 20px 15px; 则表示上边距为10像素，左右边距为20像素，下边距为15像素。

下面是一些使用padding属性设置内边距的示例：

div {
  padding: 10px; /* 四个方向的内边距都为 10px */
}

p {
  padding: 15px 20px; /* 上下方向的内边距为 15px，左右方向的内边距为 20px */
}

span {
  padding: 5px 10px 15px 20px; /* 上边距为 5px，右边距为 10px，下边距为 15px，左边距为 20px */
}

需要注意的是，内边距会改变元素的总尺寸。设置较大的内边距可能导致元素在页面布局中占据更多的空间。

css3的box-sizing属性给了开发者选择盒模型解析方式的权利。W3C的盒模型方式被称为“content-box”，IE的被称为“border

box”，使用box-sizing: border-box;就是为了在设置有padding值和border值的时候不把宽度撑开。

实例：

div.border-box {
width: 300px;
padding: 50px;
box-sizing: border-box;
color: white;
background-color: red;
}

边框

CSS盒子模型是描述网页中元素的布局和尺寸的基本概念。其中，边框是盒子模型的一部分，可以通过CSS来定义和样式化。

边框由四个边界组成：上边框（top border）、右边框（right border）、下边框（bottom border）和左边框（left border）。可以使用CSS的border属性来设置它们的样式。

下面是一些常用的CSS属性，用于设置边框样式：

1. border-width：设置边框的宽度，可以设置一个值，如border-width: 1px;，也可以分别设置上/右/下/左四个边界的宽度，例如border-width: 1px 2px 3px 4px;。

2. border-style：设置边框的样式，常用的样式有实线（solid）、虚线（dashed）、点状线（dotted）等等。可以使用简写形式，例如border-style: solid;，也可以单独设置每个边界的样式，例如border-top-style: solid;。

3. border-color：设置边框的颜色，可以使用具体的颜色值，例如border-color: red;，也可以单独设置每个边界的颜色，例如border-top-color: red;。

还有一些其他的属性可以用于更加精确地控制边框的样式，例如border-radius可以设置边框的圆角，border-image可以使用图片来定义边框等等。

通过组合和调整这些属性，你可以创建各种不同样式的边框来符合你的设计需求。

外边距

CSS盒子模型的外边距（margin）用于控制元素与其周围元素之间的间距。边距会在元素的边界外创建一个空白区域，用于分隔元素与其他元素之间的距离。

外边距可以通过CSS的margin属性来设置，具体的用法如下：

1. margin：设置四个方向（上、右、下、左）的外边距为相同的值。例如，margin: 10px;会将上、右、下、左四个方向的外边距都设置为10像素。

2. margin-top、margin-right、margin-bottom、margin-left：分别设置上、右、下、左四个方向的外边距。例如，margin-top: 10px;会将上方向的外边距设置为10像素。

3. margin: top right bottom left;：分别设置上、右、下、左四个方向的外边距。例如，margin: 10px 20px 30px 40px;会将上边距设置为10像素，右边距设置为20像素，下边距设置为30像素，左边距设置为40像素。

4. margin: auto;：将元素的外边距设置为自动，使其在水平方向上居中对齐。这通常与固定宽度的元素一起使用。

此外，外边距还有一些补充的属性和值，例如margin-collapse用于控制相邻元素之间的外边距合并，margin-top:auto和margin-bottom:auto用于垂直居中元素等等。

需要注意的是，元素的外边距不会影响元素的背景和边框，只会影响元素与其他元素之间的距离。

外边距合并

外边距合并（Margin Collapsing）是指在两个或多个相邻的元素之间，它们的外边距会合并成一个较大的外边距的现象。外边距合并通常发生在垂直方向上，并且有一些规则和条件对其产生影响。

下面是一些外边距合并的情况：

1. 相邻的兄弟元素：当两个相邻的兄弟元素没有边框、内边距或块格式化上下文（BFC）等隔离它们时，它们的上下外边距会合并。合并后的外边距取两者中的较大值。

2. 父元素与第一个/最后一个子元素：如果父元素没有边框、内边距、高度或最小高度，并且第一个或最后一个子元素的外边距与父元素的外边距相邻，则它们的上下外边距也会合并。

3. 空块元素：如果一个没有内容的块级元素没有上内边距、上边框和上外边距，或者它的下外边距没有与其他元素的外边距相邻，则它的上下外边距会合并。

需要注意的是，外边距合并只会发生在普通流（flow）中的块级元素上，而对于浮动、绝对定位或具有溢出属性的元素不会产生外边距合并。

为了解决外边距合并的问题，可以使用以下方法之一：

• 设置元素的边框、内边距或高度来隔离外边距。
• 使用浮动、绝对定位或溢出属性来避免外边距合并。
• 使用BFC（块格式化上下文）来创建一个新的块级容器，以阻止外边距合并的发生。

BFC——块级格式化上下文

概念

根据CSS规范，外边距合并指的是在一些特定情况下，两个垂直相邻的元素的外边距会合并成一个外边距。下面是一些外边距合并会发生的情况：

1. 相邻的兄弟元素：当两个相邻的兄弟元素都只有垂直外边距，且它们没有边框、内边距或清除浮动，那么它们的外边距会合并。合并后的外边距取两者中的较大值。

2. 父元素与第一个/最后一个子元素：当一个父元素没有边框、内边距、行内内容或高度，并且它的第一个或最后一个子元素的外边距与父元素的外边距相邻，那么它们的外边距也会合并。合并的外边距同样取两者中的较大值。

这种外边距合并的行为是CSS规范中明确定义的，它们的目的是简化布局并提供一致的外边距效果。但有时候它可能对布局产生意外的影响。

如果你希望避免外边距合并，可以尝试以下方法：

• 将一个或两个元素设置为浮动或使用绝对定位。
• 在两个相邻的兄弟元素之间插入一个间隔元素，例如一个空的 <div> 元素，给它一个很小的高度或边框来阻止合并。
• 使用CSS的padding属性来代替外边距实现间距效果。

实现BFC属性的方法

1. 浮动元素，float 除 none 以外的值

2. 定位元素，position的值不是static或者relative。

3. display 为 inline-block 、table-cell、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid

4. overflow 除了 visible 以外的值（hidden，auto，scroll）

5. 根元素<html> 就是一个 BFC

BFC的作用

以下是BFC（块格式化上下文）的准确作用：

1. 清除浮动：BFC可以包含浮动元素并防止浮动元素造成父容器塌陷。当一个元素的浮动子元素超出了其父容器的高度时，该元素可以形成BFC，使其可以正常包含浮动元素，而不会导致其高度塌陷。

2. 阻止边距合并：在BFC中，垂直相邻的块级元素的外边距不会发生合并。这意味着在两个相邻元素之间添加外边距时，它们的外边距不会合并为一个，而是保留各自的外边距。

3. 控制元素的布局：BFC中的元素可以通过设置浮动、清除浮动和使用定位等技术来精确地控制其布局。BFC可以防止元素与浮动元素重叠，并按照预期的方式进行布局。

4. 防止文字环绕：在BFC中，浮动元素不会影响文本内容的布局，文本会自动环绕浮动元素并填充其周围的空间，而不会出现文字环绕的情况。

通过形成BFC，我们可以解决浮动元素引起的布局问题，控制元素的位置和布局，并实现更符合预期的网页布局效果。

要创建一个BFC，可以使用以下方法之一：

• 设置元素的overflow属性为auto、hidden、scroll或auto值
• 使用display属性为inline-block、table-cell、table-caption、flex、grid或flow-root等块级值
• 使用float属性来设置浮动
• 通过设置元素的position属性为absolute或fixed来创建BFC

解决外边距塌陷

满足以下条件就会产生外边距塌陷现象：

1. 子元素在父元素里面
2. 子元素中有margin-top或者margin-bottom值

解决方案：

• 第一种：给父元素增加内边距padding值
• 第二种方式：父元素增加边框border值
• 第三种方式：父元素增加overflow：hidden
• 第四种方式：给父元素或者子元素增加浮动，让其脱离标准流都可以
• 第五种：将父元素转变为行内块元素，display：inline-block
• 第六种：给父元素或者子元素定位都可以，原理同样是使其脱离标准流，不过只能用绝对定位和固定定位
• 第七种：给父盒子增加flex或者inline-flex

定位

position属性

position 是 CSS 中用于定位元素的属性。它指定了元素在文档中的定位方式。position 属性有以下几个可能的取值：

1. static（默认值）：元素在文档中遵循正常的文档流定位，不做特殊的定位处理。

2. relative：元素相对于其正常文档流中的位置进行定位。通过设置 top、bottom、left、right 属性可以调整元素相对于其初始位置的偏移量。相对定位的元素仍然占据原来的空间，它的偏移不会影响其他元素的布局。

3. absolute：元素相对于首个非静态（position 不是 static）定位父元素进行定位。通过设置 top、bottom、left、right 属性可以确定元素的位置。绝对定位的元素会从文档流中脱离，不占据空间，它的位置会相对于最近的定位祖先元素或根据文档进行定位。

4. fixed：元素相对于浏览器窗口进行定位，即使页面滚动，它仍然会保持在指定的位置。通过设置 top、bottom、left、right 属性可以确定元素的位置。固定定位的元素也会从文档流中脱离，不占据空间。

5. sticky：元素根据用户滚动的位置进行定位，初始时遵循正常的文档流定位，当滚动到特定位置时，变为固定定位。通过设置 top、bottom、left、right 属性可以确定元素在变为固定定位之前或之后的位置。

这些取值可以用于控制元素在页面中的精确定位。通过结合这些定位属性和其他的定位相关属性（如 top、bottom、left、right、z-index 等），可以实现各种布局和效果需求。

position: static;

position: static; 是 position 属性的默认值，也是最常见的取值之一。当元素的 position 属性设置为 static 时，元素会按照正常的文档流进行定位，不会受到任何偏移或定位的影响。

具体特点如下：

• 元素处于正常的文档流中，按照 HTML 文档的顺序在页面中从上到下渲染。
• top、bottom、left、right 属性对 static 定位的元素无效。
• 元素的偏移和位置与其他元素无关，不会影响相邻元素的布局。
• z-index 属性对 static 定位的元素同样无效。

如果没有特定的定位需求，大多数元素都会使用 position: static;，因为它是默认值，同时会保持元素在正常文档流中的位置。

以下是一个示例，展示了一个使用 position: static; 的元素：

<div class="container">
  <p>这是一个静态定位的元素。</p>
</div>

.container {
  position: static;
}

position: relative;

position: relative; 是 position 属性的一个取值，用于相对定位元素。将元素的 position 属性设置为 relative 时，元素相对于其正常文档流中的位置进行定位，但仍保留其在文档流中的空间，不会对其他元素的布局产生影响。

具体特点如下：

• 元素在文档流中仍占据原来的位置，不会脱离文档流。
• 可以通过设置 top、bottom、left、right 等属性来调整元素相对于其初始位置的偏移量。
• 其他元素的布局不受相对定位元素的影响，即使相对定位元素发生偏移，其他元素的位置仍保持不变。
• 如果没有指定偏移量，则元素的位置与正常文档流中的位置相同。

以下是一个示例，展示了使用 position: relative; 的元素：

<div class="container">
  <p class="box">这是一个相对定位的元素。</p>
</div>

.box {
  position: relative;
  top: 20px;
  left: 10px;
}

在上述示例中，元素 .box 的位置相对于其正常文档流中的位置向下偏移了 20px，向左偏移了 10px。

position: fixed;

position: fixed; 是 position 属性的一个取值，用于固定定位元素。将元素的 position 属性设置为 fixed 时，元素相对于浏览器窗口进行定位，即使页面滚动，元素也会保持在指定的位置。

具体特点如下：

• 元素的位置相对于浏览器窗口而非文档流进行定位。
• 元素的位置固定不变，无论页面如何滚动，元素始终保持在指定的位置。
• 可以通过设置 top、bottom、left、right 等属性来确定元素在窗口中的位置。
• 固定定位的元素不会占据文档流中的空间，它会浮动在页面的顶部，其他元素不会受其影响。

以下是一个示例，展示了使用 position: fixed; 的元素：

<div class="container">
  <p class="box">这是一个固定定位的元素。</p>
</div>

.box {
  position: fixed;
  top: 20px;
  left: 10px;
}

在上述示例中，元素 .box 的位置固定在浏览器窗口的左上角，向下偏移了 20px，向右偏移了 10px。

需要注意的是，固定定位的元素会相对于其最近的具有非静态定位（position 不是 static）的父元素进行定位。如果没有找到这样的父元素，则元素相对于窗口进行定位。

position: absolute;

---

position: absolute; 是 position 属性的一个取值，用于绝对定位元素。将元素的 position 属性设置为 absolute 时，元素相对于其最近的具有非静态定位（position 不是 static）的父元素进行定位。

具体特点如下：

• 元素的位置相对于其最近的非静态定位的父元素进行定位，如果没有符合条件的父元素，则相对于文档进行定位。
• 可以通过设置 top、bottom、left、right 等属性来确定元素在父元素中的位置。
• 绝对定位的元素脱离了文档流，不占据空间，能够覆盖在其他元素之上。
• 其他元素的布局会忽略绝对定位的元素，即使绝对定位的元素发生偏移或改变尺寸，其他元素的位置也不会受到影响。

以下是一个示例，展示了使用 position: absolute; 的元素：

<div class="container">
  <p class="box">这是一个绝对定位的元素。</p>
</div>

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.box {
  position: absolute;
  top: 50px;
  left: 50px;
}

在上述示例中，容器元素 .container 设置了相对定位，而绝对定位的元素 .box 相对于 .container 进行定位。.box 的位置距离 .container 的顶部和左侧分别是 50px。

需要注意的是，如果所有的父元素都没有明确设置非静态定位，绝对定位的元素会相对于文档进行定位，即相对于视窗。

希望这个解答能够满足你的疑问。如果你还有其他问题，请随时提问。

position: sticky;

position: sticky; 是 position 属性的一个取值，用于粘性定位元素。将元素的 position 属性设置为 sticky 时，元素在滚动时会根据设定的偏移量，相对于其最近的具有滚动机制的父元素或容器进行定位。

具体特点如下：

• 元素在滚动到指定阈值时会变为固定定位，超过阈值时会恢复为正常的文档流定位。
• 可以通过设置 top、bottom、left、right 等属性来确定元素在父元素中的位置。
• 粘性定位的元素在未固定时会占据正常的文档流空间，固定后会脱离文档流，不再影响其他元素的布局。
• 粘性定位的元素可以设置阈值，即触发固定定位的滚动距离，可以使用 top、bottom、left、right 等属性来指定。

以下是一个示例，展示了使用 position: sticky; 的元素：

<div class="container">
  <p class="box">这是一个粘性定位的元素。</p>
</div>

.box {
  position: sticky;
  top: 20px;
}

在上述示例中，元素 .box 在滚动到离顶部距离小于等于 20px 的位置时会变为固定定位，超过这个距离时会恢复为正常的文档流定位。

需要注意的是，粘性定位的元素会相对于其最近的具有滚动机制的父元素进行定位，而不是整个文档或窗口。

重叠元素

重叠元素是指两个或多个元素在布局中彼此重叠部分的情况。在默认情况下，元素在文档流中依照其在 HTML 中的顺序进行布局，后面的元素会覆盖前面的元素，从而导致重叠现象。

造成元素重叠的常见原因包括：

1. 定位：如果使用绝对定位（position: absolute;）或固定定位（position: fixed;）将元素定位到相同的位置上，这些元素可能会发生重叠。
2. 浮动：当使用浮动（float: left; 或 float: right;）将元素浮动到一侧时，它可能会与其他浮动的元素重叠。
3. 负边距：应用负边距（margin: -10px;）或边框宽度和填充导致元素重叠。

为了解决元素重叠问题，可以采取以下方法：

1. 调整定位：使用适当的定位属性（例如 relative、absolute 或 fixed）和偏移值（top、bottom、left、right）来改变元素的位置。
2. 清除浮动：在浮动元素的父元素上应用清除浮动的样式，例如使用 clearfix 类或使用 clear: both;。
3. 调整边距和填充：通过调整边距（margin）和填充（padding）的值来避免元素之间的重叠。
4. 使用 z-index：使用 z-index 属性来指定元素的堆叠顺序，较高的 z-index 值会使元素位于较低的元素之上。

请注意，重叠元素的最终显示效果还可能受到 CSS 盒模型、定位上下文和其他样式属性的影响。

背景图像

background-image是CSS属性之一，用于设置HTML元素的背景图像。通过background-image属性，可以将一个图片文件作为元素的背景，从而为元素增加视觉效果。

background-image属性的语法如下：

selector {
  background-image: url(path/to/image.jpg);
}

其中，selector是元素的选择器，url(path/to/image.jpg)是图片文件的路径。路径可以是相对路径（相对于CSS文件的位置）或绝对路径。

此外，可以通过background-image属性设置多个图片，用逗号分隔：

selector {
  background-image: url(image1.jpg), url(image2.jpg);
}

这样，会按照设置的顺序将多个图片叠加在一起显示。

还可以使用其他属性来调整背景图像的显示方式，例如background-repeat用于控制图像的平铺方式，background-size用于设置图像的大小，background-position用于设置图像的位置等。

总结起来，background-image是一个用于设置HTML元素背景图像的CSS属性，可以通过它实现丰富的背景效果。

背景重复

背景重复（background-repeat）是CSS属性之一，用于控制背景图像在元素中的重复方式。当背景图像的尺寸小于元素的尺寸时，可以使用background-repeat来指定图像的重复方式，以填充整个元素区域。

background-repeat属性的语法如下：

selector {
  background-repeat: value;
}

其中，selector是元素的选择器，value是一个关键字或关键字组合，用于指定图像的重复方式。

常用的background-repeat关键字包括：

• repeat（默认值）：在水平和垂直方向上重复图像，直到填满整个元素区域。
• repeat-x：只在水平方向上重复图像。
• repeat-y：只在垂直方向上重复图像。
• no-repeat：不重复图像，仅显示一次。

可以通过将多个关键字组合在一起，来进行更精细的控制，例如：

selector {
  background-repeat: repeat-x repeat-y;
}

这样，图像既在水平方向上重复，又在垂直方向上重复。

另外，通过设置背景图像的大小和定位，也可以影响背景重复的效果。例如使用background-size和background-position来调整背景图像在重复过程中的大小和位置。

总结起来，通过background-repeat属性，可以控制背景图像在元素中的重复方式，以满足不同的背景设计需求。

背景位置

背景位置（background-position）是CSS属性之一，用于控制背景图像在元素中的位置。通过设置background-position，可以将背景图像放置在元素的特定位置，从而实现自定义的背景显示效果。

background-position属性的语法如下：

selector {
  background-position: value;
}

其中，selector是元素的选择器，value是一个关键字或长度值组合，用于指定背景图像的位置。

常用的background-position关键字包括：

• top left：将背景图像置于元素的左上角。
• top center：将背景图像置于元素的上中部。
• top right：将背景图像置于元素的右上角。
• center left：将背景图像置于元素的左中部。
• center center（默认值）：将背景图像置于元素的中心。
• center right：将背景图像置于元素的右中部。
• bottom left：将背景图像置于元素的左下角。
• bottom center：将背景图像置于元素的下中部。
• bottom right：将背景图像置于元素的右下角。

此外，还可以使用长度值来精确指定背景图像的位置，如使用像素值或百分比值：

selector {
  background-position: 10px 20px; /* 水平位置为10像素，垂直位置为20像素 */
}

selector {
  background-position: 50% 50%; /* 水平位置为50%，垂直位置为50% */
}

可以使用两个值的组合，第一个值表示水平位置，第二个值表示垂直位置。

另外，也可以使用关键字和长度值的组合，如：

selector {
  background-position: top 10px;
}

这样，背景图像会在垂直方向上置顶，并在水平方向上向右偏移10像素。

通过调整background-position，可以精确控制背景图像在元素中的位置，以实现所需的视觉效果。

简写背景属性

可以使用简写的背景属性（background）来同时设置背景图像、颜色、重复、位置等多个背景相关的属性。使用背景属性的简写形式可以提高代码的简洁性和可读性。

背景属性的语法如下：

selector {
  background: value;
}

其中，selector是元素的选择器，value是一个用空格分隔的多个属性值，用于指定背景相关的属性。

常用的背景属性值包括：

• 背景颜色（background-color）：可以设置任何有效的CSS颜色值。
• 背景图像（background-image）：可以设置一个或多个图像的URL。
• 背景重复（background-repeat）：可以设置图像的重复方式。
• 背景位置（background-position）：可以设置图像的位置。
• 背景尺寸（background-size）：可以设置图像的大小。

下面是一个背景属性的示例：

selector {
  background: #f3f3f3 url(image.jpg) no-repeat top left;
}

这个例子中，背景颜色设置为#f3f3f3，背景图像为image.jpg，不重复，位置在左上角。

需要注意的是，使用背景属性的简写形式时，不设置的属性会采用默认值。如果某个属性没有设置，那么该属性会应用默认值或继承自父元素的值。

总结起来，背景属性的简写形式能够同时设置背景图像、颜色、重复、位置等多个背景相关的属性，提高代码简洁性和可读性。

图像精灵

图像精灵是单个图像中包含的图像集合。

包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。

使用图像精灵将减少服务器请求的数量并节约带宽

图像精灵实例

下面是一个简单的图像精灵例子：

首先，假设我们有三个小图标，分别是图标A、图标B和图标C。

1. 创建一个大图像：
   将这三个小图标合并到一个大图像中，使得它们在水平方向上排列。在本例中，我们创建一个200像素宽、50像素高的大图像，并将图标A放在左侧，图标B放在中间，图标C放在右侧。

2. 设置背景图像：
   在CSS中，将创建的大图像设置为背景图像。假设我们将大图像命名为sprites.png，并将其放在与CSS文件相同的目录下。

.selector {
  background-image: url(sprites.png);
}

3. 定义图像大小和位置：
   使用background-position属性来指定每个图标在大图像中的位置。根据大图像的尺寸和图标的大小，我们可以计算出每个图标的背景定位值。

.selector .icon-a {
  background-position: 0 0;   /* 图标A的位置在左侧，x轴偏移为0 */
}

.selector .icon-b {
  background-position: -50px 0;  /* 图标B的位置在中间，x轴偏移为-50像素 */
}

.selector .icon-c {
  background-position: -100px 0;  /* 图标C的位置在右侧，x轴偏移为-100像素 */
}

4. 显示图像精灵：
   将需要显示这些图标的元素的背景设置为图像精灵，并设置相应的背景位置。

<div class="selector">
  <div class="icon-a"></div>
  <div class="icon-b"></div>
  <div class="icon-c"></div>
</div>

通过以上步骤，我们将图标A、图标B和图标C合并为一个大图像，并通过背景定位将它们分别显示在页面的不同位置。这样做可以减少页面请求，提高加载速度，并且可以在需要时通过修改背景定位值来更新图标的显示位置。

请注意，这只是一个简单的示例，实际应用中可能涉及到更多的图标和更复杂的背景定位。完整的图像精灵实现可能需要更多的CSS代码和图像处理技巧。

图像精灵-悬停效果

要实现图像精灵的悬停效果，可以利用CSS的背景定位以及:hover伪类。下面是实现图像精灵悬停效果的示例：

HTML结构：

<div class="selector">
  <a href="#" class="icon icon-a"></a>
  <a href="#" class="icon icon-b"></a>
  <a href="#" class="icon icon-c"></a>
</div>

CSS样式：

.selector {
  background-image: url(sprites.png);
  width: 50px;   /* 图标的宽度 */
  height: 50px;  /* 图标的高度 */
}

.selector .icon {
  display: inline-block;
  width: 50px;   /* 图标的宽度 */
  height: 50px;  /* 图标的高度 */
  background-repeat: no-repeat;
}

.selector .icon-a {
  background-position: 0 0;   /* 图标A的位置在左侧，x轴偏移为0 */
}

.selector .icon-b {
  background-position: -50px 0;  /* 图标B的位置在中间，x轴偏移为-50像素 */
}

.selector .icon-c {
  background-position: -100px 0;  /* 图标C的位置在右侧，x轴偏移为-100像素 */
}

.selector .icon:hover {
  /* 鼠标悬停时的背景位置 */
  background-position-y: -50px;
}

在上面的示例中，我们使用了:hover伪类来实现鼠标悬停效果。当鼠标悬停在图标上时，通过改变背景位置的纵向偏移(background-position-y)来显示悬停状态的图标。

请确保sprites.png图像中每个图标的宽度和高度与CSS样式中相应的定义一致，以保证显示正确的部分。

这样，当鼠标悬停在图标上时，图标会显示为悬停状态的图像，而在默认状态下显示为正常状态的图像。通过这种方式，可以实现图像精灵的悬停效果。你可以根据需求进行适当的样式调整和图像位置的设置。

浮动和清除

在HTML5中，浮动（float）和清除（clear）是用于布局和对齐元素的常见属性和技术。

1. 浮动（float）：浮动是一种布局方式，它允许元素从正常的文档流中脱离出来，并向左或向右移动，直到它遇到父元素或其他浮动元素为止。可以使用CSS的float属性来设置元素的浮动方向。

   例如，要将一个元素向左浮动，你可以使用以下CSS样式：

   .element {
     float: left;
   }
   

   浮动后的元素会有如下特性：

   • 其他元素会围绕浮动元素排列。
   • 浮动元素会脱离正常的文档流，后续元素会占据其位置。

2. 清除（clear）：清除用于解决由浮动元素引起的布局问题，例如父元素的高度塌陷（collapse）。可以使用clear属性来清除某个元素周围的浮动元素。

   例如，要清除一个元素左侧的浮动元素，你可以使用以下CSS样式：

   .element {
     clear: left;
   }
   

   clear属性有以下常用取值：

   • left：清除元素左侧的浮动元素。
   • right：清除元素右侧的浮动元素。
   • both：清除元素两侧的浮动元素。

   通常，清除属性应该应用于需要包裹浮动元素的容器元素，以确保容器元素正确地包含浮动元素。

以上就是HTML5中浮动和清除的基本概念和用法。

float属性

在CSS中，float属性用于控制元素的浮动行为。通过设置float属性，可以将元素从正常的文档流中脱离，并使其浮动在其他元素的周围。

float属性可以取以下值：

1. left：将元素向左浮动。
2. right：将元素向右浮动。
3. none（默认值）：元素不浮动，保持在正常的文档流中。
4. inherit：继承父元素的float属性。

浮动元素会尽可能地靠近其前面的相邻元素，并且后续的元素将围绕着浮动元素进行布局。浮动元素不再占据正常的文档流空间，这可能会影响其他元素的布局。

需要注意的是，浮动元素会导致父容器的高度塌陷（collapsed），即容器的高度将不再包括浮动元素的高度。为了解决这个问题，可以使用clearfix技术来清除浮动。

以下是一个示例，展示如何使用float属性将两个div元素浮动到页面的左侧和右侧：

<div class="container">
  <div class="left-float">左侧内容</div>
  <div class="right-float">右侧内容</div>
</div>

<style>
.container {
  overflow: auto; /* 清除浮动 */
}

.left-float {
  float: left;
  width: 50%;
}

.right-float {
  float: right;
  width: 50%;
}
</style>

在上述示例中，.container元素用于包含浮动元素，并通过设置overflow: auto;来清除浮动，保证父容器正确地包裹浮动元素。

需要注意的是，随着现代CSS布局技术（如Flexbox和CSS Grid）的发展，使用float属性来实现复杂的布局已经不再推荐。现代CSS布局提供了更强大和灵活的方式来处理元素的位置和布局。

clear属性

在CSS中，clear属性用于控制元素的浮动限制行为。通过设置clear属性，可以指定一个元素是否允许浮动元素出现在其周围。

clear属性可以取以下值：

1. none（默认值）：允许浮动元素出现在元素的两侧。
2. left：不允许左侧有浮动元素。
3. right：不允许右侧有浮动元素。
4. both：不允许左侧和右侧有浮动元素。
5. inherit：继承父元素的clear属性。

使用clear属性可以解决浮动元素造成的布局问题，特别是在清除浮动后防止出现高度塌陷（clearfix）的现象。

以下是一个示例，展示如何使用clear属性来清除浮动：

<div class="container">
  <div class="left-float">左侧浮动元素</div>
  <div class="right-float">右侧浮动元素</div>
  <div class="clearfix"></div>
</div>

<style>
.left-float {
  float: left;
  width: 50%;
}

.right-float {
  float: right;
  width: 50%;
}

.clearfix {
  clear: both;
}
</style>

在上述示例中，为了清除浮动，我们在浮动元素的后面添加了一个空的<div class="clearfix"></div>元素，并为其设置clear: both;属性。这样可以确保浮动元素后面的内容能够正常进行布局。

值得注意的是，随着现代CSS布局技术的发展，如Flexbox和CSS Grid，使用clear属性来解决浮动问题已经不再常见。这些布局技术提供了更强大和简洁的方式来处理元素的布局和对齐。因此，在实际开发中，建议优先考虑使用现代的CSS布局技术。

overflow

在CSS中，overflow属性用于控制当容器中的内容溢出时的处理方式。它的作用是决定溢出内容的显示方式。

overflow属性可以使用以下值：

1. visible：默认值。溢出的内容可见，会超出容器的边界，可能会覆盖其他元素。
2. hidden：溢出的内容被裁剪隐藏，不可见。
3. scroll：当溢出发生时，容器会显示滚动条，允许用户滚动来查看溢出的内容。
4. auto：自动决定是否显示滚动条。如果内容溢出，容器会显示滚动条；否则，不显示滚动条。

以下是一个示例，演示了不同overflow属性值的效果：

<div class="container visible">可见内容</div>
<div class="container hidden">隐藏内容</div>
<div class="container scroll">滚动内容</div>
<div class="container auto">自动内容</div>

<style>
.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

.visible {
  overflow: visible;
}

.hidden {
  overflow: hidden;
}

.scroll {
  overflow: scroll;
}

.auto {
  overflow: auto;
}
</style>

在上述示例中，四个容器元素的宽度为200px，高度为100px，使用不同的overflow属性进行设置。

• .visible：溢出的内容可见，超出容器的边界，可能会覆盖其他元素。
• .hidden：溢出的内容被隐藏，不可见，被裁剪掉。
• .scroll：溢出的内容超出容器时，容器会显示滚动条，允许用户滚动来查看全部内容。
• .auto：根据内容是否溢出自动决定是否显示滚动条，当内容溢出时显示滚动条，否则不显示。

需要注意的是，overflow属性只会在产生溢出的情况下生效，也就是在设置了固定的宽度和高度的容器中。如果容器的高度是可自动扩展的，则不会产生内容溢出和滚动条问题。

了解和正确使用overflow属性可以帮助控制容器中内容的显示方式，确保页面布局的正确性和用户体验的一致性。

CSS清除浮动影响的方式

在CSS中，有几种常见的方式来清除浮动的影响。以下是其中的几种方式：

1. 使用clear属性：可以向被影响的元素或其父元素添加clear: both;或clear: left;或clear: right;属性来清除浮动的影响。这会阻止后续元素浮动到被清除浮动的元素旁边。

   .clearfix::after {
     content: "";
     display: table;
     clear: both;
   }
   

2. 使用clearfix类：可以为包含浮动元素的父元素添加一个带有特殊样式的clearfix类。这个类可以使用伪元素和clear属性来清除浮动的影响。

   .clearfix::after {
     content: "";
     display: table;
     clear: both;
   }
   .clearfix {
     zoom: 1; /* 兼容IE */
   }
   

3. 使用overflow属性：可以在包含浮动元素的父元素中添加overflow: auto;或overflow: hidden;属性。这会创建一个新的块级格式化上下文，并清除浮动的影响。

   .parent {
     overflow: auto; /* 或者 overflow: hidden; */
   }
   

4. 使用BFC（块级格式化上下文）：可以通过创建BFC来清除浮动的影响。这可以通过给父元素设置一些特定的属性，如display: inline-block;、display: table-cell;、float: left;等来实现。

   .parent {
     display: inline-block; /* 或者 display: table-cell; 或者 float: left; */
   }
   

这些方式都有各自的适用场景和特点。根据实际情况和需求，选择适合的方式来清除浮动的影响。一般来说，使用clearfix类或overflow属性是较为常用和可靠的方法。

CSS对齐方式

元素居中对齐

使元素居中对齐可以使用margin：auto

使两边的外边距平均分配

.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}

文本居中对齐

使文本在元素内居中对齐可以使用text-align:center;

.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

左右对齐-使用定位方式

1. 首先，将父容器设置为相对定位（position: relative），然后使用绝对定位将左侧和右侧的元素定位到合适的位置。

.container {
  position: relative;
}

.left-element {
  position: absolute;
  left: 0;
}

.right-element {
  position: absolute;
  right: 0;
}

左右对齐-使用float方式

可以使用float属性来对齐元素

.left-element {
  float: left;
}

.right-element {
  float: right;
}

.container:after {
  content: "";
  display: table;
  clear: both;
}

文本垂直居中对齐-使用padding

一个简单的方式就是头部底部使用padding

设置上下值

.center {
padding: 70px 0;
border: 3px solid green;
}

文本垂直居中-使用line-height

设置line-height的值与高度一致即可

.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* 如果文本有多行，添加以下代码: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}

垂直居中-使用position和transform

要实现垂直居中，你可以使用CSS中的position属性和transform属性来布局。以下是使用position和transform实现垂直居中的方法：

1. 使用绝对定位和transform属性：
   首先，将父容器设置为相对定位（position: relative），然后使用绝对定位将垂直居中的元素定位到合适的位置，并使用transform属性进行垂直居中偏移。

.container {
  position: relative;
}

.center-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在上述代码中，将.center-element元素相对于容器进行绝对定位。然后，通过将top和left设置为50%，并使用transform属性的translate函数将元素向上和向左偏移的50%来实现垂直居中。

2. 使用绝对定位和表格布局：
   将父容器设置为相对定位（position: relative），然后使用绝对定位和表格布局将子元素垂直居中。

.container {
  position: relative;
  display: table;
}

.center-element {
  display: table-cell;
  vertical-align: middle;
}

在这种方法中，将.container容器设置为相对定位，并将其display属性设置为table。然后，在.center-element元素中将display属性设置为table-cell，并使用vertical-align属性将内容垂直居中。

这些是使用position和transform属性实现垂直居中的方法。你可以根据需要选择适合的方法，并根据具体情况进行调整。

display属性

隐藏元素

隐藏一个元素可以通过把display属性设置为’“none”,或把visibility属性设置为"hidden"，但是两种方法会产生不同的结果

visibility:hidden 可以隐藏某个元素，但仍会占用空间，虽然被隐藏了，但仍然会影响布局。

div{
 visibility:hidden;
}

display:none;可以隐藏元素，而且会把本身占用的空间也给消失掉

div{
display:none;
}

块和内联元素

在HTML和CSS中，元素可以分为两种主要类型：块级元素和内联元素。

块级元素（Block-level Elements）：

• 块级元素以新行的形式显示，它会占据一整行的宽度（宽度默认为父容器的100%），并可以设置宽度、高度、内边距和外边距等属性。
• 常见的块级元素有<div>、<p>、<h1>到<h6>、<ul>、<ol>、<li>等。

内联元素（Inline Elements）：

• 内联元素不会独占一行，它会根据内容的需求进行横向排列，只占据其内容的宽度空间。你无法设置内联元素的宽度和高度等属性。
• 常见的内联元素有<span>、<a>、<strong>、<em>、<img>、<input>等。

需要注意的是，块级元素和内联元素可以通过CSS的display属性进行切换。

使用CSS中的display属性修改元素的显示类型：

• display: block;：将元素显示为块级元素。
• display: inline;：将元素显示为内联元素。
• display: inline-block;：将元素显示为既有内联特性又有块级特性的元素。

你可以根据具体的需求和布局要求，选择适合的元素类型（块级元素或内联元素），或者通过修改display属性来改变元素的显示类型。

display:inline-block

display: inline-block; 是一种特殊的元素显示类型，它同时具有内联元素和块级元素的特性。

在使用 display: inline-block; 时，元素会以内联元素的方式在同一行内排列，但它可以设置宽度、高度、内边距和外边距等属性，就像块级元素一样。

以下是一些 display: inline-block; 的特点和用途：

1. 在行内排列：display: inline-block; 的元素会按照文档流的方式在水平方向上依次排列。即使设置了宽度和高度，仍然能够在同一行内展示，不会像块级元素一样独占一行。

2. 设置宽度和高度：使用 display: inline-block; 可以为元素设置具体的宽度和高度属性，从而控制元素的尺寸。这对于创建自定义按钮、图标或块状元素的布局非常有用。

3. 保留内联特性：display: inline-block; 的元素仍然保留了内联元素的特性，可以在其内部插入其他内联元素，如文本、链接等。

4. 简化布局：使用 display: inline-block; 可以更灵活地控制元素的尺寸和水平排列，在一些简单布局场景下可能比块级元素更方便。

注意事项：

• display: inline-block; 元素之间的空格会被认为是文字空白，可能导致视觉上的间距。这种空格可以通过调整HTML标签位置、使用注释或使用负边距等方式来避免。

总结起来，display: inline-block; 可以将元素以内联方式排列，同时又具备块级元素的尺寸控制能力，常用于创建水平排列的块状元素和简单的布局需求。

伪类：

伪类（Pseudo-class）是CSS中用于选择元素特定状态或位置的一种方式。它们允许你选择文档中已有的特定元素，然后为其应用样式。

以下是几个常见的伪类示例：

1. :hover：用于选择鼠标悬停在元素上的状态。

a:hover {
  color: red;
}

上述示例中，当鼠标悬停在<a>标签上时，链接文本的颜色将变为红色。

2. :active：用于选择元素在被激活（点击或按下）时的状态。

.button:active {
  background-color: green;
}

在上面的示例中，当按钮被点击时，它的背景颜色将变为绿色。

3. :focus：用于选择当前获取焦点的元素。

input:focus {
  border: 2px solid blue;
}

在这个示例中，当输入框获得焦点时，边框将显示为蓝色。

4. :first-child：用于选择作为父元素的第一个子元素的元素。

ul li:first-child {
  font-weight: bold;
}

在上述示例中，列表中的第一个列表项文本将以粗体显示。

这只是一些常见的伪类示例，还有许多其他可用的伪类，如:nth-child、:last-child、:checked等，它们可以根据元素的位置、状态和其他属性来选择元素。使用伪类可以有针对性地为元素的不同状态或位置应用样式。

伪元素

伪元素（Pseudo-element）是CSS中一种用于在文档中创建虚拟元素的方式。它们允许你在元素的特定部分插入内容，并对该内容应用样式。

以下是几个常见的伪元素示例：

1. ::first-line：用于选择元素的第一行。

p::first-line {
  font-weight: bold;
}

上述示例中，段落的第一行文字将以粗体显示。

2. ::first-letter：用于选择元素的第一个字母。

p::first-letter {
  font-size: 24px;
}

在这个示例中，段落的第一个字母将被设置为24像素的字体大小。

3. ::before：用于在元素内容的前面插入内容。

h1::before {
  content: "▶";
}

在上述示例中，标题前面将插入一个箭头。

4. ::after：用于在元素内容的后面插入内容。

a::after {
  content: "(新窗口)";
}

在这个示例中，链接后面将插入文本"(新窗口)"。

这些只是一些常见的伪元素示例，还有许多其他可用的伪元素，如::before、::after、::selection等。使用伪元素可以在元素的特定部分插入内容，并针对该内容应用样式。你可以根据需要来利用伪元素来装饰、修饰和增强你的页面。

超链接

设置连接样式

要设置链接的样式，你可以使用CSS来为超链接（<a>标签）应用样式。以下是几个常用的CSS样式属性和示例来设置链接样式：

1. 设置链接文本颜色和下划线：

a {
  color: blue; /* 设置链接文本颜色 */
  text-decoration: underline; /* 添加下划线 */
}

2. 移除链接的下划线：

a {
  text-decoration: none; /* 移除下划线 */
}

3. 设置链接在悬停时的样式：

a:hover {
  color: red; /* 修改链接文本颜色 */
  text-decoration: underline; /* 添加下划线 */
}

4. 设置链接的背景色：

a {
  background-color: yellow; /* 设置链接的背景色 */
}

5. 设置链接的字体粗细：

a {
  font-weight: bold; /* 设置链接文本的字体粗细 */
}

这些示例演示了常见的链接样式设置。你可以根据需要自定义这些属性，以及其他CSS样式属性来实现你想要的链接样式。记得将这些CSS样式规则放置在你的CSS样式表中，或者在HTML文档内使用<style>标签来定义样式。

CSS列表

HTML列表和CSS列表属性

在HTML中，列表主要有两种类型

• 无序列表(
  • ) 列表项目用的是项目符号标记
• 有序列表(
  1. )列表项用的是数字或字母标记

不同的列表项目标记

list-style-type 是 CSS 属性，用于设置列表项目的标记类型（也称为列表样式）。它可以应用于无序列表（<ul>）、有序列表（<ol>）和自定义列表（<dl>）的列表项目上。

以下是一些常见的 list-style-type 值及其示例用法：

1. list-style-type: disc;：使用实心圆点作为无序列表的标记。

ul {
  list-style-type: disc;
}

2. list-style-type: circle;：使用空心圆圈作为无序列表的标记。

ul {
  list-style-type: circle;
}

3. list-style-type: square;：使用实心方块作为无序列表的标记。

ul {
  list-style-type: square;
}

4. list-style-type: decimal;：使用数字作为有序列表的标记。

ol {
  list-style-type: decimal;
}

5. list-style-type: lower-alpha;：使用小写字母作为有序列表的标记。

ol {
  list-style-type: lower-alpha;
}

6. list-style-type: upper-roman;：使用大写罗马数字作为有序列表的标记。

ol {
  list-style-type: upper-roman;
}

7. list-style-type: none;：移除列表项目的标记。

ul, ol {
  list-style-type: none;
}

这些是一些常见的 list-style-type 属性值示例，你可以根据需要选择适合的值，并将其应用于你的列表项目。还可以根据具体的设计要求使用其他 list-style-type 值，例如字母、符号或自定义图像。

图像作为列表项标记

list-style-image 是 CSS 属性，用于设置列表项目的标记类型为自定义图像。它可以应用于无序列表（<ul>）、有序列表（<ol>）和自定义列表（<dl>）的列表项目上。

使用 list-style-image 属性，你可以将自定义图像作为列表项目的标记，而不仅仅限于默认的标记符号。

下面是 list-style-image 的使用示例：

ul {
  list-style-image: url('bullet-image.png');
}

ol {
  list-style-image: url('number-image.png');
}

上述示例中，使用 list-style-image 属性将自定义图像应用于无序列表和有序列表的列表项目。在这里，url('bullet-image.png') 和 url('number-image.png') 分别表示要使用的自定义图像的 URL。

需要注意的是，自定义图像的尺寸和样式可能会对列表项目的布局产生影响。你可能需要通过其他 CSS 属性（例如 width 和 height）来调整图像的大小，并使用适当的样式规则来设置图像的位置和对其方式。

删除默认设置

如果需要移除默认的列表项目标记符号，可以将 list-style-type 属性设为 none。

ul, ol {
  list-style-type: none;
}

这样可以将默认的标记符号移除，只显示自定义图像作为列表项目的标记。

设置列表的颜色样式

要设置列表的颜色样式，你可以使用CSS来为列表项目中的文本和标记应用样式。以下是一些示例CSS样式属性和规则来设置列表的颜色样式：

1. 设置列表文本颜色：

ul, ol {
  color: blue; /* 设置列表文本颜色 */
}

2. 设置列表标记的颜色：

ul {
  list-style-color: red; /* 设置无序列表的标记颜色 */
}

ol {
  list-style-color: green; /* 设置有序列表的标记颜色 */
}

3. 设置列表项悬停时的样式：

ul li:hover, ol li:hover {
  color: red; /* 修改列表项文本颜色 */
  list-style-color: blue; /* 修改列表项标记颜色 */
}

4. 设置不同级别的嵌套列表的颜色：

ul ul {
  color: red; /* 设置嵌套列表文本颜色 */
}

ol ol {
  color: green; /* 设置嵌套列表文本颜色 */
}

使用这些样式规则，你可以设置列表的文本颜色、标记颜色以及列表项悬停时的样式。根据你的需求，你可以自定义这些属性和其他CSS属性来实现想要的列表颜色样式。记得在你的CSS样式表中或者在HTML文档内使用<style>标签来定义样式。

CSS表格

边框

在CSS中，可以使用border属性来设置元素的边框样式。border属性可以设置边框的宽度、样式和颜色。

以下是border属性的常用语法格式：

selector {
  border: border-width border-style border-color;
}

• border-width：设置边框的宽度。常用的单位包括px（像素）、em（相对于父元素的字体大小）、rem（相对于根元素的字体大小）等。
• border-style：设置边框的样式，如实线、虚线、点线等。常用的取值包括solid（实线）、dashed（虚线）、dotted（点线）等。
• border-color：设置边框的颜色。可以使用颜色名称或十六进制值，也可以使用rgba()函数设置带有透明度的颜色。

你还可以分别使用border-width、border-style和border-color属性来单独设置边框的宽度、样式和颜色，例如：

/* 分别设置边框属性 */
selector {
  border-width: 2px;
  border-style: dashed;
  border-color: red;
}

另外，还有一些快捷属性可以单独设置边框的某个方向，包括border-top、border-right、border-bottom和border-left，例如：

/* 单独设置边框的某个方向 */
selector {
  border-top: 1px solid black;
  border-right: 2px dashed red;
  border-bottom: 1px dotted blue;
  border-left: 2px double green;
}

通过使用这些属性和取值，你可以轻松地自定义元素的边框样式，使其适应你的设计需求。

边框

如需在 CSS 中设置表格边框，请使用 border 属性。

下例为

、

和	元素规定了黑色边框：

上例中的表格拥有双边框。这是因为

、

和	元素都有单独的边框。

border-collapse 属性设置是否将表格边框折叠为单一边框：

如果只希望表格周围有边框，则仅需为

指定 border 属性：

宽度和高度

表格的宽度和高度由 width 和 height 属性定义。

下例将表的宽度设置为 100%，将 元素的高度设置为 50px：

效果：

要创建仅占页面一半的表，请使用 width: 50%; ：

水平对齐

text-align 属性设置 或 中内容的水平对齐方式（左、右或居中）。

默认情况下， 元素的内容居中对齐，而 元素的内容左对齐。

要使 元素的内容也居中对齐，请使用 text-align: center; ：

垂直对齐

vertical-align 属性设置 或 中内容的垂直对齐方式（上、下或居中）。

默认情况下，表中内容的垂直对齐是居中（ 和 元素都是）。

表格内边框

如需控制边框和表格内容之间的间距，请在 和 元素上使用 padding 属性：

水平分割线

向 和 添加 border-bottom 属性，以实现水平分隔线：

效果：

可悬停表格

在 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：

条纹表格

为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color ：

表格颜色

在CSS中，你可以使用不同的属性来设置表格的颜色，包括表格的背景颜色、文本颜色以及单元格的背景和文本颜色。

1. 表格背景颜色：
   • background-color：设置整个表格的背景颜色。

table {
  background-color: #f2f2f2;
}

2. 表头样式属性：
   • th选择器：用于为表头单元格设置样式。
   • background-color：设置表头单元格的背景颜色。
   • color：设置表头单元格的文本颜色。

th {
  background-color: #333;
  color: #fff;
}

3. 表格行样式属性：
   • tr选择器：用于为表格行设置样式。
   • background-color：设置表格行的背景颜色。

tr:nth-child(even) {
  background-color: #f9f9f9;
}

4. 单元格样式属性：
   • td选择器：用于为单元格设置样式。
   • background-color：设置单元格的背景颜色。
   • color：设置单元格的文本颜色。

td {
  background-color: #fff;
  color: #333;
}

CSS表单

使用CSS来美化表单是很常见的需求，下面是一些常用的CSS属性和技巧，可以帮助你定制和设计漂亮的表单样式：

修改表单元素的外观：

• border：设置表单元素的边框样式。
• border-radius：设置表单元素的圆角。
• background-color：设置表单元素的背景颜色。
• width、height：设置表单元素的宽度和高度。

修改文本输入框：

• padding：设置文本输入框的内边距。
• font-family、font-size：设置文本输入框的字体样式。
• color：设置文本输入框中的文本颜色。

修改选择框（下拉框）：

• appearance、-webkit-appearance：用于调整选择框的外观（在不同浏览器中可能需要不同的前缀）。
• padding：设置选择框的内边距。

修改单选按钮和复选框：

• appearance、-webkit-appearance：用于调整单选按钮和复选框的外观（在不同浏览器中可能需要不同的前缀）。

修改按钮：

• background-color：设置按钮的背景颜色。
• color：设置按钮文本的颜色。

以下是一个简单的示例，展示如何使用CSS来定制表单样式：

<style>
  /* 表单外观 */
  form {
    width: 300px;
    padding: 20px;
    background-color: #f2f2f2;
  }
  
  /* 文本输入框样式 */
  input[type="text"] {
    width: 100%;
    padding: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
  }
  
  /* 选择框样式 */
  select {
    width: 100%;
    padding: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  /* 单选按钮和复选框样式 */
  input[type="radio"],
  input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid #ccc;
    border-radius: 50%;
  }
  
  /* 按钮样式 */
  button {
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
</style>

<form>
  <label for="name">姓名</label>
  <input type="text" id="name" name="name" placeholder="请输入姓名">
  
  <label for="gender">性别</label>
  <select id="gender" name="gender">
    <option value="male">男</option>
    <option value="female">女</option>
  </select>
  
  <label for="agree">我同意</label>
  <input type="checkbox" id="agree" name="agree">
  
  <button type="submit">提交</button>
</form>

通过调整CSS样式，你可以根据自己的需求来美化表单，使其符合整体页面的风格和设计。以上只是一个简单示例，你可以进一步扩展和定制，实现更丰富多样的表单样式。

CSS尺寸

在CSS中，可以使用多种单位来指定元素的尺寸。以下是一些常用的CSS尺寸单位：

1. 像素（px）：像素是最常用的尺寸单位，在网页中表示为屏幕上的一个物理像素。

   width: 200px;
   height: 100px;
   

2. 百分比（%）：百分比是相对于父元素的尺寸进行计算的。例如，使用50%表示元素宽度或高度的50%。

   width: 50%;
   height: 75%;
   

3. 视窗单位：

   • vw：视窗宽度的百分比单位，1vw等于视窗宽度的1%。
   • vh：视窗高度的百分比单位，1vh等于视窗高度的1%。

   width: 50vw;
   height: 25vh;
   

4. 相对单位：

   • em：相对于父元素的字体大小。例如，如果父元素的字体大小为16px，则1em等于16px。
   • rem：相对于根元素的字体大小。例如，如果根元素的字体大小为16px，则1rem等于16px。

   font-size: 1.2em;
   margin-top: 2rem;
   

5. 自动（auto）：有些属性值可以使用auto来自动计算尺寸，例如：

   margin-left: auto;
   margin-right: auto;
   

注意：在使用相对单位时，它们是相对于父元素的属性值进行计算的。而视窗单位（vw和vh）是相对于整个视窗的尺寸进行计算的。

以上是一些常用的CSS尺寸单位，你可以根据需要选择适当的单位来设置元素的尺寸，从而实现灵活的布局和设计。

CSS媒体查询

在CSS中，媒体类型（Media Types）是用于指定不同输出设备或媒体的样式规则的一种方式。通过针对特定的媒体类型应用不同的样式，可以为不同设备或媒体提供优化的显示效果。

以下列举了一些常见的CSS媒体类型：

1. all：适用于所有设备。
2. screen：适用于屏幕显示。通常用于台式机、笔记本电脑、平板电脑和智能手机等设备。
3. print：适用于打印输出。
4. speech：适用于语音合成器（屏幕阅读器等）的音频输出。

可以通过在样式表中使用@media规则来针对不同的媒体类型设置样式。以下是一个示例，展示了如何使用@media规则为不同媒体类型设置不同的样式：

/* 适用于所有设备的样式 */
body {
  font-size: 16px;
}

/* 适用于屏幕设备的样式 */
@media screen {
  body {
    background-color: white;
    color: black;
  }
}

/* 适用于打印输出的样式 */
@media print {
  body {
    background-color: transparent;
    color: black;
    font-size: 12px;
  }
}

/* 适用于语音合成器的样式 */
@media speech {
  body {
    background-color: white;
    color: black;
    font-size: 20px;
  }
}

在上述示例中，body选择器下的样式规则将适用于所有设备。然后，通过使用@media规则，我们指定了在不同的媒体类型下应用的样式规则。

可以根据具体的需求选择适当的媒体类型，并使用相应的样式规则来实现对不同设备或媒体的优化显示。这样，你就可以根据设备的特性和用户需求提供最佳的用户体验。

媒体类型查询语法

在CSS中，可以使用媒体查询（Media Queries）来根据不同设备或屏幕特性，应用不同的样式规则。媒体查询可以根据设备的宽度、高度、方向、分辨率等属性进行条件检查，并在满足条件时应用相应的样式。

媒体查询通常使用@media规则结合条件表达式来定义。以下是媒体查询的语法结构：

@media media_type and (media_feature_expression) {
  /* 样式规则 */
}

在上述语法结构中，media_type是媒体类型，例如screen、print、speech等。而media_feature_expression是一个或多个媒体特性的条件表达式，用于指定满足条件的设备或屏幕特性。

媒体特性可以包括以下一些常见的属性（不完全列表）：

• width：设备或视口的宽度。
• height：设备或视口的高度。
• aspect-ratio：宽高比。
• orientation：设备的方向（portrait-纵向，landscape-横向）。
• resolution：屏幕的分辨率。

以下是一个示例，展示了如何使用媒体查询来根据设备宽度应用不同的样式：

@media screen and (max-width: 768px) {
  /* 当视口宽度小于等于768px时应用的样式 */
  body {
    font-size: 14px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* 当视口宽度在769px到1024px之间时应用的样式 */
  body {
    font-size: 16px;
  }
}

@media screen and (min-width: 1025px) {
  /* 当视口宽度大于等于1025px时应用的样式 */
  body {
    font-size: 18px;
  }
}

在上述示例中，根据不同的视口宽度，我们使用媒体查询来应用不同的font-size样式规则。

通过使用媒体查询，你可以根据不同的设备特性，为不同的屏幕尺寸或方向提供不同的样式。这样，可以根据设备的特性和用户需求来实现响应式设计和优化的用户体验。

菜单的媒体查询

菜单是网页中常见的元素之一，可以根据设备的屏幕尺寸来调整其样式和布局，以提供更好的用户体验。下面是一个示例，展示了如何使用媒体查询来创建响应式菜单：

<style>
  /* 默认样式 */
  .menu {
    display: none;
  }
  
  /* 响应式样式 */
  @media screen and (max-width: 768px) {
    .menu {
      display: block;
    }
  }
  
  /* 更大尺寸下的样式 */
  @media screen and (min-width: 769px) {
    .menu {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
</style>

<div class="menu">
  <!-- 响应式菜单内容 -->
  <button>菜单按钮</button>
  <ul>
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>

在上述示例中，我们使用媒体查询为菜单定义了两种样式：一种是在屏幕宽度小于等于768px时，菜单显示为块级元素，并且在屏幕中显示。另一种是在屏幕宽度大于768px时，菜单显示为弹性盒子，并且采用水平排列的方式布局。

通过这种方式，我们可以根据设备的屏幕尺寸为菜单提供更适合的样式和布局，以确保在不同设备上都能够正常显示和使用菜单。

当然，这只是一个示例，你可以根据具体的需求和设计来自定义菜单的媒体查询样式。需要注意，媒体查询的条件表达式应根据你的实际需求进行调整，以适配各种不同设备。

列表的媒体查询

column {
width: calc(25% - 20px);
float: left;
color: white;
font-size: 30px;
line-height: 50px;
text-align: center;
background-color: lightgray;
margin: 0 10px;
}

@media screen and (max-width: 992px) {
.column {
width: calc(50% - 20px);
}
}

@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}

更现代的创建列布局方法是使用 CSS Flexbox。

!important的规则

在CSS中，!important是一个用于提升样式优先级的关键字。通过在样式规则的属性值后添加!important，可以覆盖其他具有较低优先级的样式规则，确保该样式规则优先生效。

以下是!important规则的一些注意事项：

1. 提升优先级：!important会使样式规则具有比其他普通规则更高的优先级。这意味着，带有!important的样式规则会覆盖其他没有!important的规则。

2. 仅限当前规则：!important只适用于声明所在的样式规则，不会将优先级传递给其他规则。因此，如果具有!important的规则和另一个具有更高优先级的规则发生冲突，优先级更高的规则仍然会生效。

3. 避免滥用：由于!important提升了样式规则的优先级，使用它时应慎重。滥用!important会导致样式维护困难，增加样式冲突的可能性，降低代码可读性和可维护性。

以下是一个示例，展示了如何使用!important规则：

p {
  color: blue !important;
}

p {
  color: red;
}

在上述示例中，第一个样式规则使用!important关键字，将段落文字的颜色设置为蓝色。而第二个样式规则尝试将段落文字的颜色设置为红色。然而，由于第一个规则使用了!important，所以蓝色颜色规则具有更高的优先级，最终段落文字会显示为蓝色。

需要注意的是，滥用!important可能会导致样式冲突和不可预测的结果。因此，建议在日常开发中尽量避免过度依赖!important，而是正确使用样式规则的优先级和继承性来管理样式的实现和优化。

CSS变量

CSS变量（CSS Variables），也被称为自定义属性（Custom Properties），是一种用于存储和复用值的机制。它们类似于编程语言中的变量，可以在CSS中定义、引用和修改。

CSS变量以--为前缀，后跟一个名称，例如--color或--font-size。变量的值可以是任何CSS支持的数据类型，如颜色、长度、字体等。

以下是CSS变量的使用示例：

:root {
  --primary-color: #0066ff;
  --font-size-large: 20px;
}

h1 {
  color: var(--primary-color);
  font-size: var(--font-size-large);
}

p {
  color: var(--primary-color);
  font-size: 16px;
}

在上述示例中，:root伪类选择器表示根元素，通常是<html>元素。我们在:root中定义了两个CSS变量--primary-color和--font-size-large，分别用于存储主要颜色和大字体大小。

在h1选择器中，我们使用var()函数来引用CSS变量，并将其应用于颜色和字体大小属性。这使得h1中的颜色和字体大小可以根据变量的值进行动态调整。

同样，在p选择器中，我们还可以使用相同的CSS变量来设置颜色，但是字体大小使用的是固定的16px。

通过使用CSS变量，我们可以在多个样式规则中复用相同的值，使得样式的维护和修改更加方便、灵活。此外，CSS变量还支持动态修改，可以通过JavaScript代码来动态改变变量的值，从而实现样式的交互效果。

需要注意的是，CSS变量具有继承性，即定义在父元素上的变量可以在其子元素中使用。这为构建组件化的样式系统提供了便利。另外，对于不支持CSS变量的老旧浏览器，可以使用PostCSS等预处理器进行变量的编译和降级支持。

var()函数

var()函数是CSS中用于引用和使用CSS变量（自定义属性）的函数。它的语法为var(--variable-name, fallback-value)，其中--variable-name是要引用的CSS变量的名称，fallback-value是一个可选的备选值，在未定义或无效的情况下使用。

以下是一些示例，展示了var()函数的用法：

:root {
  --primary-color: #0066ff;
  --font-size-large: 20px;
}

h1 {
  color: var(--primary-color);
  font-size: var(--font-size-large, 24px); /* 可选备选值 */
}

p {
  color: var(--secondary-color, #ff0000); /* 可选备选值 */
  font-size: var(--font-size-normal, 16px); /* 可选备选值 */
}

在上述示例中，我们定义了两个CSS变量--primary-color和--font-size-large，分别用于存储主要颜色和大字体大小。

在h1选择器中，我们使用var()函数引用了--primary-color和--font-size-large，并将它们应用于颜色和字体大小属性。如果--font-size-large未定义或无效，将使用备选值24px。

在p选择器中，我们使用var()函数引用了--secondary-color和--font-size-normal这两个未定义的CSS变量。由于这些变量没有定义，所以会使用备选值#ff0000和16px。

通过使用var()函数，我们可以动态引用和使用CSS变量，从而实现样式的灵活性和可维护性。该函数能够在运行时计算变量的值，使得我们可以在使用变量的地方轻松地更改统一的样式值，而不必在多个地方手动修改。

需要注意的是，var()函数只能在属性值中使用，不能用于选择器和属性名。在使用var()函数引用变量时，建议提供一个合理的备选值，以防止变量未定义或无效时样式出现问题。