CSS图文详解( 超详细，零基础友好）——上篇:CSS基本概念及样式基础

最新推荐文章于 2025-02-24 16:23:13 发布

清清ww

最新推荐文章于 2025-02-24 16:23:13 发布

阅读量2.6k

点赞数 48

分类专栏： css/less 文章标签： css 前端

本文链接：https://blog.csdn.net/m0_59873661/article/details/143631730

版权

css/less 专栏收录该内容

3 篇文章

订阅专栏

💯 欢迎光临清清ww的博客小天地💯

🔥 个人主页:【清清ww】🔥

📚 系列专栏:vue3 | TypeScript 📚

🌟 学习本无底，前进莫徬徨。🌟

目录

引言

开始学习！

一.CSS的基本概念和作用

二.在HTML文档中引入CSS

（1）内联样式

（2）内部样式表

（3）外部样式表

三.CSS语法规则

1.选择器

（1）常见的选择器

1.元素选择器

2. 类选择器

3. ID选择器

4. 属性选择器

5. 伪类选择器

6. 伪元素选择器

7. 组合选择器

8. 分层选择器

（2）选择器优先级

（3）属性选择器的使用

（4）伪类选择器的使用

2.属性

（1）文本属性

1.font-family: 设置字体类型

2.font-size: 设置字体大小

3.font-weight: 设置字体粗细。

4.color: 设置文本颜色。

5.text-align: 设置文本对齐方式。

6.line-height: 设置行高。

（2）盒模型属性

1.width: 设置元素的宽度。

2.height: 设置元素的高度。

3.padding: 设置元素的内边距。

4.margin: 设置元素的外边距。

5.border: 设置元素的边框。

6.box-sizing：定义盒模型的类型。

（3）背景属性

1.background-color: 设置元素的背景颜色。

2.background-image: 设置元素的背景图像。

3.background-repeat: 设置背景图像的重复方式。

4.background-position: 设置背景图像的位置。

（4）布局属性

1.display: 设置元素的显示类型。

2.float: 设置元素的浮动位置。

3.position: 设置元素的定位方式。

4.top, right, bottom, left: 设置定位元素的位置。

5.flex-direction: 在Flexbox布局中设置主轴的方向。

（5）动画和过渡属性

1.transition: 设置元素的过渡效果。

2.animation: 设置元素的动画效果。

（6）其他属性

1.opacity: 设置元素的透明度。

2.cursor: 设置鼠标光标样式。

3.overflow: 设置内容溢出时的行为。

引言

HTML、CSS和JavaScript是网页设计的基础三件套，HTML负责结构，JavaScript负责逻辑，CSS负责样式。

CSS是Cascading Style Sheets的缩写，它是网页设计不可或缺的一部分。不仅让网页看起来更加美观，还提供了强大的布局控制能力。

本文将用最简单易懂的语言，生动形象的插图，简单易懂的例子带你无痛学习CSS，并在文末附上一个案例供大家练手。

开始学习！

一.CSS的基本概念和作用

CSS又称层叠样式表，是一种样式表语言，用于描述HTML或XML文档的外观和格式。

层叠：当多个样式规则应用于同一个元素时，这些规则的优先级和合并方式。

样式表：一系列样式规则的集合

有了CSS,就可以

美化网页：设置字体、颜色、背景、边框等
控制布局：精确控制元素的位置和大小，实现复杂的页面布局。
响应式设计：根据不同设备和屏幕尺寸自适应显示。
代码复用：样式表可以应用于多个页面。

二.在HTML文档中引入CSS

接下来我们看看如何在HTML文档中应用这些样式。一般有三种引入方法：内联样式、内部样式表、外部样式表。

先给出基础的HTML结构：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
  
        </style>
    </head>

    <body>

        <p>这是一段文字。</p>

    </body>
</html>

（1）内联样式

内联样式是直接在HTML元素中使用 style 属性来定义样式。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

<p style="color: red; font-size: 16px;">这是一段红色的文字。</p>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

虽然内联样式简单直接，但它们不易于维护，不建议大量使用。

（2）内部样式表

内部样式表是将CSS代码放在HTML文档的 <head> 部分中的 <style> 标签内。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

这种方式适用于单个页面的样式定义，但样式仍然不能跨页面复用。

（3）外部样式表

外部样式表是将CSS代码保存在一个单独的 .css 文件中，然后通过 <link> 标签在HTML文档中引入。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

推荐使用这种方式，它允许多个页面之间共享样式，维护和更新更容易。

三.CSS语法规则

CSS的语法规则相对简单，由选择器、属性和值组成。

1.选择器

选择器用于指定要样式化的HTML元素。简单来说，选择器的作用就是“指出”我们要对网页上的哪些部分进行操作。

（1）常见的选择器

1.元素选择器

根据元素的名称来选择HTML元素。

p {
  color: blue;
}

上面的选择器将选择所有的<p>元素，并将它们的文本颜色设置为蓝色。

2. 类选择器

通过元素的class属性值来选择元素。类选择器前面有一个点（ .）。

.error {
  color: red;
}

这个选择器将选择所有具有error类的元素，并将它们的文本颜色设置为红色。

3. ID选择器

通过元素的id属性值来选择元素。ID选择器前面有一个井号（#）。

#main-content {
  font-size: 16px;
}

这个选择器将选择 ID 为main-content的元素，并将其字体大小设置为16像素。

4. 属性选择器

根据元素的属性及其值来选择元素。它们以方括号（[]）表示。

input[type="text"] {
  width: 150px;
}

这个选择器将选择所有type属性值为text的<input>元素，并将其宽度设置为150像素。

5. 伪类选择器

用于选择处于特定状态的元素。它们以冒号（:）开头。

a:hover {
  text-decoration: underline;
}

这个选择器将选择所有鼠标悬停状态的<a>元素，并在其下添加下划线。

6. 伪元素选择器

用于选择元素的特定部分。它们以双冒号（::）开头，但有时也可以使用单冒号（:）。

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

这个选择器将选择所有<p>元素的第一行文本，并将其字体加粗。

7. 组合选择器

用于选择满足多个条件的元素。以下是一些常用的组合选择器：

后代选择器（空格）

div p {
  margin: 10px;
}

选择所有<div>元素内的<p>元素。

子选择器（>）

div > p {
  margin: 10px;
}

选择所有作为<div>元素直接子元素的<p>元素。

相邻兄弟选择器（+）

h2 + p {
  font-size: 20px;
}

选择紧接在<h2>元素后的<p>元素。

通用兄弟选择器（~）

h2 ~ p {
  font-size: 20px;
}

选择所有在<h2>元素之后的<p>元素。

8. 分层选择器

允许你根据文档结构进行选择。

body div p {
  color: green;
}

这个选择器将选择所有在<body>元素内的<div>元素内的<p>元素，并将它们的文本颜色设置为绿色。

（2）选择器优先级

优先级就是，当多个规则应用于同一个元素时，怎么确定应用哪些样式规则。

浏览器会根据以下规则来确定优先级：

!important > 内联样式 > ID选择器 > 类选择器、属性选择器和伪类选择器 > 元素选择器和伪元素选择器 > 通配符选择器（*），关系选择器（如后代选择器、子选择器、相邻兄弟选择器等），以及从父元素继承的样式

强调几点：

优先级高的样式会覆盖优先级低的样式。
如果两个选择器具有相同的优先级，则后面的样式会覆盖前面的样式。
使用!important声明可以覆盖所有其他优先级，但不推荐使用，因为后续调试困难。

（3）属性选择器的使用

属性选择器可以根据元素的属性及其值来选择元素。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
  /* 选择具有 "data-role" 属性的所有元素 */
  [data-role] {
    font-weight: bold;
  }

  /* 选择具有 "data-role" 属性且值为 "banner" 的元素 */
  [data-role="banner"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
  }

  /* 选择属性值包含 "navigation" 的元素（词汇以空格分隔） */
  [data-role~="navigation"] {
    background-color: #333;
    color: white;
  }

  /* 选择属性值以 "profile-" 开头的元素 */
  [data-role|="profile-"] {
    border: 2px solid #009688;
    padding: 5px;
  }

  /* 选择属性值以 "info" 开头的元素 */
  [data-role^="info"] {
    background-color: #FFC107;
    color: black;
  }

  /* 选择属性值以 "-footer" 结尾的元素 */
  [data-role$="-footer"] {
    background-color: #607D8B;
    color: white;
    text-align: center;
  }

  /* 选择属性值包含 "side" 的元素 */
  [data-role*="side"] {
    float: left;
    width: 20%;
    background-color: #E91E63;
    color: white;
    padding: 15px;
  }
</style>
</head>
<body>

<div data-role="banner">具有 "data-role" 属性且值为 "banner"</div>
<nav data-role="navigation">属性值包含 "navigation"（词汇以空格分隔）</nav>
<section data-role="profile-user">属性值以 "profile-" 开头</section>
<article data-role="info-news">属性值以 "info" 开头</article>
<div data-role="side-nav">属性值包含 "side"</div>
<footer data-role="main-footer">属性值以 "-footer" 结尾</footer>

</body>
</html>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

（4）伪类选择器的使用

:link - 选择未被访问的链接。

:visited - 选择已被访问的链接。

:hover - 选择鼠标悬停的元素。

:active - 选择被激活的元素（如鼠标按下时的链接）。

:focus - 选择获得焦点的元素（如输入框）。

:first-child - 选择其父元素的第一个子元素。

:last-child - 选择其父元素的最后一个子元素。

:nth-child(n) - 选择其父元素的第n个子元素。

:nth-last-child(n) - 选择其父元素的倒数第n个子元素。

:not(selector) - 选择不符合指定选择器的元素。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
  /* 选择未被访问的链接 */
  a:link {
    color: blue;
    text-decoration: none;
  }

  /* 选择已被访问的链接 */
  a:visited {
    color: purple;
  }

  /* 选择鼠标悬停的元素 */
  a:hover {
    text-decoration: underline;
  }

  /* 选择被激活的元素（如鼠标按下时的链接） */
  a:active {
    color: red;
  }

  /* 选择获得焦点的元素（如输入框） */
  input:focus {
    background-color: #FFFF99;
  }

  /* 选择其父元素的第一个子元素 */
  li:first-child {
    font-weight: bold;
  }

  /* 选择其父元素的最后一个子元素 */
  li:last-child {
    font-style: italic;
  }

  /* 选择其父元素的第2个子元素 */
  li:nth-child(2) {
    color: green;
  }

  /* 选择其父元素的倒数第2个子元素 */
  li:nth-last-child(2) {
    text-decoration: line-through;
  }

  /* 选择不符合指定选择器的元素 */
  :not(p) {
    margin: 0;
  }
</style>
</head>
<body>

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
</ul>

<a href="https://csdn.com">这是一个链接</a>
<input type="text" placeholder="Focus on me">

<p>这段文字不会受到 :not(p) 选择器的影响。</p>

<div>这个div将会受到:not(p)选择器的影响。</div>

</body>
</html>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

2.属性

属性是要修改的样式特征，例如：

color：文本颜色。
font-size：字体大小。
margin：元素的外边距。

🎈🎈阅读建议🎈🎈

初学者可以先从颜色、字体和背景等基础属性开始。等到掌握了这些简单属性，并且学习了后续的课程内容后，再来深入理解盒模型和浮动相关的属性。这样分阶段的学习会更加有序和高效。

这里给出一些常见的CSS属性及其基本用法：

（1）文本属性

`1.font-family`: 设置字体类型

告诉浏览器使用哪种字体来显示文本。可以为一个元素指定多个字体，用逗号分隔。如果第一个字体不可用，浏览器会尝试下一个字体。例如：

font-family: 'Arial', 'Helvetica', sans-serif;

// 如果Arial字体不可用，浏览器会尝试使用Helvetica，如果Helvetica也不可用，就会使用默认的无衬线字体。

2.`font-size`: 设置字体大小

字体大小可以用多种单位设置，包括：

px（像素）：如 font-size: 16px;
em：相对于父元素的字体大小，如 font-size: 1.2em;
rem：相对于根元素（html）的字体大小，如 font-size: 1rem;
%：相对于父元素的字体大小，如 font-size: 100%;
pt（点）：如 font-size: 12pt;

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
  body {
    font-size: 16px; /* 设置根元素的字体大小为16px */
  }
  .px-font-size {
    font-size: 16px; /* 使用像素单位 */
  }
  .em-font-size {
    font-size: 1.2em; /* 使用em单位，相对于父元素 */
  }
  .rem-font-size {
    font-size: 1rem; /* 使用rem单位，相对于根元素 */
  }
  .percent-font-size {
    font-size: 100%; /* 使用百分比单位，相对于父元素 */
  }
  .pt-font-size {
    font-size: 12pt; /* 使用点单位 */
  }
</style>
</head>
<body>

<p class="px-font-size">这是使用像素单位设置的字体大小：16px。</p>
<p class="em-font-size">这是使用em单位设置的字体大小：1.2em（依赖于父元素的字体大小）。</p>
<p class="rem-font-size">这是使用rem单位设置的字体大小：1rem（相对于根元素的字体大小）。</p>
<p class="percent-font-size">这是使用百分比单位设置的字体大小：100%（依赖于父元素的字体大小）。</p>
<p class="pt-font-size">这是使用点单位设置的字体大小：12pt。</p>

</body>
</html>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

3.`font-weight`: 设置字体粗细。

它的值可以是关键字值：normal（正常，默认值）、bold（粗体）、bolder（更粗）、lighter（更细）。

也可以是数值：100、200、300、400、500、600、700、800、900，一般情况下400等同于normal，而700等同于bold。

注意bolder 和 lighter 是相对值，它们会相对于继承的字体粗细进行增减。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<style>
h1 {
  font-weight: bold; /* 设置标题为粗体 */
}

p {
  font-weight: normal; /* 设置段落为正常粗细 */
}

strong {
  font-weight: 600; /* 设置强调文本为较粗的字体 */
}

</style>
</head>

<body>

<h1>嗨！我是标题</h1>
<p>我是一个段落。我为正常粗细</p>
<strong>我是一个段落。我是加粗过的</strong>

</body>
</html>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

`4.color`: 设置文本颜色。

颜色有多种表达方式，除了直接使用颜色名称外，还可以使用十六进制、RGB、RGBA、HSL、HSLA等。这里的" A "指的是透明度。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
  .named-color {
    color: red; /* 颜色名称表示红色 */
  }
  .hex-color {
    color: #ff0000; /* 十六进制表示红色 */
  }
  .rgb-color {
    color: rgb(255, 0, 0); /* RGB表示红色 */
  }
  .rgba-color {
    color: rgba(255, 0, 0, 0.5); /* RGBA表示半透明红色 */
  }
  .hsl-color {
    color: hsl(0, 100%, 50%); /* HSL表示红色 */
  }
  .hsla-color {
    color: hsla(0, 100%, 50%, 0.5); /* HSLA表示半透明红色 */
  }

</style>
</head>
<body>

<p class="hex-color">这是使用十六进制颜色值的红色文本。</p>
<p class="rgb-color">这是使用RGB颜色值的红色文本。</p>
<p class="rgba-color">这是使用RGBA颜色值的半透明红色文本。</p>
<p class="hsl-color">这是使用HSL颜色值的红色文本。</p>
<p class="hsla-color">这是使用HSLA颜色值的半透明红色文本。</p>
<p class="named-color">这是使用颜色名称的红色文本。</p>

</body>
</html>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

5.`text-align`: 设置文本对齐方式。

用于设置块级元素内文本内容的水平对齐方式。

属性值包括：left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）、start（根据文本方向进行对齐，通常是左对齐）和 end（根据文本方向进行对齐，通常是右对齐）。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
  p {
    text-align: left; /* 文本左对齐 */
  }

  h1, h2 {
    text-align: right; /* 文本右对齐 */
  }

  .center {
    text-align: center; /* 文本居中对齐 */
  }

  .justify {
    text-align: justify; /* 文本两端对齐 */
  }
</style>
<title>Text Align Example</title>
</head>
<body>

<p>这是一个左对齐的段落。</p>
<h1>这是一个右对齐的标题</h1>
<p class="center">这是一个居中对齐的段落。</p>
<h2>这也是一个右对齐的标题</h2>
<p class="justify">这是一个两端对齐的段落。这是一个两端对齐的段落。这是一个两端对齐的段落。这是一个两端对齐的段落。这是一个两端对齐的段落。</p>

</body>
</html>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

注意：为了保持可读性，大多数现代浏览器默认不会对齐最后一行文本，也就是即使指定了justify，最后一行通常仍然是左对齐。

6.`line-height`: 设置行高。

行高有四种类型的值：

正常值 (normal): 默认值，通常大约是1.2倍字体大小。
数值 (number): 表示字体大小的倍数，例如，如果字体大小是16px，设置line-height: 1.5;将得到24px的行高。
长度 (length): 具体的长度值，如px, em, rem等。
百分比 (%): 基于当前字体大小的百分比。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Line Height Example</title>
<style>
  .normal-line-height {
    font-size: 16px;
    line-height: normal; /* 默认行高 */
  }
  
  .fixed-line-height {
    font-size: 16px;
    line-height: 80px; /* 固定行高80px */
  }
  
  .relative-line-height {
    font-size: 16px;
    line-height: 2; /* 相对于字体大小的1.5倍 */
  }

</style>
</head>
<body>
<p>...................</p>
<p class="normal-line-height">这段文字使用默认的行高(normal)，通常是字体大小的1.2倍。</p>
<p>...................</p>
<p class="fixed-line-height">这段文字使用固定的行高80px，不受字体大小影响。</p>
<p>...................</p>
<p class="relative-line-height">这段文字使用相对的行高2倍，行高会随着字体大小变化。</p>
<p>...................</p>
</body>
</html>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

（2）盒模型属性

`1.width`: 设置元素的宽度。

width: 100px;

2.`height`: 设置元素的高度。

height: 200px;

3.`padding`: 设置元素的内边距。

padding: 10px;

4.`margin`: 设置元素的外边距。

margin: 20px;

5.`border`: 设置元素的边框。

border: 1px solid #000; /* 1px宽的实线边框，黑色 */

6.`box-sizing`：定义盒模型的类型。

这个属性有两个值：content-box （默认值）和 border-box。

分别对应着两种盒模型：标准盒模型、怪异盒模型（IE盒模型）。

标准盒模型

标准盒模型的 width和 height 属性仅应用于内容区域。

怪异盒模型

怪异盒模型的 width和 height 指的是除去外边距后的宽度,包括内容 + 内边距 + 边框。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
  .standard-box {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 10px solid blue;
    margin: 20px;
    background-color: lightblue;
    box-sizing: content-box; /* 标准盒模型 */
  }

  .quirks-box {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 10px solid red;
    margin: 20px;
    background-color: lightcoral;
    box-sizing: border-box; /* 怪异盒模型 */
  }
</style>
</head>
<body>

<div class="standard-box">标准盒模型 (content-box)</div>
<div class="quirks-box">怪异盒模型 (border-box)</div>

</body>
</html>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

可以看出，虽然它们的 width 和 height 属性相同，但由于 box-sizing 的不同，它们在页面上的实际占用空间是不同的。

（3）背景属性

`1.background-color`: 设置元素的背景颜色。

background-color: #f0f0f0; /* 浅灰色 */

2.`background-image`: 设置元素的背景图像。

background-image: url('background.jpg');

3.`background-repeat`: 设置背景图像的重复方式。

有六种重复方式：repeat（默认值）、repeat-x、repeat-y、no-repret、round、space。

repeat：背景图像将在水平和垂直方向上重复。
repeat-x：在水平方向上重复。
repeat-y：在垂直方向上重复。
no-repeat：不重复。
round：背景图像将以其原始比例在水平和垂直方向上重复，直到填满整个容器。
space：背景图像将以其原始比例在水平和垂直方向上重复，但会保持一定的间距。

4.`background-position`: 设置背景图像的位置。

该属性可以接受关键字、百分比和长度等值。

关键字：top left 表示背景图像位于元素的左上角。

background-position: top left ;

百分比：50% 50% 表示背景图像的中心点与元素的中心点对齐。
长度值：10px 20px 表示背景图像的左上角距离元素左边界10px，上边界20px。

（4）布局属性

`1.display`: 设置元素的显示类型。

属性	效果	属性	效果
none	元素不会显示，并且不会占据布局空间。它会被从渲染树中移除，不会影响布局。	block	元素会被显示为块级元素。它会开始新的一行，并且占据可用的全部宽度。可以设置宽度和高度。
inline	元素会被显示为内联元素。它不会开始新的一行，宽度由内容决定。不能设置宽度和高度。	inline-block	元素会被显示为内联块级元素。它不会开始新的一行，但可以设置宽度和高度。可以在一行内与其他元素并列显示。常用于需要内联布局但需要控制尺寸的元素。
list-item	元素会被显示为列表项。通常与 `<ul>`, `<ol>` 和 `<li>` 元素一起使用。	table	元素会被显示为表格。表格布局可以用来创建复杂的多列布局。
table-cell	元素会被显示为表格单元格。可以用来对齐内容，就像在表格中一样。	flex	元素会被显示为弹性容器。子元素可以使用弹性盒模型进行布局。
grid	元素会被显示为网格容器。子元素可以使用 CSS 网格布局进行布局。	inherit	元素继承其父元素的 `display` 值。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
  .block {
    display: block;
    width: 100px;
    height: 100px;
    background-color: red;
    margin-bottom: 10px;
  }

  .inline {
    display: inline;
    background-color: blue;
    padding: 10px;
  }

  .inline-block {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: green;
    margin-right: 10px;
  }

  .flex-container {
    display: flex;
    background-color: purple;
    padding: 10px;
  }

  .flex-item {
    background-color: yellow;
    margin-right: 10px;
    padding: 10px;
  }
</style>
</head>
<body>

<div class="block">Block 块级元素</div>
<div class="block">Block 块级元素</div>

<div class="inline">Inline 内联元素</div>
<div class="inline">Inline 内敛元素</div>

<div class="inline-block">Inline-Block 内联块级元素</div>
<div class="inline-block">Inline-Block 内联块级元素</div>

<div class="flex-container">
  <div class="flex-item">Flex Item 1</div>
  <div class="flex-item">Flex Item 2</div>
</div>

</body>
</html>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

2.`float`: 设置元素的浮动位置。

有三个值：none（默认值，元素不浮动，按照正常文档流进行定位。）、left（左浮动）、right（右浮动）。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float Property Example</title>
<style>
  .container {
    border: 1px solid #000;
    padding: 10px;
  }

  .float-left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
    margin-right: 10px;
  }

  .float-right {
    float: right;
    width: 100px;
    height: 100px;
    background-color: green;
    margin-left: 10px;
  }

  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
</style>
</head>
<body>

<div class="container clearfix">
  <div class="float-left">左浮动</div>
  <div class="float-right">右浮动</div>
  <p>一段文字。一段文字。一段文字。一段文字。一段文字。一段文字。一段文字。一段文字。</p>
</div>

</body>
</html>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

注意：浮动元素会影响其后的兄弟元素的位置，这些元素会围绕浮动元素流动。

清除浮动

为了防止浮动元素导致父元素高度塌陷，可以使用以下方法来清除浮动：

1.使用 clear 属性：

clear: left;不允许左侧有浮动元素。clear: right;不允许右侧有浮动元素。clear: both;不允许左右两侧有浮动元素。

2.添加伪元素：

在父元素的最后添加一个伪元素，并使用 clear: both; 来清除浮动。
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
3.使用 overflow 属性：

在父元素上设置 overflow: auto; 或 overflow: hidden; 可以触发 BFC（块级格式化上下文），从而包含浮动元素。

3.`position`: 设置元素的定位方式。

用于控制元素在页面上的位置。它有以下几个常用值：

static：默认值，元素按照正常文档流定位，无法使用 top、right、bottom、left 属性。
relative：元素相对于其正常位置偏移，但不脱离文档流。
absolute：元素脱离文档流，相对于最近的已定位祖先元素定位，如果没有则相对于 <html>。
fixed：元素脱离文档流，相对于浏览器窗口定位，即使页面滚动也不会移动。
sticky：元素在滚动到特定阈值前表现为相对定位，达到阈值后固定在指定位置。

使用 position 属性可以创建复杂的页面布局，如固定导航栏、弹出层等。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
  .container {
    position: relative; /* 设置相对定位，作为参照物 */
    width: 300px;
    height: 300px;
    background-color: lightgreen;
  }

  .box {
    position: absolute; /* 设置绝对定位，相对于最近的已定位祖先元素 */
    top: 50px; /* 距离顶部50px */
    left: 50px; /* 距离左侧50px */
    width: 100px;
    height: 100px;
    background-color: green;
  }
</style>
</head>
<body>

<div class="container">
  <div class="box"></div>
</div>

</body>
</html>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

4.`top`, `right`, `bottom`, `left`: 设置定位元素的位置。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positioning Example</title>
<style>
  .container {
    position: relative; /* 相对定位，作为绝对定位元素的参照物 */
    width: 300px;
    height: 300px;
    background-color: lightgray;
    margin: 20px;
    padding: 20px;
    border: 2px solid black;
  }

  .box {
    position: absolute; /* 绝对定位，相对于最近的已定位祖先元素 */
    top: 20px; /* 距离顶部20px */
    right: 20px; /* 距离右侧20px */
    bottom: 20px; /* 距离底部20px */
    left: 20px; /* 距离左侧20px */
    background-color: tomato;
  }
</style>
</head>
<body>

<div class="container">
  <div class="box">一段文本。一段文本。</div>
</div>

</body>
</html>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

5.`flex-direction`: 在Flexbox布局中设置主轴的方向。

可以有以下四个值：

row（默认值）：Flex 项目从左到右排列，类似于内联元素。
row-reverse：Flex 项目从右到左排列。
column：Flex 项目从上到下排列。
column-reverse：Flex 项目从下到上排列。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
  .flex-container {
    display: flex; /* 开启 Flexbox 布局 */
    background-color: lightgray;
    padding: 10px;
    width: 300px;
    height: 200px;
  }

  .flex-item {
    background-color: tomato;
    width: 50px;
    height: 50px;
    margin: 10px;
    text-align: center;
    line-height: 50px; /* 使文字垂直居中 */
    color: white;
  }

  /* 设置不同的 flex-direction 属性 */
  .row {
    flex-direction: row;
  }

  .row-reverse {
    flex-direction: row-reverse;
  }

  .column {
    flex-direction: column;
  }

  .column-reverse {
    flex-direction: column-reverse;
  }
</style>
</head>
<body>

<div class="flex-container row">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<div class="flex-container row-reverse">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<div class="flex-container column">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<div class="flex-container column-reverse">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

</body>
</html>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

（5）动画和过渡属性

`1.transition`: 设置元素的过渡效果。

用于在指定的时间内平滑地改变元素的某个或某些属性值，从而创建动画效果。可以接受以下值：

transition-property：指定应用过渡效果的 CSS 属性名称。
transition-duration：过渡效果持续的时间。
transition-timing-function：过渡效果的时间曲线，例如 linear、ease、ease-in、ease-out、ease-in-out 等。
transition-delay：过渡效果开始前的延迟时间。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

让方块的大小和颜色逐渐变化。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 20px;
    transition: width 2s, height 2s, background-color 2s; /* 设置过渡效果 */
  }

  .box:hover {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

2.`animation`: 设置元素的动画效果。

该功能允许我们不依赖JavaScript的情况下创建动画效果，这里给出一些关键子属性（需要配合@keyframes使用）：

animation-name: 指定要绑定到选择器的关键帧的名称。
animation-duration: 动画完成一个周期所花费的时间。
animation-timing-function: 动画的速度曲线。
animation-delay: 动画在开始前等待的时间。
animation-iteration-count: 动画应该播放的次数。
animation-direction: 动画是否应该轮流反向播放。
animation-fill-mode: 设置CSS样式值在动画执行前后如何应用到目标元素。
animation-play-state: 允许暂停和播放动画。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

让一个方块在页面上从左向右移动，并且当它到达右边时返回到左边，如此循环。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
    // 定义关键帧
	@keyframes moveRightToLeft {
	  0% {
		transform: translateX(0);
	  }
	  50% {
		transform: translateX(100%);
	  }
	  100% {
		transform: translateX(0);
	  }
	}

    // 将这个动画应用到方块上
	.box {
	  width: 100px;
	  height: 100px;
	  background-color: green;
	  animation: moveRightToLeft 4s ease-in-out infinite alternate;
	}

</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

（6）其他属性

`1.opacity`: 设置元素的透明度。

属性的值是一个介于0.0（完全透明）和1.0（完全不透明）之间的数字。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

让元素在鼠标悬停时变得半透明。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
	.box {
	  width: 100px;
	  height: 100px;
	  background-color: green;
	}
	
	.box:hover {
		opacity: 0.5;/* 鼠标悬停时图片的透明度变为0.5 */
	}

</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

2.`cursor`: 设置鼠标光标样式。

该图片来自CSS鼠标样式（cursor）总结

3.`overflow`: 设置内容溢出时的行为。

属性可以取以下值：

visible：默认值，内容不会被剪裁，内容过多会呈现在框外。
hidden：内容会被剪裁，并且不会显示滚动条，溢出的内容将隐藏。
scroll：内容会被剪裁，无论内容是否真的溢出，浏览器都会显示滚动条。
auto：如果内容溢出，浏览器会显示滚动条；如果没有溢出，则不显示滚动条。

------------------------------------------------🍃🍃举个例子 🍃🍃----------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
	.box {
	  width: 200px;
	  height: 100px;
	  border: 1px solid #000;
	  margin-bottom: 20px;
	}

	.visible {
	  overflow: visible;
	}

	.hidden {
	  overflow: hidden;
	}

	.scroll {
	  overflow: scroll;
	}

	.auto {
	  overflow: auto;
	}



</style>
</head>
<body>

<div class="box visible">我是visible，内容会溢出框外。我是visible，内容会溢出框外。我是visible，内容会溢出框外。我是visible，内容会溢出框外。</div>
<div class="box hidden">我是hidden，内容溢出将被隐藏。我是hidden，内容溢出将被隐藏。我是hidden，内容溢出将被隐藏。我是hidden，内容溢出将被隐藏。</div>
<div class="box scroll">我是scroll，内容溢出时会有滚动条。我是scroll，内容溢出时会有滚动条。我是scroll，内容溢出时会有滚动条。我是scroll，内容溢出时会有滚动条。</div>
	<div class="box auto">我是auto，内容溢出时会有滚动条，不溢出不显示。现在没溢出所以不显示滚动条</div>
<div class="box auto">我是auto，内容溢出时会有滚动条，不溢出不显示。现在溢出了，所以要显示。现在溢出了，所以要显示。现在溢出了，所以要显示。现在溢出了，所以要显示。</div>

</body>
</html>

------------------------------------------------💻💻运行结果💻💻------------------------------------------------

今天的文章先到这里，下篇学习布局、定位的内容。

🚀感谢您的细心品读，完成了这篇关于CSS图文详解( 超详细，零基础友好）——上篇:CSS基本概念及样式基础 的旅程。 🚀

🎉 您的每一个鼓励都是我不断更新的动力，不要忘记点赞收藏🎉

🔍 期待与您一同深入前端技术的海洋，共同探索那些未知的宝藏，揭开Web开发的层层迷雾。🔍

🌟 🌈 感恩您的支持与同行，愿我们的前端征途越走越远！🌈 🌟