html基础3

html基础3

1 css清除浮动的样式

1.1使用 clearfix 清除浮动：

这是一种常见且简单的方法。在您的 CSS 文件中，定义一个clearfix类，并将其应用于需要清除浮动影响的父元素上。例如：

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

然后，在需要清除浮动的父元素上添加 clearfix 类，如：

<div class="clearfix">
  <!-- 子元素 -->
</div>

1.2使用伪元素清除浮动：

与上述方法类似，可以使用伪元素来清除浮动。这种方法不需要添加额外的类名。在需要清除浮动的父元素上，使用 ::after 伪元素并设置 clear: both;。例如：

.parent::after {
  content: "";
  display: table;
  clear: both;
}
<div class="parent">
  <!-- 子元素 -->
</div>

1.3使用父元素设置 overflow 属性：

将父元素的 overflow 属性设置为 auto 或 hidden，这也可以清除浮动的影响。例如：

.parent {
  overflow: auto;
}
<div class="parent">
  <!-- 子元素 -->
</div>

1.4使用空的清除元素：

在浮动元素的父容器的末尾添加一个空的 div 元素，并为其设置 clear: both; 样式。这将使父容器认识到浮动元素的高度，从而正确地包裹它们。

<div class="clearfix"></div>

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

2 居中对齐

2.1 元素居中对齐：

• 水平居中对齐：可以使用 margin: 0 auto; 将块级元素水平居中对齐。需要将元素的宽度设置为一个具体的值或使用其他方法使其可定位。

cssCopy Code.element {
  width: 200px;
  margin: 0 auto;
}

• 垂直居中对齐：可以使用 Flexbox 或 Grid 布局实现元素的垂直居中对齐。以下是使用 Flexbox 实现垂直居中对齐的示例：

.parent {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
.element {
  /* 其他样式设置 */
}

2.2文本居中对齐：

• 水平居中对齐：使用 text-align: center; 将文本水平居中对齐。该属性应应用于包含文本的父元素。

.parent {
  text-align: center;
}

• 垂直居中对齐：使用 line-height 属性将行高设置为与容器高度相等，并将 vertical-align 设置为 middle。请注意，此方法仅适用于单行文本。

.element {
  display: inline-block; /* 使垂直居中对齐生效 */
  line-height: 200px; /* 与容器高度相等 */
  vertical-align: middle;
}

3 伪类

伪类（Pseudo-class）是 CSS 中用于选择元素的特殊关键词，它们可以根据元素的特定状态或位置进行选择。以下是几个常用的伪类及其示例：

3.1:hover 伪类：

选择鼠标悬停在元素上的状态。

.button:hover {
  background-color: #ff0000; /* 鼠标悬停时的背景颜色 */
}

3.2:active 伪类：

选择元素被激活（点击并按住）时的状态。

.button:active {
  color: #00ff00; /* 元素被激活时的文字颜色 */
}

3.3:focus 伪类：

选择获取焦点的表单元素状态。

.input-field:focus {
  border-color: #0000ff; /* 获取焦点时的边框颜色 */
}

3.4:first-child 伪类：

选择作为父元素第一个子元素的元素。

ul li:first-child {
  font-weight: bold; /* 第一个 li 元素的文本加粗 */
}

3.5:last-child 伪类：

选择作为父元素最后一个子元素的元素。

ul li:last-child {
  color: #ff00ff; /* 最后一个 li 元素的文字颜色 */
}

3.6:nth-child() 伪类：

选择作为父元素第 n 个子元素的元素，可以使用参数来定义具体的位置。

ul li:nth-child(odd) {
  background-color: #f0f0f0; /* 选择奇数位置的 li 元素 */
}

ul li:nth-child(3n) {
  color: #0000ff; /* 选择每隔 3 个元素的 li 元素 */
}

4 伪元素

伪元素（Pseudo-element）是 CSS 中用于在元素的内容前面或后面插入虚拟的元素。它们可以用于在指定位置添加额外的样式或内容。以下是几个常用的伪元素及其示例：

4.1::before 伪元素：

在目标元素的内容前插入一个虚拟元素。

.element::before {
  content: "前缀";
  font-weight: bold;
}

这会在具有 .element 类的元素的内容前插入文本 “前缀”，并将其加粗显示。

4.2 ::after 伪元素：

在目标元素的内容后插入一个虚拟元素。

.element::after {
  content: "后缀";
  color: #ff0000;
}

这会在具有 .element 类的元素的内容后插入文本 “后缀”，并将其文字颜色设置为红色。

4.3 ::first-line 伪元素：

选择目标元素的第一行文本。

.element::first-line {
  text-transform: uppercase;
}

这将使具有 .element 类的元素的第一行文本转换为大写字母。

4.4 ::first-letter 伪元素：

选择目标元素的第一个字母。

.element::first-letter {
  font-size: 24px;
  color: #00ff00;
}

这将使具有 .element 类的元素的第一个字母的字体大小设置为 24 像素，并将其颜色设置为绿色。

5 表格

html代码

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

CSS 代码：

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #cccccc;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f0f0f0;
}

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

这个示例中的 CSS 样式会给表格添加一些常见的样式：

• border-collapse: collapse;：合并边框，使表格看起来更整齐。
• width: 100%;：使表格宽度占满其容器。
• border: 1px solid #cccccc;：给表头和单元格添加边框。
• padding: 8px;：设置单元格内边距，增加内容与边框之间的距离。
• text-align: left;：使文本内容左对齐。
• background-color: #f0f0f0;：给表头设置背景颜色。
• tbody tr:nth-child(even)：选择偶数行，并设置背景颜色。

6 表单

表单（Form）是网页中用于收集用户输入信息的元素。它通常包含各种表单控件（Form Control），例如文本框、复选框、单选按钮、下拉列表等。下面是一个简单的表单示例：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">

  <label for="password">密码：</label>
  <input type="password" id="password" name="password">

  <label for="gender">性别：</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">男</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label>

  <label for="country">国家：</label>
  <select id="country" name="country">
    <option value="china">中国</option>
    <option value="usa">美国</option>
    <option value="uk">英国</option>
  </select>

  <label for="message">留言：</label>
  <textarea id="message" name="message"></textarea>

  <input type="submit" value="提交">
</form>

这个示例中展示了一些常见的表单控件：

• <input> 元素用于输入文字，可以通过 type 属性来指定不同类型的输入，例如 type="text" 表示文本输入框，type="email" 表示邮箱输入框，type="password" 表示密码输入框。
• <label> 元素用于描述表单控件，并通过 for 属性与对应的控件关联起来。点击标签时，相应的控件会获得焦点。
• <input type="radio"> 元素用于选择单个选项，通过设置相同的 name 属性来将多个单选按钮组合在一起。
• <select> 元素用于创建下拉列表，其中的 <option> 元素定义了列表中的每个选项。
• <textarea> 元素用于多行文本输入。

7 媒体样式

媒体样式（Media Queries）是一种CSS3的功能，用于根据设备的特性和特定的媒体查询条件，为不同的设备和媒体类型应用不同的样式。通过使用媒体查询，可以根据屏幕尺寸、分辨率、设备方向等条件来优化网页的显示和布局，使其在不同设备上都能获得最佳的用户体验。

媒体查询使用 @media 规则来定义，并包含一个或多个媒体特性和媒体类型的条件。以下是常用的媒体特性和用法：

1. 设备宽度（Device Width）：根据设备的宽度来应用不同的样式。
   • min-width：指定最小宽度阈值，当设备宽度大于等于该值时应用样式。
   • max-width：指定最大宽度阈值，当设备宽度小于等于该值时应用样式。
2. 设备高度（Device Height）：根据设备的高度来应用不同的样式。
   • min-height：指定最小高度阈值，当设备高度大于等于该值时应用样式。
   • max-height：指定最大高度阈值，当设备高度小于等于该值时应用样式。
3. 设备方向（Device Orientation）：根据设备的方向（横向或纵向）来应用不同的样式。
   • orientation: landscape：当设备处于横向模式时应用样式。
   • orientation: portrait：当设备处于纵向模式时应用样式。
4. 设备分辨率（Device Resolution）：根据设备的分辨率来应用不同的样式。
   • min-resolution：指定最小分辨率阈值，当设备分辨率大于等于该值时应用样式。
   • max-resolution：指定最大分辨率阈值，当设备分辨率小于等于该值时应用样式。

媒体查询的语法示例：

/* 应用于宽度大于等于600px的设备 */
@media (min-width: 600px) {
  /* 样式规则 */
}

/* 应用于高度小于480px的设备 */
@media (max-height: 480px) {
  /* 样式规则 */
}

/* 应用于横向模式的设备 */
@media (orientation: landscape) {
  /* 样式规则 */
}

/* 应用于分辨率大于等于300dpi的设备 */
@media (min-resolution: 300dpi) {
  /* 样式规则 */
}

通过使用媒体查询，可以为不同的设备和屏幕尺寸提供适配的样式，实现响应式设计，提升网页的可用性和用户体验。

8 important规则

!important 是CSS中的一个声明修饰符，用于提高样式声明的优先级。当一个样式声明使用了 !important 修饰符时，它将会覆盖其他同样属性的样式声明，无论其他声明的优先级如何。

使用 !important 修饰符可以避免样式被其他规则所覆盖，或者在需要强制应用某个特定样式时使用。这种情况通常出现在以下几种情况下：

1. 特定性不足：如果两个选择器应用了相同的样式规则，但一个选择器的特定性较低，那么可以使用 !important 来确保特定性较高的样式生效。

   .container {
     width: 500px !important; /* 通过!important提升特定性 */
   }
   
   #sidebar {
     width: 300px; /* 可能会被.container的样式覆盖 */
   }
   

2. 第三方样式库：当使用第三方样式库时，可能需要覆盖其中的一些样式。在这种情况下，可以使用 !important 来确保自定义样式生效。

   .third-party-class {
     color: red !important; /* 覆盖第三方样式库的颜色设置 */
   }
   

请注意，在编写CSS时，滥用 !important 可能会导致样式管理困难和难以维护的代码。它会破坏样式的可预测性，并增加调试和修改样式的复杂性。因此，建议在合适的情况下谨慎使用 !important，并尽量通过优化选择器特定性和样式层级关系来解决样式冲突的问题。

9 盒阴影

在CSS3中，你可以使用box-shadow属性为元素添加盒阴影效果。

box-shadow属性接受四个值：水平位移、垂直位移、模糊半径和扩展半径。以下是使用box-shadow属性的示例：

.box-shadow {
  box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.5);
}

在上面的示例中，box-shadow属性将为元素添加一个盒阴影效果。设置的值分别是：水平位移为2像素，垂直位移为2像素，模糊半径为4像素，扩展半径为2像素。最后一个参数rgba(0, 0, 0, 0.5)表示阴影的颜色和透明度，其中红、绿、蓝色分量的值为0，透明度为0.5。

你还可以为box-shadow属性设置更多的值，以实现不同的效果。例如，你可以指定多个阴影效果，用逗号分隔它们：

.box-shadow {
  box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.5), -2px -2px 4px 2px rgba(255, 255, 255, 0.5);
}

上述示例中，使用了两个阴影效果，一个为黑色阴影，另一个为白色阴影。

box-shadow属性可以让你为元素添加立体感，突出元素在页面上的层次感。通过调整不同的值，你可以创建出各种不同类型的阴影效果，满足不同的设计需求。

需要注意的是，为了获得最佳的浏览器兼容性，建议在使用box-shadow属性时提供适当的浏览器前缀。

例如：

.box-shadow {
  -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.5);
}

这样可以确保在各种现代浏览器中都能正常显示盒阴影效果。

10 border-radius属性

border-radius属性用于设置元素的边框圆角半径。通过调整border-radius的值，可以使元素的边框具有不同的圆角效果。

border-radius属性可以接受一个或多个参数值，每个参数表示对应角的圆角半径。以下是一些常见的用法：

1. 单个长度值：border-radius: 10px;，这将使四个角的圆角半径都为10像素，创建一个相同大小的圆角。
2. 两个长度值：border-radius: 10px 20px;，第一个值表示上左和下右角的圆角半径，第二个值表示上右和下左角的圆角半径，创建一个不对称的圆角。
3. 四个长度值：border-radius: 10px 15px 20px 25px;，分别表示上左、上右、下右和下左角的圆角半径，创建具有不同圆角半径的四个角。
4. 百分比值：border-radius: 50%;，使用百分比值可以创建一个以元素宽度和高度的一半为半径的圆角，实现将元素转换成圆形。

11 background-image 属性

ackground-image属性用于设置元素的背景图像。

它接受一个URL值，该值指定要用作背景图像的图像文件的路径。可以使用相对路径或绝对路径来引用图像文件。

以下是一些使用background-image属性的示例：

.background-image-example {
  background-image: url("image.jpg");
}

上述示例中，background-image属性将image.jpg作为元素的背景图像。

可以同时使用多个background-image属性来叠加多个背景图像。每个背景图像都会以从后到前的顺序堆叠在一起，最后一个图像位于顶部。

.multiple-backgrounds {
  background-image: url("image1.jpg"), url("image2.jpg");
}

上述示例中，元素将同时显示image1.jpg和image2.jpg作为背景图像。

除了URL值，background-image属性还可以接受其他值，如渐变效果和none（无背景图像）。

.gradient-background {
  background-image: linear-gradient(red, blue);
}

.no-background {
  background-image: none;
}

上述示例中，.gradient-background类将应用一个红蓝渐变背景图像，而.no-background类将不会有任何背景图像。

通过使用background-image属性，你可以为元素添加各种背景图像，从简单的图像到复杂的渐变效果，以实现定制的外观。

12 background-size 属性

background-size属性用于设置背景图像的尺寸大小。

background-size属性可以接受不同类型的值：

1. 关键字值：常用的关键字值包括auto、cover和contain。
   • auto：表示保持背景图像的原始尺寸。
   • cover：表示将背景图像等比缩放，使其完全覆盖背景区域，可能会超出或裁剪部分图像。
   • contain：表示将背景图像等比缩放，使其完整地适应背景区域，不会超出或裁剪图像。
2. 百分比值：可以指定背景图像相对于背景区域的尺寸百分比。例如，background-size: 50% 75%;表示背景图像的宽度为背景区域宽度的50%，高度为背景区域高度的75%。
3. 长度值：可以直接指定背景图像的宽度和高度的具体长度值。例如，background-size: 200px 300px;表示背景图像的宽度为200像素，高度为300像素。
4. 多个值：可以同时指定背景图像的宽度和高度。例如，background-size: 50% auto;表示背景图像的宽度为背景区域宽度的50%，高度保持自动，即保持原始比例。

以下是一个示例：

.background-size-example {
  background-image: url("image.jpg");
  background-size: cover;
}

上述示例中，.background-size-example类将应用image.jpg作为背景图像，并使用cover关键字值将背景图像等比缩放，以覆盖整个背景区域。
表示将背景图像等比缩放，使其完整地适应背景区域，不会超出或裁剪图像。
2. 百分比值：可以指定背景图像相对于背景区域的尺寸百分比。例如，background-size: 50% 75%;表示背景图像的宽度为背景区域宽度的50%，高度为背景区域高度的75%。
3. 长度值：可以直接指定背景图像的宽度和高度的具体长度值。例如，background-size: 200px 300px;表示背景图像的宽度为200像素，高度为300像素。
4. 多个值：可以同时指定背景图像的宽度和高度。例如，background-size: 50% auto;表示背景图像的宽度为背景区域宽度的50%，高度保持自动，即保持原始比例。

以下是一个示例：

.background-size-example {
  background-image: url("image.jpg");
  background-size: cover;
}

上述示例中，.background-size-example类将应用image.jpg作为背景图像，并使用cover关键字值将背景图像等比缩放，以覆盖整个背景区域。