css从偷衣服到创衣服

Zhaojianqiang520

已于 2023-12-26 03:04:29 修改

阅读量497

点赞数 11

分类专栏：前端相关内容文章标签： css

于 2023-12-20 00:28:11 首次发布

本文链接：https://blog.csdn.net/Zhaojianqiang520/article/details/135097490

版权

前端相关内容专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css入门

1.css介绍

CSS（层叠样式表）是用于控制网页内容外观和样式的标记语言。它通过定义样式规则来选择性地应用于HTML或XML文档的元素

html:只显示标签不美化，样式丑

css网页美容师

css是层叠样式表也称之为ccs样式表

css语法规范: css由二个部分组成｛选择器，以及一条或者多条声明组成的

2引用样式

1.行内样式

<div style="width:500px;height:80px">我扎你</div>

CSS行内样式是一种将样式直接应用于单个HTML元素的方法，而不通过外部样式表或内部样式表。行内样式通过在HTML标签的`style`属性中添加CSS规则来定义样式。以下是关于CSS行内样式的详细介绍：
### 基本语法
在HTML标签中使用`style`属性，其值是一组CSS属性和对应的值，多个属性之间用分号分隔。

<p style="color: red; font-size: 16px;">这是一个带有行内样式的段落。</p>

1. **单一属性设置：**
- 可以在`style`属性中设置单一的CSS属性，比如设置文字颜色：

 <span style="color: blue;">蓝色文字</span>

2. **多属性设置：**
- 通过在`style`属性中使用分号分隔，可以设置多个CSS属性：

<div style="background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;">内容区域</div>

3. **单位使用：**
- 单位（如像素、百分比）可以直接应用于行内样式：

  <p style="font-size: 18px; margin-left: 10%;">文字大小和左边距</p>

4. **值的引号：**
- 尽管对于大多数属性，值可以不用引号，但对于某些情况，最好使用引号，特别是属性值中包含空格时：

<p style="font-family: 'Arial', sans-serif;">字体设置</p>

### 注意事项
- **权重：**
- 行内样式的权重最高，这意味着如果同一个元素同时使用了行内样式、内部样式表和外部样式表，行内样式的规则将覆盖其他规则。
- **可读性和维护性：**
- 虽然行内样式可以快速应用样式，但在大型项目中，推荐使用外部样式表或内部样式表来提高可读性和维护性。
- **适用场景：**
- 行内样式适合快速的样式调整或在少数元素上应用特定样式。对于整个网站或应用的一致性样式，最好使用外部样式表。
使用行内样式需要权衡可读性、维护性和灵活性，根据具体情况选择最合适的样式应用方式。

2.内部样式

内部样式是通过在HTML文档的头部（<head>标签内）或者在文档中的<style>标签中定义CSS规则，将样式应用于整个HTML文档或特定的页面部分。以下是关于内部样式的详细介绍：

基本语法

在头部使用style标签：
- 可以在HTML文档的头部通过<style>标签定义CSS规则。这些规则将应用于文档中的所有元素。

<!DOCTYPE html>
<html>
<head>
    <style><-----这是样式标签
        body {    <----body 是 元素选择器
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

在文档中使用style标签：

也可以在文档中的任何地方使用<style>标签定义CSS规则，但一般推荐将其放在头部以提高代码结构的清晰度

<!DOCTYPE html>
<html>
<body>
    <style>
        p {
            color: green;
        }
    </style>
    <p>This paragraph has a green color.</p>
</body>
</html>

示例解释

全局样式：
- 在内部样式表中定义的规则将应用于整个文档，例如设置全局的字体和背景颜色。
特定元素样式：
- 可以通过选择器指定特定元素的样式，例如设置标题（h1）的颜色。
类和ID选择器：
- 内部样式表中可以使用类和ID选择器，以便更具体地选择元素并应用样式。

<style>
  .highlight {
    background-color: yellow;
  }

  #uniqueElement {
    border: 1px solid black;
  }
</style>

注释事项

权重：

内部样式表的权重介于行内样式和外部样式表之间。它会覆盖外部样式表中的规则，但会被行内样式所覆盖。
可读性和维护性：

内部样式表适用于较小规模的项目，但在大型项目中，为提高可读性和维护性，可能更适合使用外部样式表。
HTML结构：

在HTML文档头部使用内部样式表时，确保将样式规则包裹在<style>标签内，并位于<head>标签中。
内部样式表提供了在单个文档中定义样式的方式，适用于小型项目或需要特定样式的页面。在实际应用中，根据项目规模和需求，选择合适的样式应用方式

3.外部样式

外部样式是通过将CSS规则存储在独立的外部样式表文件中，然后通过链接（link）到HTML文档中来应用样式。以下是关于外部样式的详细介绍：
### 基本语法
1. **创建外部样式表：**

- 创建一个包含CSS规则的独立的文本文件，通常以`.css`为扩展名。例如，命名为`styles.css`。
```css
/* styles.css */

   body {
       font-family: 'Helvetica', sans-serif;
       background-color: #e0e0e0;
   }
   h1 {
       color: #333;
   }

2. **在HTML文档中链接外部样式表：**
- 在HTML文档的头部使用`<link>`标签将外部样式表链接到文档中。

   <!DOCTYPE html>
   <html>
   <head>
       <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
   <body>
       <h1>Hello, World!</h1>
       <p>This is a paragraph.</p>
   </body>
   </html>

示例解释

分离结构和样式：
- 外部样式表允许将样式与HTML文档分离，使得结构和样式分别维护，提高了代码的可读性和维护性。
全局样式应用：
- 外部样式表中的规则将应用于整个文档，类似于内部样式表。
多文档共享：
- 外部样式表可以在多个HTML文档之间共享，确保一致的样式。

注意事项

权重：
- 外部样式表的权重最低，会被行内样式和内部样式表所覆盖。但在实践中，外部样式表通常在整个项目中应用一致的样式。
HTTP请求：
- 外部样式表会引入额外的HTTP请求。优化网站性能时，可以考虑将多个样式文件合并，以减少请求次数。
文件路径：
- 确保在HTML文档中正确指定外部样式表的文件路径，以确保正确加载样式。

外部样式表是一种适用于大型项目的样式管理方式，它通过分离结构和样式、提高可维护性和共享性，使得样式在整个项目中保持一致。在实践中，外部样式表常用于专业的Web开发项目中。

1.css特点

CSS外部引用有许多好处和优势，以下是其中一些主要的方面：
1. **可维护性：**
- 外部样式表使得样式与HTML文档分离，这提高了代码的可维护性。通过单独管理样式文件，可以轻松修改和更新样式，而无需影响HTML结构。
2. **代码重用：**
- 外部样式表可以在多个HTML文档之间共享，从而实现样式的代码重用。这对于确保整个网站或应用的一致性非常重要，同时减少了代码冗余。
3. **提高可读性：**
- 将样式从HTML中抽离出来，使HTML文件更加清晰，易读。开发者可以更专注于HTML结构而不受样式规则的干扰。
4. **一致性：**
- 外部样式表有助于确保整个项目中的一致性。通过在所有页面中使用相同的外部样式表，可以确保网站的外观和感觉是统一的。
5. **易于管理：**
- 外部样式表文件可以集中存储和管理，而不必在每个HTML文件中进行重复的样式定义。这使得项目更易于管理和协作。
6. **减少页面加载时间：**
- 由于外部样式表可以在多个页面之间共享，浏览器可以缓存样式表，从而减少页面加载时间。这有助于提高网站的性能和用户体验。
7. **适应性：**
- 外部样式表使得在不同设备上应用样式更为灵活。通过修改单一的样式文件，可以实现对整个网站在不同屏幕尺寸和设备上的样式适应。
8. **团队协作：**
- 在大型团队中，多个开发者可以同时处理HTML和CSS，而无需相互干扰。每个人可以专注于自己的领域，提高团队协作效率。
总体而言，使用外部样式表是一种良好的开发实践，特别适用于大型项目或需要多人协作的情况。这种方法有助于提高代码的可维护性、重用性和整体性能。

4.样式优先级

在CSS中，样式表的优先级是确定哪些样式规则应用于特定元素的规则。CSS样式的优先级按照以下顺序递减：
1. 重要性（!important）：
- 使用`!important`关键字的样式具有最高优先级，将覆盖其他任何样式规则。但是，滥用`!important`可能导致代码难以维护，因此应慎重使用。

   
   p {
       color: red !important;
   }

2. 内联样式（Inline Styles）：
- 在HTML元素的`style`属性中直接定义的样式具有比其他样式更高的优先级。


   <p style="color: blue;">This is a blue paragraph.</p>

3. ID选择器（#id）：
- 使用ID选择器定义的样式具有比元素选择器和类选择器更高的优先级。

   #uniqueElement {
       font-size: 18px;
   }

4. 类选择器（.class）和属性选择器（[attribute]）：
- 类选择器和属性选择器的优先级相同，比元素选择器优先级高。

   .highlight {
       background-color: yellow;
   }
   [type="text"] {
       border: 1px solid #ccc;
   }

5. 元素选择器（element）：
- 元素选择器是最低优先级的样式规则。如果其他选择器具有更高的优先级，它们将覆盖元素选择器的样式。

   p {
       font-family: 'Arial', sans-serif;
   }

在实际应用中，如果有多个样式规则应用于同一元素，浏览器将根据上述规则确定哪个规则具有更高的优先级。通常，建议遵循较为简单的选择器和避免滥用`!important`，以确保代码的可读性和维护性。

5.语法规范

6.语法风格

备注:

项目上线的时候，通过工具将（展开风格）的代码，变成紧凑的风格，可以减少文件的体积，节约网络流量，可以让用户打开网页速度更快

3.选择器

1.通配符选择器

通配符选择器在CSS中用`*`表示，它匹配文档中的任何元素。通配符选择器的使用会影响所有元素，因此在实际应用中需要谨慎使用，以避免全局样式的不受控制的影响。
以下是通配符选择器的基本语法：

* {
    /* 全局样式规则 */
}

通配符选择器的一些注意事项和使用场景：
1. **全局样式影响：**
- 通配符选择器会匹配文档中的所有元素，因此样式规则将应用于所有元素。这可能导致全局样式的影响，增加维护和调试的难度。
2. **性能考虑：**
- 由于通配符选择器会匹配所有元素，可能会影响页面的性能。浏览器需要处理大量的全局样式规则，可能导致渲染速度变慢。
3. **慎用通配符：**
- 通配符选择器通常不建议广泛使用，除非确实需要在全局范围内应用样式。在大多数情况下，更精确的选择器可以更好地控制样式。
4. **复杂性增加：**
- 当页面样式逐渐复杂时，使用通配符选择器可能会增加代码的复杂性，使样式规则难以理解和维护。
虽然通配符选择器具有其存在的合理用例，但在大多数情况下，最好使用更具体的选择器来精确地定位要样式化的元素，以避免全局样式的不受控制的扩散。

2.元素选择器

元素选择器是 CSS 中最基本的选择器之一，它通过指定 HTML 元素的名称来选择要应用样式的元素。使用元素选择器时，将会选择所有匹配该元素名称的 HTML 元素。
举个例子，如果你想选择所有段落 `<p>` 元素并为它们设置样式，可以使用如下的元素选择器：

p {
    /* 这里是针对段落元素的样式规则 */
    color: blue;
    font-size: 16px;
}

这样的样式规则会应用于文档中所有的段落元素 `<p>`，使它们的文字颜色变为蓝色，字体大小变为 16 像素。
元素选择器是最简单的选择器之一，但在实际应用中非常有用。它可以用于为页面中的特定类型的元素添加一致的样式，提高页面的一致性和可读性。然而，要注意，元素选择器的优先级最低，因此在与其他选择器共同作用时，可能会被更具体的选择器覆盖。

3.类选择器

类选择器是 CSS 中一种常用的选择器，它允许你根据 HTML 元素的类名来选择并应用样式。类选择器以点 `.` 开头，后跟类名，例如：


.button {
    /* 这里是针对类名为 "button" 的元素的样式规则 */
    background-color: #3498db;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
}

在上面的例子中，`.button` 是一个类选择器，它选择所有具有 `class="button"` 属性的 HTML 元素。然后，通过样式规则定义了这些元素的背景颜色、文本颜色、内边距等样式。
HTML 中对应的使用方式如下：


<a href="#" class="button">Click me</a>
<button class="button">Submit</button>

通过为不同元素添加相同的类名，你可以实现它们共享相似或相同的样式。这提高了代码的可维护性和重用性，特别适用于需要一致外观的元素组。
需要注意的是，类选择器的优先级相对较高，但仍比 ID 选择器低。在样式冲突时，可以通过使用更具体的选择器来提高优先级。

4.ID选择器

ID 选择器是 CSS 中用于选择具有特定 ID 属性的 HTML 元素的选择器。它以井号 `#` 开头，后跟 ID 名称。例如：


#header {
    /* 这里是针对具有 id="header" 的元素的样式规则 */
    background-color: #333;
    color: #fff;
    padding: 10px;
}

在上面的例子中，`#header` 是一个 ID 选择器，它选择具有 `id="header"` 属性的 HTML 元素，并定义了这些元素的背景颜色、文本颜色、内边距等样式。
HTML 中对应的使用方式如下：


<div id="header">
    <h1>Welcome to My Website</h1>
</div>

每个页面中的 ID 应该是唯一的，这是因为 ID 是用于标识文档中特定元素的唯一标识符。与类选择器相比，ID 选择器的优先级更高，因此在样式冲突时，ID 选择器的样式规则会覆盖类选择器的规则。
需要注意的是，尽管 ID 选择器有较高的优先级，但在实际应用中，推荐使用类选择器来实现样式的重用和灵活性，因为 ID 选择器的唯一性限制了其在样式共享方面的灵活性。

5.交集选择器

在CSS中，交集选择器（Intersection Selector）指的是同时满足两个或多个条件的元素选择器。在CSS中，交集选择器使用两个条件的选择器名称直接连接起来，以表示只有同时满足这两个条件的元素才会被选择。
例如，如果我们希望选择同时具有类名为"button"和ID为"submit"的元素，可以使用交集选择器`.button#submit`。这表示只有同时具有这两个条件的元素才会被选择。
交集选择器的使用可以帮助我们更精确地选择需要样式化的元素，从而实现更精细的样式控制。
下面是一个示例，演示了如何在CSS中使用交集选择器：

/* 选择同时具有类名为"button"和ID为"submit"的元素 */
.button#submit {
  color: red;
  font-weight: bold;
}

在上面的示例中，`.button#submit`表示只有同时具有类名为"button"和ID为"submit"的元素才会应用这些样式。

6.后代选择器

在CSS中，后代选择器（Descendant Selector）用于选择某个元素的后代元素。后代选择器使用空格来表示元素之间的关系。


ancestor descendant {
  /* styles */
}

后代选择器的语法如下：

其中，`ancestor`表示祖先元素的选择器，`descendant`表示后代元素的选择器。只有满足这个选择器关系的元素才会应用样式。
下面是一个示例，演示了如何使用后代选择器来选择某个元素的后代元素：


/* 选择类名为"container"的元素内的段落元素 */
.container p {
  color: blue;
}

在上面的示例中，`.container p`表示选择所有位于类名为"container"的元素内的段落元素，并将它们的颜色设置为蓝色。
需要注意的是，后代选择器可以选择任意层级的后代元素，并且不要求这些后代元素是直接嵌套在祖先元素内部的。
后代选择器在CSS中非常有用，可以方便地选择嵌套结构中的元素，实现针对特定层级的样式控制。

注意:

/* 这是也是后代选择器的另一种表达方式 ,表示div下面的所有的p标签*/
div>p   
{
  background-color:yellow;
}

7.兄弟选择器

在CSS中，兄弟选择器（Adjacent Sibling Selector）用于选择紧接在另一个元素后面的元素，且两个元素有相同的父元素。
兄弟选择器使用加号（+）来表示选择器之间的关系。其语法如下：


element1 + element2 {
  /* styles */
}

其中，`element1`表示第一个兄弟元素的选择器，`element2`表示紧接在`element1`后面的兄弟元素的选择器。只有满足这个选择器关系的元素才会应用样式。
下面是一个示例，演示了如何使用兄弟选择器来选择紧接在另一个元素后面的元素：


/* 选择紧接在h1元素后面的p元素 */
h1 + p {
  font-weight: bold;
}

在上面的示例中，`h1 + p`表示选择紧接在`h1`元素后面的`p`元素，并将它们的字体加粗。
需要注意的是，兄弟选择器只能选择紧接在另一个元素后面的兄弟元素，且这两个元素有相同的父元素。
兄弟选择器在CSS中可以用来实现一些特定的样式控制，例如给列表项之间的间距进行调整等。

8.属性选择器

在CSS中，属性选择器（Attribute Selector）允许根据元素的属性值来选择元素。属性选择器可以根据属性的存在、属性值的匹配、属性值的前缀、后缀、包含等条件进行选择。
以下是常见的属性选择器及其用法：
1. 存在选择器（Presence Selector）：选择具有指定属性的元素。

[属性名]
[class]{
  color:"red"
}
例如，`[required]`将选择所有具有`required`属性的元素。
2. 值选择器（Value Selector）：选择属性值与指定值完全匹配的元素。

[属性名="属性值"]
[class="zjq"]{
  color:"red"
}
例如，`[type="text"]`将选择所有`type`属性值为`text`的元素。

3. 后缀选择器（Suffix Selector）：选择属性值以指定字符串结尾的元素。

[属性名$="后缀"]
[class$="q"]{
  color:"red"
}
例如，`[href$=".pdf"]`将选择所有`href`属性值以`.pdf`结尾的元素。

4. 前缀选择器（Prefix Selector）：选择属性值以指定字符串开头的元素。

[属性名^="前缀"]
[class^="z"]{
  color:"red"
}
例如，`[class^="btn"]`将选择所有`class`属性值以`btn`开头的元素。

5. 包含选择器（Substring Selector）：选择属性值包含指定字符串的元素。

[属性名*="字符串"]
[class*="zjq"]{
  color:"red"
}
例如，`[title*="example"]`将选择所有`title`属性值包含`example`的元素。
属性选择器可以与其他选择器结合使用，以更精确地选择元素。它们提供了一种根据元素的属性来选择样式的强大方式，使得样式控制更加灵活。

9.伪类选择器

1.动态伪类选择器

1. :link 表示初始状态的样子，(没有被点击)
a:link{
color:"red"
}

2. :visited 表示已经访问过了，之后的样式
a:visited{
color:"red"
}

伪类选择器（Pseudo-class Selector）是CSS中用于选择元素的特定状态或位置的选择器。它们以冒号（:）开头，并与选择器组合在一起，以选择具有特定状态或位置的元素。
以下是常见的伪类选择器及其说明：
3. :hover 伪类选择器：选择鼠标悬停在元素上的状态。
   selector:hover {
     /* styles */
   }
例如，`a:hover`将选择所有鼠标悬停在`a`链接上的状态，可以应用特定的样式。

4. :active 伪类选择器：选择元素被激活（被点击）的状态。
   
   selector:active {
     /* styles */
   }
  
例如，`button:active`将选择所有被点击的`button`元素，可以应用特定的样式。

切记:前4个要是同时出现的话顺序不变，要不然会出错的

5. :focus 伪类选择器：选择当前获取焦点的元素。
   
   selector:focus {
     /* styles */
   }
   
例如，`input:focus`将选择当前获取焦点的`input`元素，可以应用特定的样式。

2.结构伪类选择器

1. :first-child 伪类选择器：选择父元素的第一个子元素。
   selector:first-child {
     /* styles */
   }
   
例如，`li:first-child`将选择每个`li`元素的第一个子元素，可以应用特定的样式。

案例二
div>div:first-child{
color:"red"
}
/*这是父亲下面的第一个儿子的样式*/

2. :last-child 伪类选择器：选择父元素的最后一个子元素。
   
   selector:last-child {
     /* styles */
   }
   
例如，`div:last-child`将选择每个`div`元素的最后一个子元素，可以应用特定的样式。、

除了上述伪类选择器，还有众多其他的伪类选择器可以根据元素的特定状态或位置进行选择，如`:nth-child`、`:nth-of-type`、`:not`等。
伪类选择器在CSS中非常有用，它们允许根据元素的状态或位置选择样式，为元素提供更具交互性和动态性的样式效果。

3.:nth-child(n)
选中父元素当中的第n个子元素。

这里我们要注意，如果我们在这个选择器前面加了限定标签，比如div标签，那么n一定要跟这个div元素的位置是一致的，比如，我们的n等于5，那么如果父元素下的第五个子元素不是div，那么这个时候选择器将无法找到目标元素。

了解了这些，开篇的那个问题就比较简单了。如果我们想要选中p元素，我们就要知道当前p元素在父元素中位置，当前p元素排在第二位，这个时候我们应该这样写：
/* first-child     第一个元素修改样式*/
div:first-child{
  color:"red"
}






/* last-child     最后一个元素修改样式*/
div:last-child{
  color:"red"
}




/*从1开始*   可以写一个n  n代表所有的元素，  n是从0开始算的，，元素是从第一个开始算的/
main p:nth-child(2) {
  color: red;

}




/*代表偶数，只要是偶数位置的标签就会被修改啊   2n偶数  */
main p:nth-child(even) {
  color: red;

}



/*代表奇数，只要是奇数位置的标签就会被修改啊 */
main p:nth-child(2n+1) {
  color: red;

}



/*想指定前几个元素有样式可以这样做   -n+3   代表前五个*/



/*:nth-last-child  从最后一个元素开始算起*/

div:nth-last-child(1){
color:"red"
}
/*----------------------------------------------------------------------------------*/


/*代表所有的p元素第一个   会指定同类型元素，而且是第一个*/
div p:first-of-type{
color:"red"
}


/*:last-of-type  同类型元素 最后一个*/
div p:last-of-type{
color:"red"
}


/* :nth-last-of-type(1)  同等类型的第一个*/

div p:nth-of-type（1）{
color:"red"
}



/*:nth-of-type(n)   选择同类型元素 */

div>p:nth-last-of-type{
    colr:"red"
}

3.否定伪类选择器

否定伪类选择器（Negation Pseudo-class Selector）用于选择不满足指定条件的元素。它以`:not()`的形式出现，并在括号中指定要排除的选择器。
以下是否定伪类选择器的示例和说明：
1. :not() 伪类选择器：选择不满足指定选择器的元素。
   
   :not(选择器) {
     /* styles */
   }
   
例如，`:not(.highlight)`将选择所有没有类名为"highlight"的元素，并应用特定的样式。

2. :not() 伪类选择器也可以结合其他选择器使用。
   
   选择器:not(选择器) {
     /* styles */
   }
   
例如，`p:not(.special)`将选择所有不具有类名为"special"的段落元素，并应用特定的样式。
使用否定伪类选择器可以排除指定条件的元素，使得样式选择更加灵活。需要注意的是，在使用否定伪类选择器时，选择器的写法必须是简单选择器，不能是复合选择器或伪元素选择器。

4.UI伪类选择器

UI伪类选择器（UI Pseudo-class Selectors）是一类伪类选择器，用于根据用户与界面的交互状态选择元素。这些伪类选择器允许根据用户的操作或交互状态来应用样式。
以下是一些常见的UI伪类选择器及其说明：
1. :hover 伪类选择器：选择鼠标悬停在元素上的状态。
   
   selector:hover {
     /* styles */
   }
   
例如，`a:hover`将选择所有鼠标悬停在`a`链接上的状态，可以应用特定的样式。

2. :active 伪类选择器：选择元素被激活（被点击）的状态。
   
   selector:active {
     /* styles */
   }
   
例如，`button:active`将选择所有被点击的`button`元素，可以应用特定的样式。

3. :focus 伪类选择器：选择当前获取焦点的元素。
   
   selector:focus {
     /* styles */
   }
```
例如，`input:focus`将选择当前获取焦点的`input`元素，可以应用特定的样式。

4. :disabled 伪类选择器：选择被禁用的表单元素。
   
   selector:disabled {
     /* styles */
   }
   
例如，`input:disabled`将选择所有被禁用的`input`元素，可以应用特定的样式。

5. :checked 伪类选择器：选择被选中的单选框或复选框。
   selector:checked {
     /* styles */
   }
   
例如，`input[type="checkbox"]:checked`将选择所有被选中的复选框元素，可以应用特定的样式。
UI伪类选择器使得可以根据用户与界面的交互状态来选择元素并应用样式，从而实现更丰富的交互效果和用户体验。

5.目标伪类

目标伪类选择器（Target Pseudo-class Selector）用于选择当前文档中被锚点（anchor）链接指向的目标元素。它通过在URL后面添加`#`和目标元素的ID来指定目标。
以下是目标伪类选择器的示例和说明：
1. :target 伪类选择器：选择当前被锚点链接指向的目标元素。
   /*被触发的描点就会触发样式*/
   div:target {
     /* styles */
   }
   
例如，`:target`将选择当前被锚点链接指向的目标元素，并应用特定的样式。
在使用目标伪类选择器时，需要注意以下几点：
- 使用目标伪类选择器时，需要在URL中指定目标元素的ID，例如`http://example.com/page#target-element`。
- 只有在用户单击了锚点链接并导航到了指定目标时，目标伪类选择器才会生效。
- 目标伪类选择器通常用于为被锚点链接指向的目标元素提供样式，以突出显示当前页面的目标位置。
目标伪类选择器提供了一种在页面中根据锚点链接指向的目标元素来应用样式的方式，能够实现一些交互效果和导航体验的增强。

6.语言伪类

语言伪类（Language Pseudo-class）是CSS中的一类伪类选择器，用于根据文档的语言选择元素并应用样式。它可以根据元素的语言属性或文档的语言设置来选择特定语言的元素。
以下是常见的语言伪类选择器及其说明：
1. :lang() 伪类选择器：选择具有指定语言属性值的元素。
   
   :lang(language) {
     /* styles */
   }
   
例如，`:lang(en)`将选择具有语言属性值为"en"（英语）的元素，并应用特定的样式。
2. :lang() 伪类选择器也可以结合其他选择器使用。
   
   选择器:lang(language) {
     /* styles */
   }
   
例如，`p:lang(fr)`将选择所有具有语言属性值为"fr"（法语）的段落元素，并应用特定的样式。
语言伪类选择器可用于根据元素的语言属性或文档的语言设置来选择特定语言的元素，并为其应用样式。这在多语言网站或多语言文档中非常有用，可以根据不同的语言环境来调整元素的样式以提供更好的用户体验。

10.并集选择器

在CSS中，并集选择器（Union Selector）用于同时选择多个不同类型的元素，并将它们的样式规则合并在一起。这样可以将相同的样式应用于多个元素，从而避免重复的样式定义。
并集选择器使用逗号（,）将不同的选择器组合在一起，以表示这些选择器的样式规则将被合并。
下面是一个示例，演示了如何使用并集选择器同时选择多个不同类型的元素：
/* 选择所有h1标题和类名为"highlight"的元素，将它们的颜色设置为红色 */
h1, .highlight {
  color: red;
}
在上面的示例中，`h1, .highlight`表示同时选择所有`h1`标题和类名为"highlight"的元素，并将它们的颜色设置为红色。
通过并集选择器，可以方便地选择多个不同类型的元素，并将它们的样式规则合并在一起，从而实现样式的重用和简化。

11.伪元素选择器

伪元素选择器（Pseudo-element Selector）用于选择元素的特定部分或生成的内容，而不是整个元素本身。伪元素选择器以双冒号`::`开头，用于向所选元素的特定部分应用样式。
以下是一些常见的伪元素选择器及其说明：
1. ::before 伪元素选择器：用于在所选元素的内容之前插入生成的内容。
   
   selector::before {
     /* styles */
   }
   
例如，`p::before`可以用于在段落元素内容之前插入特定的生成内容。

2. ::after 伪元素选择器：用于在所选元素的内容之后插入生成的内容。
   
   selector::after {
     /* styles */
   }
   
例如，`div::after`可以用于在`div`元素内容之后插入特定的生成内容。

3. ::first-line 伪元素选择器：用于选择所选元素的第一行文本。
   
   selector::first-line {
     /* styles */
   }
   
例如，`p::first-line`可以用于选择段落元素的第一行文本，并应用特定的样式。

4. ::first-letter 伪元素选择器：用于选择所选元素的第一个字母或字形。
   
   selector::first-letter {
     /* styles */
   }
   
例如，`h1::first-letter`可以用于选择标题元素的第一个字母，并应用特定的样式。
伪元素选择器允许开发者选择元素的特定部分或生成的内容，并为其应用样式，从而实现一些特殊的效果和样式。需要注意的是，伪元素选择器不会在DOM中创建新的元素，而是用于选择已有元素的特定部分。

总结:

除了以上的选择器还有更多的选择器:

派生选择器，层级选择器，关联选择器，全局选择器，复合选择器，多重选择器等

4.颜色表示

在CSS中，有多种方法可以表示颜色样式。以下是一些常见的表示颜色的方法：
1. 十六进制值（Hexadecimal Value）：使用六位十六进制数来表示颜色。每两位表示红色（RR）、绿色（GG）和蓝色（BB）的分量。例如，`#FF0000`表示红色，`#00FF00`表示绿色，`#0000FF`表示蓝色。

2. RGB值（RGB Value）：使用红色（R）、绿色（G）和蓝色（B）的十进制值来表示颜色。每个分量的取值范围是0到255。例如，`rgb(255, 0, 0)`表示红色，`rgb(0, 255, 0)`表示绿色，`rgb(0, 0, 255)`表示蓝色。

3. RGBA值（RGBA Value）：与RGB值类似，但包括一个表示透明度（Alpha）的分量。透明度值的范围是0到1，其中0表示完全透明，1表示完全不透明。例如，`rgba(255, 0, 0, 0.5)`表示半透明的红色。

4. 预定义颜色名称（Predefined Color Names）：CSS中预定义了一些常见颜色的名称，例如`red`（红色），`green`（绿色），`blue`（蓝色）等。这些名称可以直接用作颜色样式。例如，`color: red;`将文本颜色设置为红色。

5. HSL值（HSL Value）：使用色相（Hue）、饱和度（Saturation）和亮度（Lightness）的值来表示颜色。色相的取值范围是0到360，饱和度和亮度的取值范围是0%到100%。例如，`hsl(0, 100%, 50%)`表示红色。

6. HSLA值（HSLA Value）：与HSL值类似，但包括一个表示透明度的分量。透明度值的范围是0到1。例如，`hsla(0, 100%, 50%, 0.5)`表示半透明的红色。
以上是几种常见的在CSS中表示颜色样式的方法。开发者可以根据需要选择适合的颜色表示方法来设置元素的颜色样式。

5.文字属性

CSS中有很多用于设置文字样式的属性。以下是一些常见的CSS文字属性：
1. `color`：设置文字的颜色。
  
   color: #000000;
   

2. `font-family`：设置文字的字体系列。
  
   font-family: Arial, sans-serif;
   

3. `font-size`：设置文字的字体大小。
   
   font-size: 16px;
   

4. `font-weight`：设置文字的粗细程度。
   
   font-weight: bold;
   

5. `font-style`：设置文字的风格，如斜体。
 
   font-style: italic;
   

6. `text-decoration`：设置文字的装饰效果，如下划线、删除线等。
   
   text-decoration: underline;
   

7. `text-transform`：控制文字的大小写转换，如大写、小写等。
  
   text-transform: uppercase;
   

8. `text-align`：设置文字的对齐方式，如居中、左对齐、右对齐等。
   
   text-align: center;
   

9. `line-height`：设置文字行高。
 
   line-height: 1.5;
   

10. `letter-spacing`：设置文字间距。
    letter-spacing: 2px;
    

11. `word-spacing`：设置单词间距。
    
    word-spacing: 5px;
    

12. `white-space`：控制文字的空白处理方式，如是否换行、是否折叠空白等。
   
    white-space: nowrap;
    
这些属性可以单独使用，也可以结合在一起来设置文字的样式。通过调整这些属性的值，可以实现各种各样的文字效果和排版样式。

6.列表属性

CSS中有一些属性可以用于设置列表的样式。以下是一些常见的CSS列表属性：
1. `list-style-type`：设置列表项的标记类型（如圆点、数字、字母等）。
   
   list-style-type: disc;
   

2. `list-style-image`：设置列表项的标记图像。
  
   list-style-image: url("image.png");
   

3. `list-style-position`：设置列表项的标记位置（内部或外部）。
   
   list-style-position: inside;
   

4. `list-style`：是 `list-style-type`、`list-style-position` 和 `list-style-image` 的简写属性，用于同时设置列表项的标记类型、位置和图像。
   
   list-style: square inside url("image.png");
   

5. `list-style-color`：设置列表项的标记颜色。
   
   list-style-color: red;
   
这些属性可以应用于有序列表（`<ol>`）、无序列表（`<ul>`）和定义列表（`<dl>`）等不同类型的列表。通过调整这些属性的值，可以自定义列表的外观和样式，使其与页面的整体设计相匹配。

1.列表标记类型

在CSS中，`list-style-type`属性用于设置列表项的标记类型。以下是一些常见的列表标记类型：

1. `none`：没有标记。
   list-style-type: none;
2. `disc`：实心圆点。
  list-style-type: disc;
3. `circle`：空心圆点。
 list-style-type: circle;
4. `square`：实心方块。
list-style-type: square;
5. `decimal`：十进制数字（1, 2, 3, ...）。
   list-style-type: decimal;
6. `decimal-leading-zero`：带前导零的十进制数字（01, 02, 03, ...）。
  list-style-type: decimal-leading-zero;
7. `lower-alpha`：小写字母（a, b, c, ...）。
list-style-type: lower-alpha;
8. `upper-alpha`：大写字母（A, B, C, ...）。
 list-style-type: upper-alpha;
9. `lower-roman`：小写罗马数字（i, ii, iii, ...）。
  list-style-type: lower-roman;
10. `upper-roman`：大写罗马数字（I, II, III, ...）。
   list-style-type: upper-roman;
这些是一些常见的列表标记类型，但CSS还提供了其他更多的标记类型，如字母表、希腊字母、自定义图像等。通过选择适当的`list-style-type`值，您可以自定义列表的标记类型以满足设计需求。

7.边框属性

在CSS中，有多个属性可以用于设置元素的边框样式。以下是一些常见的边框相关属性：
1. `border-width`：设置边框的宽度。
   
   border-width: 2px;
   
2. `border-style`：设置边框的样式，如实线、虚线等。
  
   border-style: solid;
   
3. `border-color`：设置边框的颜色。
   
   border-color: #000000;
   
4. `border`：是 `border-width`、`border-style` 和 `border-color` 的简写属性，用于同时设置边框的宽度、样式和颜色。
   
   border: 2px solid #000000;
   
5. `border-radius`：设置边框的圆角半径，用于创建圆角边框。
   
   border-radius: 5px;
   
6. `border-top`、`border-right`、`border-bottom`、`border-left`：用于分别设置上、右、下、左边框的样式、宽度和颜色。
   
   border-top: 1px solid #000000;
   
7. `border-image`：设置边框的图像样式。
   
   border-image: url("image.png") 30 30 round;
   
8. `box-shadow`：创建一个或多个边框阴影效果。
   
   box-shadow: 2px 2px 4px #888888;
   
这些属性可以单独使用，也可以结合在一起来设置元素的边框样式。通过调整这些属性的值，您可以创建不同样式的边框效果，以满足设计需求。

8.表格属性

在CSS中，有多个属性可以用于设置表格的样式。以下是一些常见的CSS表格属性：
1. `border-collapse`：设置表格边框的合并方式，控制相邻单元格边框是否合并为一个边框。
   
   border-collapse: collapse;
   
2. `border-spacing`：设置相邻单元格之间的间距。
   
   border-spacing: 5px;
   
3. `text-align`：设置表格中内容的水平对齐方式。
   
   text-align: center;
   
4. `vertical-align`：设置表格中内容的垂直对齐方式。
  
   vertical-align: middle;
   
5. `background-color`：设置表格的背景颜色。
   
   background-color: #F0F0F0;
   
6. `width`：设置表格的宽度。
   
   width: 100%;
   
7. `border`：设置表格的边框样式、宽度和颜色。
   
   border: 1px solid #000000;
   
8. `caption-side`：设置表格标题（caption）的位置。
   
   caption-side: top;
   
9. `font-size`：设置表格中文字的字体大小。
   
   font-size: 14px;
   
10. `font-weight`：设置表格中文字的粗细程度。
   
    font-weight: bold;
    
这些属性可以应用于 `<table>` 元素及其相关的子元素，如 `<th>`（表头）和 `<td>`（表格数据单元格）。通过调整这些属性的值，您可以自定义表格的外观和样式，以满足页面设计和布局的需求。

9.背景相关属

在CSS中，有多个属性可以用于设置元素的背景样式。以下是一些常见的CSS背景相关属性：
1. `background-color`：设置元素的背景颜色。


   background-color: #F0F0F0;
   
2. `background-image`：设置元素的背景图像。
   
   background-image: url("image.png");
   
3. `background-repeat`：设置背景图像的重复方式，如重复、水平重复、垂直重复等。
   
   background-repeat: repeat;
   
4. `background-position`：设置背景图像的位置，如左上角、右下角、居中等。
   
   background-position: center;
   
5. `background-size`：设置背景图像的大小，如覆盖整个元素、按比例缩放等。
   
   background-size: cover;
   
6. `background-attachment`：设置背景图像的滚动方式，如固定、随内容滚动等。
   
   background-attachment: fixed;
7. `background`：是 `background-color`、`background-image`、`background-repeat`、`background-position` 和 `background-size` 的简写属性，用于同时设置元素的背景颜色、图像、重复方式、位置和大小。
   
   background: #F0F0F0 url("image.png") repeat-x center;
   
这些属性可以单独使用，也可以结合在一起来设置元素的背景样式。通过调整这些属性的值，您可以创建各种各样的背景效果，以满足页面设计和视觉需求。

10.鼠标相关属性

在CSS中，有多个属性可以用于设置鼠标在元素上的交互样式。以下是一些常见的CSS鼠标相关属性：

1. `cursor`：设置鼠标指针的样式。
   - `cursor: pointer;`：指针形状，表示可点击的链接或按钮。
   - `cursor: default;`：默认形状，通常是一个箭头。
   - `cursor: grab;`：抓取形状，表示可拖动的元素。
   - `cursor: not-allowed;`：禁止形状，表示不可点击或操作的元素。
2. `pointer-events`：控制元素是否响应鼠标事件。
   - `pointer-events: auto;`：元素响应鼠标事件。
   - `pointer-events: none;`：元素不响应鼠标事件。
3. `user-select`：控制用户是否能选择元素中的文本。
   - `user-select: auto;`：允许用户选择元素中的文本。
   - `user-select: none;`：禁止用户选择元素中的文本。
4. `outline`：设置元素获得焦点时的轮廓样式。
   
   outline: 2px solid blue;
   
5. `text-decoration`：设置文本装饰效果，例如下划线、删除线等。
   
   text-decoration: underline;

这些属性可以应用于元素的样式中，用于改变鼠标在元素上的外观和交互方式。通过调整这些属性的值，您可以自定义鼠标在元素上的样式，以提升用户体验和交互性。

11常用的长度单位

在CSS中，常用的长度单位有以下几种：
1. `px`：像素（Pixel）是最常用的长度单位，表示相对于显示设备的一个物理像素。
2. `%`：百分比（Percentage）是相对于父元素的长度单位，表示相对于父元素的百分比比例。
3. `em`：相对于当前元素的字体大小，如果应用于字体大小本身，则相对于父元素的字体大小。
4. `rem`：相对于根元素（即 `<html>` 元素）的字体大小。
5. `vh`：视窗高度的百分比，相对于视窗的高度。
6. `vw`：视窗宽度的百分比，相对于视窗的宽度。
7. `pt`：点（Point），常用于打印样式表中，1pt 等于 1/72 英寸。
8. `em` 和 `rem` 还可以与其他长度单位结合使用，例如 `em` 可以与 `px` 结合，表示相对于当前元素字体大小的倍数。
这些长度单位可以根据需要在CSS样式中灵活使用，以适应不同的设计需求和布局要求。

12.元素显示模式

在CSS中，元素的显示模式（display mode）指定了元素在文档流中的表现方式。常见的元素显示模式包括以下几种：

1. `block`：块级元素（block-level element），会在页面上以块的形式显示，独占一行，可以设置宽度、高度、内外边距等属性。常见的块级元素包括 `<div>`、`<p>`、`<h1>` 等。
2. `inline`：行内元素（inline-level element），会在页面上以行内的形式显示，不会独占一行，其宽度和高度由内容决定，不能设置宽度和高度等属性。常见的行内元素包括 `<span>`、`<a>`、`<strong>` 等。
3. `inline-block`：行内块级元素（inline-block），结合了行内元素和块级元素的特性，在页面上以行内的形式显示，但可以设置宽度、高度、内外边距等属性。
4. `none`：隐藏元素，元素不会在页面上显示，并且不占据空间。
5. `flex`：弹性盒子布局（flex container），用于创建弹性布局，可以通过子元素的排列方式进行灵活的布局。
6. `grid`：网格布局（grid container），用于创建网格布局，可以通过网格行和列的定义进行复杂的布局。
7. `table`：表格元素，将元素显示为表格，包括 `table-row`、`table-cell` 等。
8. `list-item`：列表项元素，用于显示为列表项，类似于 `<li>` 元素的表现方式。

这些显示模式可以通过CSS的 `display` 属性进行设置，通过选择合适的显示模式，可以实现灵活的页面布局和设计。

13.盒子模型

CSS盒子模型是用于布局和设计网页元素的基本概念之一。它描述了一个元素在页面上所占据的空间，并由四个部分组成：内容区域、内边距、边框和外边距。以下是对CSS盒子模型各部分的详细介绍：
1. 内容区域（Content）：这是盒子模型的核心部分，包含元素的实际内容，例如文本、图像或其他嵌套的元素。内容区域的大小由元素的宽度（width）和高度（height）属性决定。
2. 内边距（Padding）：内边距是内容区域与边框之间的空白区域，用于控制内容与边框之间的距离。可以使用属性分别设置各个方向的内边距。
3. 边框（Border）：边框包围着内容区域和内边距，用于界定元素的边界。可以使用 `border-width`、`border-style` 和 `border-color` 属性设置边框的宽度、样式和颜色。
4. 外边距（Margin）：外边距是边框与相邻元素之间的空白区域，用于控制元素与其他元素之间的距离。可以使用属性分别设置各个方向的外边距。
在CSS中，可以通过以下属性来控制盒子模型的各个部分：

- `width` 和 `height`：设置元素的宽度和高度。
- `padding`：设置内边距的大小。
- `border`：设置边框的样式、宽度和颜色。
- `margin`：设置外边距的大小。

`padding-top`、`padding-right`、`padding-bottom` 和 `padding-left`

`margin-top`、`margin-right`、`margin-bottom` 和 `margin-left`

理解和掌握盒子模型对于进行网页布局和设计非常重要，它可以帮助开发者准确地控制元素的位置、大小和间距，从而实现丰富多样的页面布局效果。

1.margin塌陷问题

一，父与子的元素margin问题

方法一，给父元素添加border ，子元素使用margin-top 例如:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 父元素 -->
    <div id="zjq">
      <!-- 子元素的margin根据父元素的内容区域计算的-->
        <div id="zq"></div>
    </div>
</body>
</html>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
/* 父元素样式 */
    #zjq {
        width: 500px;
        height: 300px;
        background-color: rgb(34, 241, 197);
        border: 1px solid red;
       
        /* 通过给父元素增加border来设置子元素到父元素之间的距离 */
    }
/* 子元素样式 */
    #zq {
        /* 给父元素增加border之后使用margin-top不会出现问题 */
        margin-top: 10px;
        width: 200px;
        height: 200px;
        background-color: rgb(240, 99, 245);
    }
</style>

2.给父元素增加overflow: hidden;

/* 父元素样式 */
    #zjq {
        width: 500px;
        height: 300px;
        background-color: rgb(34, 241, 197);
        overflow: hidden;
       
        /* 通过给父元素overflow: hidden;增加来设置子元素到父元素之间的距离 */
    }
/* 子元素样式 */
    #zq {
        /* */
        margin-top: 20px;
        width: 200px;
        height: 200px;
        background-color: rgb(240, 99, 245);
    }

结果如图一一样效果

3.给父盒子添加position：fixed

/* 父元素样式 */
    #zjq {
        width: 500px;
        height: 300px;
        background-color: rgb(34, 241, 197);
        position: fixed;
       
        /* 通过给父元素 position: fixed;父元素不动了 */
    }
/* 子元素样式 */
    #zq {
       
        margin-top: 20px;
        width: 200px;
        height: 200px;
        background-color: rgb(240, 99, 245);
    }

结果如图一一样效果

14.内容溢出处理

处理内容溢出的方式取决于具体的需求和容器的特性。以下是一些常见的处理内容溢出的方法：
1. `overflow: hidden;`: 使用`overflow`属性可以隐藏容器内溢出的内容，并且不显示滚动条。这种方法适用于不需要查看溢出内容的情况。
.container {
  overflow: hidden;
}
2. `overflow: scroll;`: 使用`overflow`属性设置为`scroll`可以在需要时显示滚动条。当内容溢出容器时，会显示滚动条，用户可以滚动查看溢出的内容。
.container {
  overflow: scroll;
}
3. `overflow: auto;`: 使用`overflow`属性设置为`auto`可以自动根据内容是否溢出来决定是否显示滚动条。当内容溢出时，会显示滚动条，否则不显示。
.container {
  overflow: auto;
}
4. `text-overflow: ellipsis;`: 对于文本内容的溢出，可以使用`text-overflow`属性设置为`ellipsis`来显示省略号。
.container {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
这样设置后，如果文本内容溢出容器，会以省略号显示。
除了上述方法，还可以使用JavaScript或其他库来实现更复杂的内容溢出处理，例如自定义滚动条、响应式处理等。
需要根据具体的需求选择合适的方法来处理内容溢出，并确保在不同设备和屏幕尺寸下都能提供良好的用户体验。

15.隐藏元素的二种方式

在CSS中，有两种常见的方式可以隐藏元素：
1. `display: none;`: 通过设置元素的`display`属性为`none`，可以完全隐藏元素，使其在页面中不可见，并且不会占用任何空间。隐藏后的元素不会显示在页面上，也不会响应任何鼠标事件。
.element {
  display: none;
}

2. `visibility: hidden;`: 通过设置元素的`visibility`属性为`hidden`，可以隐藏元素，但元素仍然占用页面空间。隐藏后的元素在页面中仍然存在，只是不可见，但它仍然会响应鼠标事件。
.element {
  visibility: hidden;
}
这两种方式的区别在于`display: none;`会使元素完全从文档流中移除，不会占用任何空间，而`visibility: hidden;`仅仅是使元素不可见，但仍然占用页面空间。
选择使用哪种方式隐藏元素取决于具体的需求。如果需要完全隐藏元素，并且不占用任何空间，可以使用`display: none;`。如果需要隐藏元素但仍然占用空间，可以使用`visibility: hidden;`。

15.继承样式

在CSS中，样式继承是指子元素可以继承父元素的某些样式属性。这意味着，如果对父元素应用了某些样式属性，子元素将继承这些属性，并且可以在不显式声明的情况下应用这些样式。
以下是一些常见的样式属性可以被子元素继承的情况：
1. 字体相关属性：例如`font-family`、`font-size`、`font-weight`等。
2. 文本相关属性：例如`color`、`text-align`、`line-height`等。
3. 链接相关属性：例如`text-decoration`、`color`等。
4. 某些布局相关属性：例如`display`、`float`、`position`等（这些属性的继承行为可能会受到其他因素的影响）。
需要注意的是，并非所有的样式属性都可以继承给子元素。例如，`background`、`padding`、`margin`等属性通常不会继承给子元素。
此外，样式继承是有限制的。继承只会发生在父元素和其直接子元素之间。子元素的子元素（孙元素）通常不会继承父元素的样式属性，除非在子元素中显式声明。
如果希望禁止某个属性继承给子元素，可以使用`inherit`关键字或其他适当的值进行覆盖。例如，使用`inherit`可以取消继承父元素的文本颜色：
.child-element {
  color: inherit;
}
需要根据具体的需求和设计来决定哪些样式属性需要继承给子元素，以及是否需要覆盖继承的样式属性。样式继承可以帮助实现一致的样式，减少样式声明的重复，提高开发效率。

16.元素默认样式

每个HTML元素都有默认的样式，这些样式是浏览器为了提供一致的外观效果而预定义的。这些默认样式可以通过浏览器的用户代理样式表（User Agent Stylesheet）来定义。
以下是一些常见HTML元素的默认样式（注意，不同的浏览器可能会有不同的默认样式）：
1. `<h1>`-`<h6>` 标题元素:
   - 字体大小: 根据级别而变化，通常从大到小。
   - 字体加粗: 通常为粗体。
   - 上下边距: 可能会有一些默认的上下边距。
2. `<p>` 段落元素:
   - 字体大小: 通常为正常大小。
   - 上下边距: 可能会有一些默认的上下边距。
3. `<a>` 锚点元素（链接）:
   - 文本颜色: 通常为蓝色。
   - 文本下划线: 通常有下划线。
4. `<ul>` 无序列表元素:
   - 上下边距: 可能会有一些默认的上下边距。
   - 列表标记: 通常为实心圆点。
5. `<ol>` 有序列表元素:
   - 上下边距: 可能会有一些默认的上下边距。
   - 列表标记: 通常为数字。
6. `<li>` 列表项元素:
   - 左边距: 可能会有一些默认的左边距。
7. `<img>` 图片元素:
   - 显示为行内元素。
- 默认情况下，图片的宽度和高度是根据图片的实际尺寸来确定的。
这只是一些常见元素的默认样式示例，实际上每个元素都有自己的一套默认样式。但是，这些默认样式可以通过CSS来覆盖和修改，以满足具体的设计需求。

17.布局小技巧

当设计网页布局时，有一些小技巧可以帮助提高布局的灵活性和响应性，以下是一些常见的布局小技巧：
1. 使用Flexbox布局：Flexbox是一种强大的布局模型，可以方便地实现各种复杂的布局结构，包括水平居中、垂直居中、等高列布局等。它提供了灵活的方式来对齐和分布元素，适用于响应式设计。
2. 使用Grid布局：CSS Grid布局是一种二维的布局系统，可以将页面划分为行和列，使得网页布局变得更加简单和灵活。它适用于复杂的网格结构布局，可以实现多列布局、项目定位等功能。
3. 媒体查询实现响应式布局：通过使用媒体查询，可以根据设备的不同尺寸和分辨率来应用不同的样式，从而实现响应式布局。这使得网页能够在不同的设备上提供最佳的显示效果。
4. 使用相对单位：相对单位（如百分比、em、rem等）可以帮助实现相对于父元素或基准字体大小的布局，从而使布局更具灵活性和可伸缩性。
5. 使用弹性高度和宽度：在设计布局时，尽量使用百分比等相对单位来定义元素的高度和宽度，以实现弹性布局，使得网页能够更好地适应不同尺寸的屏幕。
6. 考虑流动性布局：设计布局时考虑元素的流动性，使得元素能够根据页面宽度的变化而自适应调整布局，提高页面的灵活性。
这些布局小技巧可以帮助开发者更好地设计灵活、响应式的网页布局，提高用户体验并适应不同设备的展示需求。

18浮动介绍

当使用浮动布局时，以下是一些常见的案例和用法：
1. 实现多栏布局：
<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

.column {
  float: left;
  width: 33.33%;
}
在上述示例中，我们创建了一个包含三个列的容器。通过设置每个列的宽度为33.33%，它们将平均占据容器的宽度，并在同一行内显示。
2. 图文混排：
<div class="container">
  <img src="image.jpg" class="float-left">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo vel justo venenatis, in lacinia urna auctor. Suspendisse potenti.</p>
</div>
```
```css
.float-left {
  float: left;
  margin-right: 10px;
}
在上述示例中，我们将图片设置为向左浮动，并使用`margin-right`属性为文本留出一些空白间距。这样，文本将环绕在图片的周围。
3. 清除浮动：
为了避免父元素的高度塌陷，我们可以使用清除浮动的方法。
方法一：使用空的`div`元素作为清除浮动的占位符。
<div class="container">
  <div class="float-left">Left</div>
  <div class="float-right">Right</div>
  <div style="clear: both;"></div>
</div>
```
方法二：使用CSS的clearfix类来清除浮动。
```html
<div class="container clearfix">
  <div class="float-left">Left</div>
  <div class="float-right">Right</div>
</div>
```
```css
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
在上述示例中，我们使用了浮动布局的两个元素，并在父元素上添加了清除浮动的方法，以确保父元素能够正确包含浮动元素。
以上是一些使用浮动布局的常见案例。浮动布局在实际应用中非常灵活，可以根据具体的布局需求进行调整和组合。但是需要注意清除浮动以避免布局问题。

浮动之后的特点：

1、设置元素浮动之后，元素会脱离文档流，元素原来在文档流中的位置，就不会存在

下面的元素就会上移，挤上去

2、设置元素浮动之后，元素会尽量的向左或者向右，向上进行移动，

而且默认情况下，不会脱离父元素的范围

3、设置浮动的元素，不会超过它前一个兄弟，最多一遍齐

4、如果浮动元素的前一个兄弟，没有浮动，则浮动的元素不会超过他前面没有浮动的元素

总结：浮动主要是用于元素的水平布局

2. 当浮动元素遇到了文字，浮动的元素不会覆盖文字，而是文字会环绕在浮动元素的周围

从而实现文字环绕图片的效果

这也是浮动最早的功能，只是后面用于水平布局

3, 元素在文档流当中

块元素：独占一行

行内元素：不会独占一行，不能自定义设置宽高

行内块元素：兼具块元素，行内元素的特点

元素脱离文档流了，就不再区分块，行内，行内块，也就不具有以上的特点

元素也不会独占一行了，也可以设置宽高了等等

当元素设置浮动以后，会完全脱离文档流，元素的一些特点也会发生改变

脱离文档流的特点

块元素：

1:块元素不再独占页面的一行

2:块元素的宽高被内容撑开

行内元素：

1:浮动过后的行内元素更像行内块元素,因问一行可以显示多个，并且默认宽度为内容的宽度

总结：当元素设置浮动以后,脱离文档流，就不需要再区分块和行内

清除浮动

1. 给父元素增加 overflow: hidden;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 父元素 -->
    <div id="c">
        <!-- 三个子元素 -->
        <div id="zjq"></div>
        <div id="zjq1"></div>
        <div id="zjq2"></div>
    </div>
<!-- 第二个元素 -->
    <div id="cc"></div>
</body>

</html>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    #cc {
        width: 400px;
        height: 400px;
        background-color: rgb(185, 29, 29);
    }

    #zjq,
    #zjq1,
    #zjq2 {
        float: left;
    }

    #zjq {
        width: 100px;
        height: 100px;
        background-color: rgb(34, 241, 197);
    }

    #zjq1 {
        width: 100px;
        height: 100px;
        background-color: rgb(49, 95, 85);
    }

    #zjq2 {
        width: 100px;
        height: 100px;
        background-color: rgb(235, 238, 62);
    }
</style>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 父元素 -->
    <div id="c">
        <!-- 三个子元素 -->
        <div id="zjq"></div>
        <div id="zjq1"></div>
        <div id="zjq2"></div>
    </div>
<!-- 第二个元素 -->
    <div id="cc"></div>
</body>

</html>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    #cc {
        width: 400px;
        height: 400px;
        background-color: rgb(185, 29, 29);
    }

    #zjq,
    #zjq1,
    #zjq2 {
        float: left;
    }
#c{
    /* 父元素样式     给高度  超出的内容会隐藏掉*/
    overflow: hidden;
}
    #zjq {
        width: 100px;
        height: 100px;
        background-color: rgb(34, 241, 197);
    }

    #zjq1 {
        width: 100px;
        height: 100px;
        background-color: rgb(49, 95, 85);
    }

    #zjq2 {
        width: 100px;
        height: 100px;
        background-color: rgb(235, 238, 62);
    }
</style>

2.给父元素增加高度，宽度等就会不会影响与父元素相邻的元素了

3.在浮动元素最后面增加一个空的子元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 父元素 -->
        <!-- 三个子元素 -->
        <div id="zjq"></div>
        <div id="zjq1"></div>
        <div id="zjq2"></div>
        <!-- 增加一个空元素 -->
        <div id="zjq3"></div>
<!-- 第二个元素 -->
    <div id="cc"></div>

</body>

</html>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    #cc {
        width: 400px;
        height: 400px;
        background-color: rgb(185, 29, 29);
    }
#zjq3{这是空元素
    /* 清除空元素左右的浮动   是块元素或者行内块元素 不能有浮动*/
    clear: both;
}
    #zjq,
    #zjq1,
    #zjq2 {
        float: left;
    }
    #zjq {
        width: 100px;
        height: 100px;
        background-color: rgb(34, 241, 197);
    }

    #zjq1 {
        width: 100px;
        height: 100px;
        background-color: rgb(49, 95, 85);
    }

    #zjq2 {
        width: 100px;
        height: 100px;
        background-color: rgb(235, 238, 62);
    }
</style>

4.给父元素增加伪元素清除浮动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 父元素 -->
      <div class="fq">
        <!-- 三个子元素 -->
        <div id="zjq"></div>
        <div id="zjq1"></div>
        <div id="zjq2"></div>
      </div>
<!-- 第二个元素 -->
    <div id="cc"></div>

</body>

</html>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    .fq::after{
        /* 给伪元素清除浮动 */
        content:"";
        display: block;
        clear: both;
    }
    #cc {
        width: 400px;
        height: 400px;
        background-color: rgb(185, 29, 29);
    }
    #zjq,
    #zjq1,
    #zjq2 {
        float: left;
    }
    #zjq {
        width: 100px;
        height: 100px;
        background-color: rgb(34, 241, 197);
    }

    #zjq1 {
        width: 100px;
        height: 100px;
        background-color: rgb(49, 95, 85);
    }

    #zjq2 {
        width: 100px;
        height: 100px;
        background-color: rgb(235, 238, 62);
    }
</style>

5.给父元素增加 display:flex; 使用flex布局可清除浮动

19.定位

CSS中的定位属性用于控制元素在网页布局中的位置。主要有以下几种定位属性：
1. **Static（静态定位）**：
- 这是元素的默认定位方式，元素按照它们在文档中出现的顺序进行布局，不受top、right、bottom、left等属性的影响。
   
   .static {
     position: static;
   }
   
2. **Relative（相对定位）**：
- 相对定位是相对于元素自身在正常文档流中的位置进行定位。通过设置top、right、bottom、left等属性，可以将元素相对于其正常位置进行移动，但它仍然占据原本的空间。
   
   .relative {
     position: relative;
     top: 10px;
     left: 20px;
   }
3. **Absolute（绝对定位）**：
- 绝对定位是相对于最近的已定位祖先元素（非static定位）进行定位，如果没有已定位的祖先元素，则相对于最初的包含块（通常是文档的根元素）进行定位。绝对定位的元素不再占据文档流中的位置，可以通过设置top、right、bottom、left等属性，精确地控制元素的位置。
   
   .absolute {
     position: absolute;
     top: 50px;
     right: 0;
   }
   
4. **Fixed（固定定位）**：
- 固定定位是相对于浏览器窗口进行定位的，即使页面滚动，元素的位置也不会改变。
   
   .fixed {
     position: fixed;
     bottom: 10px;
     right: 10px;
   }
   
5. **Sticky（粘性定位）**：
- 粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
   
   .sticky {
     position: sticky;
     top: 0;
   }
   
这些定位属性可以帮助我们实现复杂的布局，但需要注意的是，使用绝对定位和固定定位时，要确保元素不会遮挡其他重要内容，以及在响应式设计中要进行适当的调整。

20.布局

CSS布局是指如何将网页中的元素进行排列和定位，以创建所需的页面结构和外观。以下是一些常见的CSS布局技术：

1. **流动布局（Flow Layout）**：
- 流动布局是默认的布局方式，元素按照它们在HTML文档中的出现顺序从上到下依次排列。如果没有特殊的定位或浮动属性，元素会自动换行。

2. **浮动布局（Float Layout）**：
- 浮动布局通过将元素设置为浮动（`float`）来实现。浮动的元素会脱离正常文档流，并根据指定的方向漂浮在其他元素的周围。浮动元素可以用于实现多栏布局、图文混排等效果。、
3. **弹性盒子布局（Flexbox Layout）**：
- 弹性盒子布局是一种响应式布局技术，通过`display: flex`将容器元素设置为弹性容器，内部的子元素则成为弹性项目。通过设置弹性容器和弹性项目的属性，可以实现灵活的水平和垂直布局。

4. **网格布局（Grid Layout）**：
- 网格布局是一种二维的布局系统，通过将容器元素设置为网格容器，可以将其划分为多个网格单元格。通过设置网格容器和网格项目的属性，可以实现复杂的布局结构，并精确控制元素的位置和大小。

5. **定位布局（Positioning Layout）**：
- 定位布局通过使用CSS的定位属性（`position`）来实现元素的精确定位。常用的定位属性包括相对定位（`position: relative`）、绝对定位（`position: absolute`）、固定定位（`position: fixed`）等。通过调整元素的`top`、`right`、`bottom`、`left`等属性，可以将元素放置在指定的位置。

6. **响应式布局（Responsive Layout）**：
- 响应式布局是指根据不同的设备和屏幕尺寸，以及用户的操作行为，自动调整和适应页面布局和外观。通过使用媒体查询（Media Query）和CSS的弹性盒子布局、网格布局等技术，可以实现响应式的布局设计。

以上是一些常见的CSS布局技术，每种技术都有其适用的场景和特点。在实际应用中，可以根据需求选择合适的布局技术，或者结合多种技术进行布局设计。