浮动属性

CSS 定位属性（Positioning Properties）用于控制元素在页面中的位置。通过这些属性，你可以精确地控制元素的布局，使其相对于其正常位置、父元素、浏览器窗口或其他元素进行定位。以下是CSS定位属性的详细介绍：

1. `position` 属性

position 属性定义了元素的定位方式。它有以下几种取值：

static（默认值）：元素按照正常的文档流进行布局，不受 top、right、bottom、left 和 z-index 属性的影响。
relative：元素相对于其正常位置进行定位。通过 top、right、bottom、left 属性可以调整元素的位置，但元素仍然占据原来的空间，不会影响其他元素的布局。
absolute：元素相对于最近的非 static 定位的祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是浏览器窗口）进行定位。元素会脱离正常的文档流，不占据空间，可能会覆盖其他元素。
fixed：元素相对于浏览器窗口进行定位，即使页面滚动，元素的位置也不会改变。元素会脱离正常的文档流，不占据空间，可能会覆盖其他元素。
sticky：元素根据用户的滚动位置在 relative 和 fixed 之间切换。元素在滚动到特定位置之前是相对定位的，一旦滚动到特定位置，元素会“粘”在页面上，变成固定定位。

2. `top`、`right`、`bottom`、`left` 属性

这些属性用于指定元素相对于其定位上下文（positioning context）的偏移量。它们的值可以是长度（如 px、em）、百分比（相对于包含块的尺寸）或 auto。

top：指定元素上边缘相对于其定位上下文的顶部边缘的偏移量。
right：指定元素右边缘相对于其定位上下文的右侧边缘的偏移量。
bottom：指定元素下边缘相对于其定位上下文的底部边缘的偏移量。
left：指定元素左边缘相对于其定位上下文的左侧边缘的偏移量。

3. `z-index` 属性

z-index 属性用于控制元素的堆叠顺序（z-order）。具有较高 z-index 值的元素会覆盖具有较低 z-index 值的元素。z-index 仅在 position 属性值为 relative、absolute、fixed 或 sticky 时生效。

z-index 的值可以是整数（正数、负数或零），也可以是 auto（默认值）。auto 表示元素的堆叠顺序与其在文档流中的顺序一致。

4. `clip` 属性（已废弃）

clip 属性用于定义元素的可见区域。它通常与 position: absolute 或 position: fixed 一起使用。clip 属性已被废弃，建议使用 clip-path 属性来替代。

5. `clip-path` 属性

clip-path 属性用于定义元素的剪切区域。通过 clip-path，你可以创建复杂的形状来裁剪元素，使其只显示特定区域的可见内容。

6. `transform` 属性

transform 属性用于对元素进行2D或3D变换，如旋转、缩放、平移等。虽然 transform 不是定位属性，但它可以与定位属性结合使用，以实现更复杂的布局效果。

7. `overflow` 属性

overflow 属性用于控制元素内容溢出时的显示方式。它可以与定位元素一起使用，以控制溢出内容的显示方式。

8. `visibility` 属性

visibility 属性用于控制元素的可见性。虽然它不是定位属性，但它可以与定位元素一起使用，以控制元素的显示和隐藏。

9. `float` 属性

float 属性用于使元素浮动到其容器的左侧或右侧。虽然它不是定位属性，但它可以与定位属性结合使用，以实现复杂的布局效果。

10. `clear` 属性

clear 属性用于控制元素是否允许在其之前浮动的元素旁边显示。它通常与 float 属性一起使用，以防止浮动元素重叠。

示例

css
.box {
  position: absolute; /* 绝对定位 */
  top: 50px;          /* 距离顶部50px */
  left: 100px;        /* 距离左侧100px */
  z-index: 10;        /* 堆叠顺序为10 */
}

.sticky-box {
  position: sticky;   /* 粘性定位 */
  top: 20px;          /* 距离顶部20px时固定 */
}

.fixed-box {
  position: fixed;    /* 固定定位 */
  bottom: 0;          /* 固定在页面底部 */
  right: 0;           /* 固定在页面右侧 */
}

总结

CSS定位属性提供了强大的工具来控制元素在页面中的位置和布局。通过结合使用 position、top、right、bottom、left、z-index 等属性，你可以实现复杂的布局效果，满足各种设计需求。

定位属性

1. `position` 属性

position 属性定义了元素的定位方式。它有以下几种取值：

static（默认值）：元素按照正常的文档流进行布局，不受 top、right、bottom、left 和 z-index 属性的影响。
relative：元素相对于其正常位置进行定位。通过 top、right、bottom、left 属性可以调整元素的位置，但元素仍然占据原来的空间，不会影响其他元素的布局。
absolute：元素相对于最近的非 static 定位的祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是浏览器窗口）进行定位。元素会脱离正常的文档流，不占据空间，可能会覆盖其他元素。
fixed：元素相对于浏览器窗口进行定位，即使页面滚动，元素的位置也不会改变。元素会脱离正常的文档流，不占据空间，可能会覆盖其他元素。
sticky：元素根据用户的滚动位置在 relative 和 fixed 之间切换。元素在滚动到特定位置之前是相对定位的，一旦滚动到特定位置，元素会“粘”在页面上，变成固定定位。

2. `top`、`right`、`bottom`、`left` 属性

top：指定元素上边缘相对于其定位上下文的顶部边缘的偏移量。
right：指定元素右边缘相对于其定位上下文的右侧边缘的偏移量。
bottom：指定元素下边缘相对于其定位上下文的底部边缘的偏移量。
left：指定元素左边缘相对于其定位上下文的左侧边缘的偏移量。

3. `z-index` 属性

z-index 的值可以是整数（正数、负数或零），也可以是 auto（默认值）。auto 表示元素的堆叠顺序与其在文档流中的顺序一致。

4. `clip` 属性（已废弃）

clip 属性用于定义元素的可见区域。它通常与 position: absolute 或 position: fixed 一起使用。clip 属性已被废弃，建议使用 clip-path 属性来替代。

5. `clip-path` 属性

clip-path 属性用于定义元素的剪切区域。通过 clip-path，你可以创建复杂的形状来裁剪元素，使其只显示特定区域的可见内容。

6. `transform` 属性

7. `overflow` 属性

overflow 属性用于控制元素内容溢出时的显示方式。它可以与定位元素一起使用，以控制溢出内容的显示方式。

8. `visibility` 属性

visibility 属性用于控制元素的可见性。虽然它不是定位属性，但它可以与定位元素一起使用，以控制元素的显示和隐藏。

9. `float` 属性

float 属性用于使元素浮动到其容器的左侧或右侧。虽然它不是定位属性，但它可以与定位属性结合使用，以实现复杂的布局效果。

10. `clear` 属性

clear 属性用于控制元素是否允许在其之前浮动的元素旁边显示。它通常与 float 属性一起使用，以防止浮动元素重叠。

示例

css
.box {
  position: absolute; /* 绝对定位 */
  top: 50px;          /* 距离顶部50px */
  left: 100px;        /* 距离左侧100px */
  z-index: 10;        /* 堆叠顺序为10 */
}

.sticky-box {
  position: sticky;   /* 粘性定位 */
  top: 20px;          /* 距离顶部20px时固定 */
}

.fixed-box {
  position: fixed;    /* 固定定位 */
  bottom: 0;          /* 固定在页面底部 */
  right: 0;           /* 固定在页面右侧 */
}

总结

Display属性

CSS `display` 属性

CSS 的 display 属性用于控制元素的显示类型。通过 display 属性，你可以决定元素是块级元素、行内元素、行内块级元素，还是完全隐藏元素。display 属性是 CSS 中最基础且最重要的属性之一，它直接影响元素在页面中的布局和行为。

`display` 属性的常见取值

block：
- 元素表现为块级元素，占据其父元素的整个宽度，前后带有换行符。
- 常见的块级元素有 <div>、<p>、<h1> 等。
inline：
- 元素表现为行内元素，只占据其内容的宽度，前后不带有换行符。
- 常见的行内元素有 <span>、<a>、<strong> 等。
inline-block：
- 元素表现为行内块级元素，既具有行内元素的特性（不换行），又具有块级元素的特性（可以设置宽度和高度）。
- 适合用于创建水平排列的元素，如导航菜单。
none：
- 元素完全隐藏，不占据页面空间，也不会影响布局。
- 适合用于隐藏元素或实现条件性显示。
flex：
- 将元素设置为弹性盒子容器，用于创建灵活的布局。
- 适合用于创建响应式布局和复杂的网格系统。
grid：
- 将元素设置为网格容器，用于创建二维网格布局。
- 适合用于创建复杂的网格系统。
table、table-row、table-cell：
- 将元素表现为表格相关的元素，用于创建表格布局。
- 适合用于创建表格或模拟表格布局。
list-item：
- 将元素表现为列表项，通常用于创建列表。
- 适合用于创建带有项目符号的列表。

场景 Demo

假设我们需要创建一个简单的导航菜单，其中包含三个链接。我们希望这些链接水平排列，并且每个链接之间有一定的间距。

HTML 结构

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    .container {
      width: 80%;
      margin: 0 auto;
      padding: 20px;
      background-color: #f9f9f9;
      border: 1px solid #ddd;
    }

    .nav {
      list-style: none;
      padding: 0;
      margin: 0;
      background-color: #333;
      text-align: center;
    }

    .nav li {
      display: inline-block;
      margin: 0 10px;
    }

    .nav a {
      display: block;
      padding: 10px 20px;
      color: #fff;
      text-decoration: none;
      transition: background-color 0.3s;
    }

    .nav a:hover {
      background-color: #555;
    }
  </style>
</head>
<body>
  <div class="container">
    <ul class="nav">
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </div>
</body>
</html>

解释

HTML 结构：
- container 类用于包裹导航菜单。
- nav 类用于包裹导航链接的列表。
- li 元素用于表示每个导航项。
- a 元素用于表示导航链接。
CSS 样式：
- .nav 类：
  - list-style: none 用于移除列表项的默认项目符号。
  - padding: 0 和 margin: 0 用于移除默认的内边距和外边距。
  - background-color: #333 用于设置导航菜单的背景颜色。
  - text-align: center 用于将导航项居中对齐。
- .nav li 类：
  - display: inline-block 用于将列表项设置为行内块级元素，使其水平排列。
  - margin: 0 10px 用于设置列表项之间的间距。
- .nav a 类：
  - display: block 用于将链接设置为块级元素，使其占据整个列表项的宽度。
  - padding: 10px 20px 用于设置链接的内边距。
  - color: #fff 用于设置链接的文本颜色。
  - text-decoration: none 用于移除链接的下划线。
  - transition: background-color 0.3s 用于设置背景颜色的过渡效果。
- .nav a:hover 类：
  - background-color: #555 用于设置鼠标悬停时的背景颜色。

总结

通过使用 display 属性，我们可以灵活地控制元素的显示类型和布局方式。在这个示例中，我们使用 inline-block 将导航项水平排列，并使用 block 将链接设置为块级元素，以便更好地控制其样式。display 属性是 CSS 布局的基础，掌握它可以帮助你创建各种复杂的页面布局。

标准盒子模型和怪异盒子模型

标准盒模型（Standard Box Model）和怪异盒模型（Quirks Mode Box Model）

在 CSS 中，盒模型（Box Model）定义了元素的布局方式，包括元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）。盒模型有两种主要类型：标准盒模型和怪异盒模型。

1. 标准盒模型（Standard Box Model）

标准盒模型是 CSS 的默认盒模型，也称为 W3C 盒模型。在标准盒模型中，元素的总宽度（width）和总高度（height）只包括内容区域（content area），不包括内边距、边框和外边距。

计算公式：

总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
总高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

示例：

css
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

在这个例子中：

内容宽度 = 200px
内容高度 = 100px
总宽度 = 200px + 20px + 20px + 5px + 5px + 10px + 10px = 270px
总高度 = 100px + 20px + 20px + 5px + 5px + 10px + 10px = 170px

2. 怪异盒模型（Quirks Mode Box Model）

怪异盒模型也称为 IE 盒模型，主要在旧版本的 Internet Explorer（IE5 和更早版本）中使用。在怪异盒模型中，元素的总宽度（width）和总高度（height）包括内容区域、内边距和边框，但不包括外边距。

计算公式：

总宽度 = width + margin-left + margin-right
总高度 = height + margin-top + margin-bottom

示例：

css
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

在这个例子中：

内容宽度 = 200px - 20px - 20px - 5px - 5px = 150px
内容高度 = 100px - 20px - 20px - 5px - 5px = 50px
总宽度 = 200px + 10px + 10px = 220px
总高度 = 100px + 10px + 10px = 120px

3. 如何选择盒模型

在现代浏览器中，默认使用标准盒模型。如果你想使用怪异盒模型，可以通过设置 box-sizing 属性来实现。

box-sizing: content-box;（默认值）：使用标准盒模型。
box-sizing: border-box;：使用怪异盒模型。

示例：

css
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  box-sizing: border-box; /* 使用怪异盒模型 */
}

在这个例子中，使用 box-sizing: border-box; 后：

内容宽度 = 200px - 20px - 20px - 5px - 5px = 150px
内容高度 = 100px - 20px - 20px - 5px - 5px = 50px
总宽度 = 200px + 10px + 10px = 220px
总高度 = 100px + 10px + 10px = 120px

总结

标准盒模型：元素的总宽度/高度只包括内容区域，不包括内边距、边框和外边距。
怪异盒模型：元素的总宽度/高度包括内容区域、内边距和边框，但不包括外边距。
通过 box-sizing 属性，你可以选择使用哪种盒模型。默认情况下，现代浏览器使用标准盒模型，但你可以通过设置 box-sizing: border-box; 来使用怪异盒模型。

理解这两种盒模型的区别对于精确控制元素的布局和尺寸非常重要。

边框圆角

圆角边框（Border Radius）

CSS 的 border-radius 属性用于创建圆角边框，使元素的边角变得圆滑。通过 border-radius，你可以为元素的每个角设置不同的半径，从而创建各种形状的圆角效果。

`border-radius` 属性

border-radius 属性可以接受一个或多个值，用于定义元素的圆角半径。你可以为每个角分别设置半径，也可以使用简写形式。

单值语法

border-radius: <length> | <percentage>;
- 所有四个角的半径相同。

双值语法

border-radius: <length> | <percentage> <length> | <percentage>;
- 第一个值应用于左上角和右下角，第二个值应用于右上角和左下角。

三值语法

border-radius: <length> | <percentage> <length> | <percentage> <length> | <percentage>;
- 第一个值应用于左上角，第二个值应用于右上角和左下角，第三个值应用于右下角。

四值语法

border-radius: <length> | <percentage> <length> | <percentage> <length> | <percentage> <length> | <percentage>;
- 第一个值应用于左上角，第二个值应用于右上角，第三个值应用于右下角，第四个值应用于左下角。

单独设置每个角的半径

border-top-left-radius：设置左上角的半径。
border-top-right-radius：设置右上角的半径。
border-bottom-right-radius：设置右下角的半径。
border-bottom-left-radius：设置左下角的半径。

示例代码

以下是一些使用 border-radius 属性的示例代码，展示如何创建不同形状的圆角边框。

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圆角边框示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f9f9f9;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: #3498db;
      margin: 20px;
      display: inline-block;
    }

    .box1 {
      border-radius: 20px;
    }

    .box2 {
      border-radius: 50%;
    }

    .box3 {
      border-radius: 10px 40px;
    }

    .box4 {
      border-radius: 10px 40px 10px;
    }

    .box5 {
      border-radius: 10px 40px 10px 40px;
    }

    .box6 {
      border-top-left-radius: 20px;
      border-top-right-radius: 40px;
      border-bottom-right-radius: 60px;
      border-bottom-left-radius: 80px;
    }
  </style>
</head>
<body>
  <div class="box box1">所有角半径相同</div>
  <div class="box box2">圆形</div>
  <div class="box box3">左上和右下角半径相同，右上和左下角半径不同</div>
  <div class="box box4">左上角半径不同，右上和左下角半径相同，右下角半径不同</div>
  <div class="box box5">每个角半径不同</div>
  <div class="box box6">单独设置每个角的半径</div>
</body>
</html>

解释

HTML 结构：
- box 类用于创建一个 200x200 像素的矩形框。
- 每个 box 类都有一个不同的 border-radius 样式，用于展示不同的圆角效果。
CSS 样式：
- .box 类：
  - width: 200px 和 height: 200px 用于设置矩形框的尺寸。
  - background-color: #3498db 用于设置矩形框的背景颜色。
  - margin: 20px 用于设置矩形框的外边距。
  - display: inline-block 用于使矩形框水平排列。
- .box1 类：
  - border-radius: 20px 用于设置所有四个角的半径为 20px。
- .box2 类：
  - border-radius: 50% 用于创建一个圆形，半径为矩形框宽度的一半。
- .box3 类：
  - border-radius: 10px 40px 用于设置左上角和右下角的半径为 10px，右上角和左下角的半径为 40px。
- .box4 类：
  - border-radius: 10px 40px 10px 用于设置左上角的半径为 10px，右上角和左下角的半径为 40px，右下角的半径为 10px。
- .box5 类：
  - border-radius: 10px 40px 10px 40px 用于设置每个角的半径不同。
- .box6 类：
  - border-top-left-radius: 20px 用于设置左上角的半径为 20px。
  - border-top-right-radius: 40px 用于设置右上角的半径为 40px。
  - border-bottom-right-radius: 60px 用于设置右下角的半径为 60px。
  - border-bottom-left-radius: 80px 用于设置左下角的半径为 80px。

总结

border-radius 属性是创建圆角边框的强大工具，通过设置不同的半径值，你可以创建各种形状的圆角效果。掌握 border-radius 的使用方法，可以帮助你设计出更具吸引力的用户界面。

阴影

CSS 阴影（Box Shadow 和 Text Shadow）

CSS 阴影效果可以通过 box-shadow 和 text-shadow 属性来实现。box-shadow 用于为元素的边框添加阴影效果，而 text-shadow 用于为文本添加阴影效果。

`box-shadow` 属性

box-shadow 属性用于为元素的边框添加阴影效果。它可以接受多个值，用于定义阴影的偏移、模糊、扩展和颜色。

语法

css
box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

<offset-x>：阴影的水平偏移量，正值向右，负值向左。
<offset-y>：阴影的垂直偏移量，正值向下，负值向上。
<blur-radius>：阴影的模糊半径，值越大，阴影越模糊。
<spread-radius>：阴影的扩展半径，正值使阴影变大，负值使阴影变小。
<color>：阴影的颜色。

示例

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

`text-shadow` 属性

text-shadow 属性用于为文本添加阴影效果。它可以接受多个值，用于定义阴影的偏移、模糊和颜色。

语法

css
text-shadow: <offset-x> <offset-y> <blur-radius> <color>;

<offset-x>：阴影的水平偏移量，正值向右，负值向左。
<offset-y>：阴影的垂直偏移量，正值向下，负值向上。
<blur-radius>：阴影的模糊半径，值越大，阴影越模糊。
<color>：阴影的颜色。

示例

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

场景页面示例

以下是一个使用 box-shadow 和 text-shadow 属性的场景页面示例，展示如何创建一个具有阴影效果的卡片布局。

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>阴影效果示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f9f9f9;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .card {
      width: 300px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      overflow: hidden;
    }

    .card img {
      width: 100%;
      height: auto;
    }

    .card-content {
      padding: 20px;
    }

    .card-content h2 {
      margin: 0;
      font-size: 24px;
      color: #333;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    }

    .card-content p {
      margin: 10px 0 0;
      font-size: 16px;
      color: #666;
    }

    .card-content .button {
      display: inline-block;
      margin-top: 20px;
      padding: 10px 20px;
      background-color: #3498db;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .card-content .button:hover {
      background-color: #2980b9;
    }
  </style>
</head>
<body>
  <div class="card">
    <img src="https://via.placeholder.com/300x200" alt="卡片图片">
    <div class="card-content">
      <h2>卡片标题</h2>
      <p>这里是卡片内容，可以放置描述性文字或其他内容。</p>
      <a href="#" class="button">了解更多</a>
    </div>
  </div>
</body>
</html>

解释

HTML 结构：
- card 类用于创建一个卡片布局。
- card img 用于展示卡片图片。
- card-content 类用于包裹卡片内容，包括标题、描述和按钮。
CSS 样式：
- .card 类：
  - width: 300px 用于设置卡片的宽度。
  - background-color: #fff 用于设置卡片的背景颜色。
  - border-radius: 10px 用于设置卡片的圆角边框。
  - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) 用于为卡片添加阴影效果。
  - overflow: hidden 用于隐藏超出卡片边界的部分。
- .card img 类：
  - width: 100% 用于设置图片的宽度为卡片的宽度。
  - height: auto 用于保持图片的宽高比。
- .card-content 类：
  - padding: 20px 用于设置卡片内容的内边距。
- .card-content h2 类：
  - margin: 0 用于移除标题的默认外边距。
  - font-size: 24px 用于设置标题的字体大小。
  - color: #333 用于设置标题的文本颜色。
  - text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) 用于为标题添加阴影效果。
- .card-content p 类：
  - margin: 10px 0 0 用于设置描述的上下外边距。
  - font-size: 16px 用于设置描述的字体大小。
  - color: #666 用于设置描述的文本颜色。
- .card-content .button 类：
  - display: inline-block 用于将按钮设置为行内块级元素。
  - margin-top: 20px 用于设置按钮的上外边距。
  - padding: 10px 20px 用于设置按钮的内边距。
  - background-color: #3498db 用于设置按钮的背景颜色。
  - color: #fff 用于设置按钮的文本颜色。
  - text-decoration: none 用于移除按钮的下划线。
  - border-radius: 5px 用于设置按钮的圆角边框。
  - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) 用于为按钮添加阴影效果。
- .card-content .button:hover 类：
  - background-color: #2980b9 用于设置按钮在悬停时的背景颜色。

总结

box-shadow 和 text-shadow 属性是创建阴影效果的强大工具，通过设置不同的偏移、模糊和颜色，你可以为元素和文本添加各种阴影效果。掌握这些属性的使用方法，可以帮助你设计出更具吸引力的用户界面。

线性渐变

CSS 线性渐变（Linear Gradient）

CSS 线性渐变（linear-gradient）是一种用于创建颜色渐变效果的 CSS 函数。通过 linear-gradient，你可以创建从一个颜色到另一个颜色的平滑过渡效果。线性渐变可以应用于背景、边框、文本等元素。

`linear-gradient` 语法

css
background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction：指定渐变的方向，可以是角度（如 45deg）或关键字（如 to top、to right、to bottom、to left）。
color-stop：指定渐变的颜色和位置。颜色可以是任何有效的 CSS 颜色值，位置可以是百分比（如 50%）或长度（如 100px）。

示例

以下是一些常见的 linear-gradient 示例：

从上到下的渐变：

css
background: linear-gradient(to bottom, red, blue);

从左到右的渐变：

css
background: linear-gradient(to right, red, blue);

对角线渐变：

css
background: linear-gradient(45deg, red, blue);

多色渐变：

css
background: linear-gradient(to right, red, yellow, green, blue);

指定颜色位置：

css
background: linear-gradient(to right, red 20%, yellow 50%, blue 80%);

原生 Demo

以下是一个使用 linear-gradient 创建的渐变背景示例。我们将创建一个包含多个渐变背景的页面，展示不同的渐变效果。

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 线性渐变示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f9f9f9;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
    }

    .box {
      width: 200px;
      height: 200px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
    }

    .box1 {
      background: linear-gradient(to bottom, red, blue);
    }

    .box2 {
      background: linear-gradient(to right, red, blue);
    }

    .box3 {
      background: linear-gradient(45deg, red, blue);
    }

    .box4 {
      background: linear-gradient(to right, red, yellow, green, blue);
    }

    .box5 {
      background: linear-gradient(to right, red 20%, yellow 50%, blue 80%);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box box1">从上到下的渐变</div>
    <div class="box box2">从左到右的渐变</div>
    <div class="box box3">对角线渐变</div>
    <div class="box box4">多色渐变</div>
    <div class="box box5">指定颜色位置</div>
  </div>
</body>
</html>

解释

HTML 结构：
- container 类用于创建一个容器，包含多个渐变背景的盒子。
- box 类用于创建每个渐变背景的盒子。
CSS 样式：
- .container 类：
  - display: flex 用于使用弹性盒子布局。
  - flex-wrap: wrap 用于使盒子在容器中自动换行。
  - gap: 20px 用于设置盒子之间的间距。
  - padding: 20px 用于设置容器的内边距。
- .box 类：
  - width: 200px 和 height: 200px 用于设置盒子的尺寸。
  - border-radius: 10px 用于设置盒子的圆角边框。
  - display: flex 用于使用弹性盒子布局。
  - align-items: center 用于垂直居中对齐盒子中的文字。
  - justify-content: center 用于水平居中对齐盒子中的文字。
  - color: #fff 用于设置文字颜色为白色。
  - font-size: 18px 用于设置文字大小。
  - font-weight: bold 用于设置文字加粗。
- .box1 类：
  - background: linear-gradient(to bottom, red, blue) 用于创建从上到下的红色到蓝色的渐变。
- .box2 类：
  - background: linear-gradient(to right, red, blue) 用于创建从左到右的红色到蓝色的渐变。
- .box3 类：
  - background: linear-gradient(45deg, red, blue) 用于创建对角线方向的红色到蓝色的渐变。
- .box4 类：
  - background: linear-gradient(to right, red, yellow, green, blue) 用于创建从左到右的红色到黄色到绿色到蓝色的多色渐变。
- .box5 类：
  - background: linear-gradient(to right, red 20%, yellow 50%, blue 80%) 用于创建从左到右的红色到黄色到蓝色的渐变，并指定颜色位置。

总结

通过使用 linear-gradient 属性，我们可以轻松创建各种颜色渐变效果。掌握 linear-gradient 的使用方法，可以帮助你设计出更具吸引力的用户界面。

径向渐变

CSS 线性渐变（Linear Gradient）

`linear-gradient` 语法

css
background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction：指定渐变的方向，可以是角度（如 45deg）或关键字（如 to top、to right、to bottom、to left）。
color-stop：指定渐变的颜色和位置。颜色可以是任何有效的 CSS 颜色值，位置可以是百分比（如 50%）或长度（如 100px）。

示例

以下是一些常见的 linear-gradient 示例：

从上到下的渐变：

css
background: linear-gradient(to bottom, red, blue);

从左到右的渐变：

css
background: linear-gradient(to right, red, blue);

对角线渐变：

css
background: linear-gradient(45deg, red, blue);

多色渐变：

css
background: linear-gradient(to right, red, yellow, green, blue);

指定颜色位置：

css
background: linear-gradient(to right, red 20%, yellow 50%, blue 80%);

原生 Demo

以下是一个使用 linear-gradient 创建的渐变背景示例。我们将创建一个包含多个渐变背景的页面，展示不同的渐变效果。

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 线性渐变示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f9f9f9;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
    }

    .box {
      width: 200px;
      height: 200px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
    }

    .box1 {
      background: linear-gradient(to bottom, red, blue);
    }

    .box2 {
      background: linear-gradient(to right, red, blue);
    }

    .box3 {
      background: linear-gradient(45deg, red, blue);
    }

    .box4 {
      background: linear-gradient(to right, red, yellow, green, blue);
    }

    .box5 {
      background: linear-gradient(to right, red 20%, yellow 50%, blue 80%);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box box1">从上到下的渐变</div>
    <div class="box box2">从左到右的渐变</div>
    <div class="box box3">对角线渐变</div>
    <div class="box box4">多色渐变</div>
    <div class="box box5">指定颜色位置</div>
  </div>
</body>
</html>

解释

HTML 结构：
- container 类用于创建一个容器，包含多个渐变背景的盒子。
- box 类用于创建每个渐变背景的盒子。
CSS 样式：
- .container 类：
  - display: flex 用于使用弹性盒子布局。
  - flex-wrap: wrap 用于使盒子在容器中自动换行。
  - gap: 20px 用于设置盒子之间的间距。
  - padding: 20px 用于设置容器的内边距。
- .box 类：
  - width: 200px 和 height: 200px 用于设置盒子的尺寸。
  - border-radius: 10px 用于设置盒子的圆角边框。
  - display: flex 用于使用弹性盒子布局。
  - align-items: center 用于垂直居中对齐盒子中的文字。
  - justify-content: center 用于水平居中对齐盒子中的文字。
  - color: #fff 用于设置文字颜色为白色。
  - font-size: 18px 用于设置文字大小。
  - font-weight: bold 用于设置文字加粗。
- .box1 类：
  - background: linear-gradient(to bottom, red, blue) 用于创建从上到下的红色到蓝色的渐变。
- .box2 类：
  - background: linear-gradient(to right, red, blue) 用于创建从左到右的红色到蓝色的渐变。
- .box3 类：
  - background: linear-gradient(45deg, red, blue) 用于创建对角线方向的红色到蓝色的渐变。
- .box4 类：
  - background: linear-gradient(to right, red, yellow, green, blue) 用于创建从左到右的红色到黄色到绿色到蓝色的多色渐变。
- .box5 类：
  - background: linear-gradient(to right, red 20%, yellow 50%, blue 80%) 用于创建从左到右的红色到黄色到蓝色的渐变，并指定颜色位置。

总结

通过使用 linear-gradient 属性，我们可以轻松创建各种颜色渐变效果。掌握 linear-gradient 的使用方法，可以帮助你设计出更具吸引力的用户界面。

手机微信布局

好的，下面是一个使用自适应布局实现的手机微信聊天页面示例。页面包含一个固定定位的顶部导航栏、聊天记录区域和固定定位的底部输入框和发送按钮。所有代码都写在一个 HTML 文件中。

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>微信聊天页面</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f9f9f9;
    }

    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background-color: #32DF72;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      box-sizing: border-box;
    }

    .header .back-icon {
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
    }

    .header .title {
      font-size: 18px;
      font-weight: bold;
    }

    .header .avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: #fff;
      color: #32DF72;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
    }

    .chat-container {
      margin-top: 60px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .message {
      max-width: 70%;
      padding: 10px;
      border-radius: 10px;
      font-size: 16px;
      line-height: 1.4;
    }

    .message.left {
      background-color: #fff;
      align-self: flex-start;
      border: 1px solid #ddd;
    }

    .message.right {
      background-color: #32DF72;
      color: #fff;
      align-self: flex-end;
    }

    .input-area {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      box-sizing: border-box;
      border-top: 1px solid #ddd;
    }

    .input-area input {
      flex: 1;
      height: 40px;
      padding: 0 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      outline: none;
    }

    .input-area button {
      height: 40px;
      padding: 0 20px;
      margin-left: 10px;
      background-color: #32DF72;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="header">
    <div class="back-icon" onclick="goBack()">←</div>
    <div class="title">联系人名字</div>
    <div class="avatar" onclick="goToProfile()">A</div>
  </div>

  <div class="chat-container">
    <div class="message left">你好，我是对方。</div>
    <div class="message right">你好，我是自己。</div>
    <div class="message left">很高兴认识你！</div>
    <div class="message right">我也是！</div>
  </div>

  <div class="input-area">
    <input type="text" placeholder="输入消息...">
    <button onclick="sendMessage()">发送</button>
  </div>

  <script>
    function goBack() {
      console.log('返回按钮点击');
      // 你可以在这里添加返回逻辑
    }

    function goToProfile() {
      console.log('头像点击，跳转到个人资料');
      // 你可以在这里添加跳转到个人资料的逻辑
    }

    function sendMessage() {
      console.log('发送按钮点击');
      // 你可以在这里添加发送消息的逻辑
    }
  </script>
</body>
</html>

解释

HTML 结构：
- header 类用于创建固定定位的顶部导航栏。
- back-icon 类用于创建返回按钮。
- title 类用于创建联系人名字的标题。
- avatar 类用于创建圆形头像。
- chat-container 类用于创建聊天记录区域。
- message 类用于创建聊天消息，left 类表示对方的消息，right 类表示自己的消息。
- input-area 类用于创建固定定位的底部输入框和发送按钮。
CSS 样式：
- .header 类：
  - position: fixed 用于将顶部导航栏固定在页面顶部。
  - top: 0 和 left: 0 用于将顶部导航栏定位在页面左上角。
  - width: 100% 用于设置顶部导航栏的宽度为整个页面宽度。
  - height: 60px 用于设置顶部导航栏的高度。
  - background-color: #32DF72 用于设置顶部导航栏的背景颜色。
  - color: #fff 用于设置顶部导航栏的文本颜色。
  - display: flex 用于使用弹性盒子布局。
  - align-items: center 用于垂直居中对齐顶部导航栏中的元素。
  - justify-content: space-between 用于在顶部导航栏中均匀分布元素。
  - padding: 0 20px 用于设置顶部导航栏的内边距。
  - box-sizing: border-box 用于使用怪异盒模型，使 width 和 height 包括内边距和边框。
- .back-icon 类：
  - font-size: 20px 用于设置返回按钮的字体大小。
  - font-weight: bold 用于设置返回按钮的字体加粗。
  - cursor: pointer 用于设置返回按钮的鼠标指针样式。
- .title 类：
  - font-size: 18px 用于设置标题的字体大小。
  - font-weight: bold 用于设置标题的字体加粗。
- .avatar 类：
  - width: 32px 和 height: 32px 用于设置头像的尺寸。
  - border-radius: 50% 用于将头像设置为圆形。
  - background-color: #fff 用于设置头像的背景颜色。
  - color: #32DF72 用于设置头像的文本颜色。
  - display: flex 用于使用弹性盒子布局。
  - align-items: center 用于垂直居中对齐头像中的文字。
  - justify-content: center 用于水平居中对齐头像中的文字。
  - font-size: 16px 用于设置头像的字体大小。
  - font-weight: bold 用于设置头像的字体加粗。
  - cursor: pointer 用于设置头像的鼠标指针样式。
- .chat-container 类：
  - margin-top: 60px 用于在顶部导航栏下方留出空间。
  - padding: 20px 用于设置聊天记录区域的内边距。
  - display: flex 用于使用弹性盒子布局。
  - flex-direction: column 用于将聊天记录区域中的元素垂直排列。
  - gap: 10px 用于设置聊天消息之间的间距。
- .message 类：
  - max-width: 70% 用于设置聊天消息的最大宽度。
  - padding: 10px 用于设置聊天消息的内边距。
  - border-radius: 10px 用于设置聊天消息的圆角边框。
  - font-size: 16px 用于设置聊天消息的字体大小。
  - line-height: 1.4 用于设置聊天消息的行高。
- .message.left 类：
  - background-color: #fff 用于设置对方聊天消息的背景颜色。
  - align-self: flex-start 用于将对方聊天消息左对齐。
  - border: 1px solid #ddd 用于设置对方聊天消息的边框，增加边界感。
- .message.right 类：
  - background-color: #32DF72 用于设置自己聊天消息的背景颜色。
  - color: #fff 用于设置自己聊天消息的文本颜色。
  - align-self: flex-end 用于将自己聊天消息右对齐。
- .input-area 类：
  - position: fixed 用于将底部输入框和发送按钮固定在页面底部。
  - bottom: 0 和 left: 0 用于将底部输入框和发送按钮定位在页面左下角。
  - width: 100% 用于设置底部输入框和发送按钮的宽度为整个页面宽度。
  - height: 60px 用于设置底部输入框和发送按钮的高度。
  - background-color: #fff 用于设置底部输入框和发送按钮的背景颜色。
  - display: flex 用于使用弹性盒子布局。
  - align-items: center 用于垂直居中对齐底部输入框和发送按钮中的元素。
  - justify-content: space-between 用于在底部输入框和发送按钮中均匀分布元素。
  - padding: 0 20px 用于设置底部输入框和发送按钮的内边距。
  - box-sizing: border-box 用于使用怪异盒模型，使 width 和 height 包括内边距和边框。
  - border-top: 1px solid #ddd 用于设置底部输入框和发送按钮的上边框。
- .input-area input 类：
  - flex: 1 用于使输入框占据剩余的空间。
  - height: 40px 用于设置输入框的高度。
  - padding: 0 10px 用于设置输入框的内边距。
  - border: 1px solid #ddd 用于设置输入框的边框。
  - border-radius: 5px 用于设置输入框的圆角边框。
  - outline: none 用于移除输入框的默认轮廓。
- .input-area button 类：
  - height: 40px 用于设置发送按钮的高度。
  - padding: 0 20px 用于设置发送按钮的内边距。
  - margin-left: 10px 用于设置发送按钮的左边距。
  - background-color: #32DF72 用于设置发送按钮的背景颜色。
  - color: #fff 用于设置发送按钮的文本颜色。
  - border: none 用于移除发送按钮的边框。
  - border-radius: 5px 用于设置发送按钮的圆角边框。
  - cursor: pointer 用于设置发送按钮的鼠标指针样式。

总结

通过使用自适应布局和 overflow: hidden; 属性，我们可以轻松实现一个手机微信聊天页面。这个布局包含一个固定定位的顶部导航栏、聊天记录区域和固定定位的底部输入框和发送按钮。掌握这些布局技巧，可以帮助你创建各种复杂的页面布局。

目录

浮动属性

1. position 属性

2. top、right、bottom、left 属性

3. z-index 属性

4. clip 属性（已废弃）

5. clip-path 属性

6. transform 属性

7. overflow 属性

8. visibility 属性

9. float 属性

10. clear 属性

示例

总结

定位属性

1. position 属性

2. top、right、bottom、left 属性

3. z-index 属性

4. clip 属性（已废弃）

5. clip-path 属性

6. transform 属性

7. overflow 属性

8. visibility 属性

9. float 属性

10. clear 属性

示例

总结

Display属性

CSS display 属性

display 属性的常见取值

场景 Demo

HTML 结构

解释

总结

标准盒子模型 和 怪异盒子模型

标准盒模型（Standard Box Model）和怪异盒模型（Quirks Mode Box Model）

1. 标准盒模型（Standard Box Model）

计算公式：

示例：

2. 怪异盒模型（Quirks Mode Box Model）

计算公式：

示例：

3. 如何选择盒模型

示例：

总结

边框圆角

圆角边框（Border Radius）

border-radius 属性

单值语法

双值语法

三值语法

四值语法

单独设置每个角的半径

示例代码

解释

总结

阴影

CSS 阴影（Box Shadow 和 Text Shadow）

box-shadow 属性

语法

示例

text-shadow 属性

语法

示例

场景页面示例

解释

总结

线性渐变

CSS 线性渐变（Linear Gradient）

linear-gradient 语法

示例

原生 Demo

解释

总结

径向渐变

CSS 线性渐变（Linear Gradient）

linear-gradient 语法

示例

原生 Demo

解释

1. `position` 属性

2. `top`、`right`、`bottom`、`left` 属性

3. `z-index` 属性

4. `clip` 属性（已废弃）

5. `clip-path` 属性

6. `transform` 属性

7. `overflow` 属性

8. `visibility` 属性

9. `float` 属性

10. `clear` 属性

1. `position` 属性

2. `top`、`right`、`bottom`、`left` 属性

3. `z-index` 属性

4. `clip` 属性（已废弃）

5. `clip-path` 属性

6. `transform` 属性

7. `overflow` 属性

8. `visibility` 属性

9. `float` 属性

10. `clear` 属性

CSS `display` 属性

`display` 属性的常见取值

标准盒子模型和怪异盒子模型

`border-radius` 属性

`box-shadow` 属性

`text-shadow` 属性

`linear-gradient` 语法

`linear-gradient` 语法