web安卓逆向之必学CSS基础知识

文章目录

CSS基础知识
- 一、CSS的介绍
- - 1. CSS 的定义
  - 2. CSS 的作用
  - 3. CSS 的基本语法
  - 4. 小结
- 二、css 的引入方式
- - 1. 行内式
  - - 语法格式：
    - 特点：
    - 适用场景：
  - 2. 内嵌式（内部样式）
  - - 语法格式：
    - 特点：
    - 适用场景：
  - 3. 外链式
  - - 语法格式：
    - 特点：
    - 适用场景：
  - 4. CSS引入方式选择
  - - 选择建议：
  - 5. 小结
- 三、css 选择器
- - 1. CSS 选择器的定义
  - 2. CSS 选择器的种类
  - - 标签选择器
    - 类选择器
    - 层级选择器（后代选择器）
    - ID 选择器
    - 组选择器
    - 伪类选择器
  - 3.小结
- 四、css 属性
- - 布局常用样式属性
  - 文本常用样式属性
  - 布局常用样式属性示例代码
  - 文本常用样式属性示例
  - 小结
- 五、css 元素溢出
- - 1. 什么是 CSS 元素溢出
  - 2. 示例代码
  - - **示例 1：`overflow: visible`**
    - **示例 2：`overflow: hidden;`**
    - **示例 3：`overflow: scroll;`**
    - **示例 4：`overflow: auto;`**
  - 3. 小结
- 六、css 显示特性
- - display 属性的使用
  - 常见 display 属性的使用示例
  - - 2.1 `block` 示例
    - 2.2 `inline` 示例
    - 2.3 `inline-block` 示例
    - 2.4 `none` 示例
    - 2.5 `flex` 示例
    - 2.6 `grid` 示例
  - 小结
- 七、盒子模型
- - 1. 盒子模型的介绍
  - 2. 盒子模型相关样式属性
  - - - （1）`width` 和 `height`
      - （2）`padding`
      - （3）`border`
      - （4）`margin`
      - （5）`box-sizing`
    - 3. 小结
  - 教学案例
  - - 案例1：创建一个盒子模型的简单示例
    - 案例2：使用`box-sizing`简化布局
- 八、作业

CSS基础知识

学习目标

能够知道css的作用
能够知道css的引入三种方式
能够说出css选择器的种类
能够知道常用的样式属性
能够说出元素溢出的解决办法
能够说出标签隐藏设置
能够知道盒子模型的各个属性

一、CSS的介绍

CSS（Cascading Style Sheets，层叠样式表）是用来控制网页外观和布局的一种语言。它可以为 HTML 文档提供样式支持，分离网页的内容与表现。通过 CSS，我们可以轻松控制网页的字体、颜色、间距、布局等视觉效果，从而提升用户的体验和网页的美观性。

1. CSS 的定义

CSS 是一种样式表语言，用于描述 HTML 或 XML 文档的表现。HTML 主要用于定义网页的结构，而 CSS 则用来定义网页的样式和布局。通过 CSS，开发者可以使多个页面共享相同的样式表，从而减少重复的样式定义并提高开发效率。

CSS的主要作用：

使网页的内容和表现分离，保持结构的简洁性和易读性。
提高页面的复用性与维护性，多个页面可以使用同一个样式文件。
控制网页的布局和样式，让网页在不同设备上显示时能适配不同的屏幕尺寸。

2. CSS 的作用

CSS 的作用主要体现在以下几个方面：

美化网页：通过修改颜色、字体、行间距、背景、边框等，使网页更加美观且具有吸引力。
布局控制：CSS 可以精准控制页面的布局，包括元素的排列、对齐、浮动、定位等，能够灵活地调整页面在不同设备上的展示效果。
响应式设计：CSS 可以配合媒体查询（Media Queries）实现响应式设计，使页面在不同的屏幕尺寸和分辨率下都能保持良好的用户体验。
提高可访问性：通过适当的样式，CSS 可以帮助网页实现更好的可访问性。例如，使用更高的对比度或更大的字体，以帮助视力不佳的用户更容易浏览网页内容。
动画与过渡效果：CSS 支持创建简单的动画和过渡效果，增强页面的交互性。

3. CSS 的基本语法

CSS 的基本语法由三个部分组成：选择器（Selector）、属性（Property）和属性值（Value）。CSS 规则的基本格式如下：

选择器 {属性: 属性值;
}

选择器：选择网页中需要应用样式的 HTML 元素。例如，p 选择器会选中所有 <p> 标签的段落。
属性：指定希望改变的样式特性。例如，color 属性用来设置文本的颜色。
属性值：给定的属性要应用的具体值。例如，color: red; 会将文本颜色设置为红色。

示例：

/* 设置所有段落文字为蓝色，字体大小为16px */
p {color: blue;font-size: 16px;
}/* 设置标题1的字体为粗体，颜色为黑色 */
h1 {font-weight: bold;color: black;
}/* 设置类名为“example”的元素背景为浅灰色 */
.example {background-color: lightgray;
}

常见选择器：

标签选择器:选中某一类型的所有 HTML 标签，如 p 选中所有段落。
```
p {color: red;
}
```
类选择器：通过 .选择类名对应的元素。
```
.example {background-color: yellow;
}
```
ID 选择器：通过 #选择 ID 属性值对应的元素。
```
#header {font-size: 24px;
}
```
组合选择器：组合多个选择器对多个元素应用相同的样式。
```
h1, h2, h3 {font-family: Arial, sans-serif;
}
```

4. 小结

通过以上内容，了解了 CSS 的定义、作用及基本语法。CSS 是构建美观、布局精良的网页必不可少的技术，它不仅能够让网页的视觉效果更吸引人，还能够提高开发效率与可维护性。在现代网页开发中，合理地运用 CSS 可以有效提升用户体验，并适应不同的设备和屏幕尺寸。

关键点回顾：

CSS 的定义：用于描述 HTML 文档的表现样式。
CSS 的作用：控制网页样式、布局，增强用户体验，实现响应式设计。
CSS 的基本语法：通过选择器、属性、属性值定义样式规则。
常见选择器：标签选择器、类选择器、ID 选择器及组合选择器。

二、css 的引入方式

在网页设计和开发过程中，CSS（层叠样式表）的引入方式决定了样式的管理方式以及其适用范围。根据使用场景的不同，CSS有三种主要的引入方式：行内式、内嵌式（内部样式）和外链式。每种方式都有其优点和缺点，接下来将详细介绍每种方式的使用方法以及适用场景。

1. 行内式

行内式是指将CSS样式直接写在HTML元素的style属性中，样式只应用于当前的单个元素。
这种方式适用于局部需要自定义样式的场景，但不适合大规模应用。

语法格式：

<p style="color: red; font-size: 20px;">这是行内样式的示例</p>

特点：

优点：简单、直接，适合快速测试或对单个元素进行样式调整。
缺点：样式分散在HTML文件中，不便于维护，代码冗余度较高，难以复用。

适用场景：

行内式适用于临时或单一元素的样式调整，特别是在不涉及大量样式管理时，比如需要针对某个特定元素快速修改样式的情况。

2. 内嵌式（内部样式）

内嵌式是将CSS样式写在HTML文档的<style>标签中，样式的作用范围仅限于当前的HTML页面。该方式可以对整个页面元素进行样式控制，但无法跨页面共享样式。

语法格式：

head><style>p {color: blue;font-size: 18px;}</style>
</head>
<body><p>这是内部样式的示例</p>
</body>

特点：

优点：样式集中管理，方便对整个页面进行统一样式控制，比行内式更易于维护。
缺点：无法跨页面共享样式，如果网站包含多个页面，需要在每个页面中重复定义相同的样式，导致维护困难。

适用场景：

适用于单页面的项目或临时性项目。在快速开发一个页面时，内嵌式可以提供一个较为简便的方式来管理样式。

3. 外链式

外链式是通过<link>标签将外部的CSS文件引入到HTML文档中。这种方式允许多个HTML页面共用同一个CSS文件，便于样式的统一管理和维护，是推荐的最佳实践。

语法格式：

<head><link rel="stylesheet" href="styles.css">
</head>
<body><p>这是外部样式的示例</p>
</body>

**外部CSS文件（styles.css）**的内容示例：

p {color: green;font-size: 16px;
}

特点：

优点：代码与样式分离，能够复用样式文件，实现多个页面共享，便于维护。修改外部CSS文件会立即影响到引用该文件的所有页面。
缺点：需要额外的HTTP请求加载CSS文件，可能导致页面加载时间增加。不过，可以通过优化（如合并文件、使用CDN等）来减小这个问题。

适用场景：

适用于大中型项目或需要对多个页面进行统一样式管理的场景。外链式能够确保样式的重用和易维护性，是专业网站开发中最常用的方式。

4. CSS引入方式选择

根据项目的复杂度和需求，选择合适的CSS引入方式非常重要。以下是几种选择建议：

行内式：适用于小规模、临时性项目或仅需对单个元素做快速修改。
内嵌式：适用于单页面项目或简单的网页，开发效率高，但难以跨页面共享样式。
外链式：推荐在大多数项目中使用，尤其是网站有多个页面时，外链式样式表提供了强大的可维护性和可扩展性。

选择建议：

如果你的页面非常简单，且只有一两个元素需要简单的样式调整，使用行内式。
如果你的页面较为复杂，但不会有多个页面引用相同样式，可以使用内嵌式。
如果你有多个页面，且希望保持样式的一致性和可维护性，外链式无疑是最佳选择。

5. 小结

CSS有三种主要的引入方式：行内式、内嵌式和外链式。每种方式都有各自的优点和缺点，具体选择取决于项目的规模、复杂度以及可维护性需求。

行内式简单快捷，但不适合大规模使用；
内嵌式集中管理样式，适合单页面项目；
外链式最为推荐，样式与HTML分离，便于复用和维护。

在实际开发中，开发者应根据项目的具体需求，权衡选择合适的引入方式，以确保代码的简洁性和可维护性。通常情况下，使用外链式CSS是最佳实践，尤其是在涉及多个页面的项目中。

三、css 选择器

CSS（Cascading Style Sheets，层叠样式表）选择器用于选择 HTML 文档中的元素，以便应用样式。通过不同的选择器，我们可以精准地选中页面中的特定元素，进而对其进行样式化处理。

1. CSS 选择器的定义

CSS 选择器是指根据特定规则来选择 HTML 元素并应用样式的机制。通过选择器，开发者可以对页面上的某些元素或一组元素设置样式，而不会影响到其他元素。选择器可以根据元素的标签名、类名、id 或者元素之间的层级关系来进行匹配。

基本语法：

selector {property: value;
}

其中 selector 是选择器，property 是 CSS 属性，value 是对应的值。例如：

p {color: red;
}

上述例子会使所有的 <p> 标签内的文本变为红色。

2. CSS 选择器的种类

CSS 提供了多种类型的选择器，常用的有以下几类：

标签选择器
类选择器
ID 选择器
层级选择器（后代选择器）
组选择器
伪类选择器

接下来我们详细介绍每种选择器。

标签选择器

标签选择器直接使用 HTML 元素的标签名称来选择页面中的元素。这是最简单的选择器类型。

示例：

p {font-size: 16px;
}

该选择器会将页面中的所有 <p> 标签的文本大小设置为 16px。

使用场景： 适用于对页面中所有相同类型的元素应用相同的样式，如对所有标题、段落、按钮等应用统一的样式。

类选择器

类选择器通过指定 HTML 元素的 class 属性值来选择元素。类选择器的选择器前面用一个点 . 来表示。

示例：

.red-text {color: red;
}

在 HTML 中，带有 class="red-text" 的所有元素都会被应用红色字体。

<p class="red-text">这是一段红色的文本。</p>
<span class="red-text">这也是红色文本。</span>

使用场景： 类选择器通常用于同一页面上多个不同标签之间的样式共享，便于保持样式一致性。

层级选择器（后代选择器）

层级选择器根据元素之间的父子或祖先后代关系来选择目标元素。最常用的形式是后代选择器，它允许你选择嵌套在某个元素内的子元素。

示例：

div p {color: blue;
}

此选择器会将所有位于 <div> 标签内的 <p> 元素的文本颜色设置为蓝色。

<div><p>这是蓝色文本。</p>
</div>
<p>这是默认颜色文本。</p>

使用场景： 层级选择器适用于选择某个容器内部的元素，确保样式仅作用于特定结构中的元素。

ID 选择器

ID 选择器用于选择具有特定 id 值的元素，id 值在 HTML 文档中是唯一的，ID 选择器的前面用井号 # 表示。

示例：

#main-title {font-size: 24px;
}

在 HTML 中，带有 id="main-title" 的元素会应用字体大小为 24px 的样式。

<h1 id="main-title">这是主标题</h1>

使用场景： ID 选择器用于选择唯一的元素，在一个页面中通常用于标识独特的结构部分，比如标题、主内容区域、导航栏等。

组选择器

组选择器用于对多个不同的选择器应用相同的样式。使用逗号 , 将多个选择器分隔开。

示例：

h1, h2, p {margin-bottom: 10px;
}

该选择器会对所有 <h1>、<h2> 和 <p> 元素应用相同的底部边距。

<h1>标题1</h1>
<h2>标题2</h2>
<p>段落</p>

使用场景： 组选择器可简化代码，减少重复的样式声明，适用于多个元素之间有相同样式需求的情况。

伪类选择器

伪类选择器用于选择某些特定状态下的元素，比如鼠标悬停、选中、访问过的链接等。伪类选择器使用冒号 : 表示。

常见的伪类：

:hover：选择当鼠标悬停在元素上时的状态。
:focus：选择元素被聚焦时的状态（如文本框被点击）。
:nth-child()：选择属于某个特定位置的子元素。

示例：

a:hover {color: green;
}

当鼠标悬停在链接元素 <a> 上时，文本颜色会变成绿色。

<a href="#">悬停查看颜色变化</a>

使用场景： 伪类选择器广泛用于实现交互样式和特殊状态下的样式变化，比如导航栏的悬停效果、按钮的按下效果等。

3.小结

CSS 选择器是网页样式设计的基础，通过灵活运用不同的选择器，可以高效、精准地对页面中的元素进行样式控制。对于初学者来说，掌握常见的选择器如标签选择器、类选择器和 ID 选择器是必不可少的技能。随着学习的深入，伪类选择器、层级选择器等的使用将会让你能够处理更复杂的页面布局和交互效果。

四、css 属性

CSS（Cascading Style Sheets，层叠样式表）是一种用来控制网页布局和样式的语言。通过CSS，可以将HTML元素按照不同的布局和样式展示出来。CSS有很多种属性可用于控制布局、文本、背景、边框等。

在本章中，我们将详细介绍布局常用样式属性和文本常用样式属性，并且提供相关示例代码帮助你理解。

布局常用样式属性

布局样式属性用于控制页面中元素的排布、定位、大小、边距、内边距等。常见的布局样式属性包括：

display: 用于设置元素的显示类型（块级、行内、弹性布局等）。
- display: block; 块级元素，独占一行。
- display: inline; 行内元素，与其他元素共享同一行。
- display: flex; 弹性布局，用于创建复杂的页面布局。
position: 控制元素的位置，可以定义为相对、绝对、固定等。
- position: static; 默认，正常文档流。
- position: relative; 相对于其正常位置偏移。
- position: absolute; 相对于最近的定位祖先元素。
- position: fixed; 相对于视口（屏幕）固定位置。
margin: 控制元素的外边距，用于分隔元素与其他元素的距离。
- margin: 20px; 为四个方向设置相同的外边距。
- margin-top, margin-right, margin-bottom, margin-left: 分别为不同方向设置外边距。
padding: 控制元素的内边距，用于分隔元素的内容与其边框之间的距离。
- padding: 10px; 为四个方向设置相同的内边距。
width 和 height: 定义元素的宽度和高度。
- width: 100px; 设置元素宽度为100像素。
- height: 200px; 设置元素高度为200像素。
float: 使元素左右浮动，常用于图片排版。
- float: left; 元素左浮动。
- float: right; 元素右浮动。

文本常用样式属性

文本样式属性用于控制文字的显示方式、字体、颜色、对齐方式等。常见的文本样式属性包括：

color: 设置文本颜色。
- color: #ff0000; 设置文本为红色。
font-size: 控制文本的大小。
- font-size: 16px; 设置字体大小为16像素。
font-family: 设置文本的字体类型。
- font-family: Arial, sans-serif; 设置为Arial字体，如果不支持则使用默认无衬线字体。
font-weight: 设置字体粗细。
- font-weight: bold; 设置为加粗文本。
text-align: 设置文本的对齐方式。
- text-align: center; 文本居中对齐。
- text-align: left; 文本左对齐。
line-height: 设置文本的行高，控制行与行之间的距离。
- line-height: 1.5; 设置为1.5倍的行高。
text-decoration: 控制文本的装饰效果，如下划线、删除线等。
- text-decoration: underline; 添加下划线。
- text-decoration: line-through; 添加删除线。
letter-spacing: 设置字母之间的间距。
- letter-spacing: 2px; 将字母间距设置为2像素。

布局常用样式属性示例代码

<!DOCTYPE html>
<html>
<head><style>/* 设置页面布局的CSS样式 */.container {display: flex;justify-content: space-between;}.item {width: 100px;height: 100px;margin: 10px;padding: 20px;background-color: #f0f0f0;border: 1px solid #000;}.item1 {position: relative;top: 20px;left: 20px;}.item2 {float: right;}</style>
</head>
<body><div class="container"><div class="item item1">P1</div><div class="item item2">P2</div></div>
</body>
</html>

在这个示例中：

display: flex 用于使父元素 .container 创建一个弹性布局，将子元素 item 均匀分布在页面上。
position: relative 将 .item1 相对于其默认位置偏移 20 像素。
float: right 使 .item2 浮动到右侧。

文本常用样式属性示例

<!DOCTYPE html>
<html>
<head><style>/* 设置文本样式的CSS */.text {color: #ff0000;font-size: 20px;font-family: Arial, sans-serif;font-weight: bold;text-align: center;line-height: 1.5;text-decoration: underline;letter-spacing: 2px;}</style>
</head>
<body><p class="text">这是一段带有样式的文本。</p>
</body>
</html>

在这个示例中：

color: #ff0000 将文本颜色设置为红色。
font-size: 20px 将文本字体大小设置为 20 像素。
font-weight: bold 将文本加粗。
text-align: center 将文本居中对齐。
text-decoration: underline 为文本添加下划线。
letter-spacing: 2px 增加字母之间的间距。

小结

布局样式属性 用于控制页面中元素的位置、大小、边距、内边距等。在网页设计中，熟练使用这些属性可以创建复杂而灵活的页面布局。
文本样式属性 用于控制文本的字体、大小、颜色、对齐方式等。掌握文本样式的使用，能够极大地提升网页的可读性和美观性。

通过布局和文本样式的结合，CSS能够让网页展现出丰富多彩的样式效果。在实际开发中，掌握这些基础属性，可以为创建用户友好的网页打下坚实的基础。

五、css 元素溢出

1. 什么是 CSS 元素溢出

在网页布局中，元素溢出（Overflow）指的是当元素内容超过其指定的宽度或高度时，会出现内容溢出其容器的情况。通常，CSS 提供了控制元素溢出行为的属性，这些属性可以用于处理内容超过容器尺寸时的显示方式。

CSS overflow 属性定义了元素内容的溢出情况。当一个块级元素的内容大于它的盒模型（由宽度和高度定义）时，可以通过设置 overflow 来控制内容的显示方式。overflow 属性通常有以下几种值：

visible: 默认值，内容不被裁剪，溢出的内容将正常显示在元素外部。
hidden: 内容将被裁剪，溢出部分不可见。
scroll: 内容会被裁剪，但浏览器会显示滚动条以便用户查看超出的内容。
auto: 浏览器会根据需要添加滚动条来查看溢出的内容。

2. 示例代码

我们通过几个常见的例子来解释 CSS 元素溢出的应用场景。

示例 1：`overflow: visible`

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Overflow Visible</title><style>.container {width: 200px;height: 100px;background-color: lightblue;border: 2px solid black;overflow: visible; /* 默认值，内容溢出时不裁剪 */}.content {background-color: lightgreen;width: 300px;height: 150px;}</style>
</head>
<body><div class="container"><div class="content">我是溢出的内容，超出了父容器。</div></div>
</body>
</html>

效果: 由于 overflow: visible;，内容不会被裁剪，超出的部分会直接显示在父容器外面。

示例 2：`overflow: hidden;`

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Overflow Hidden</title><style>.container {width: 200px;height: 100px;background-color: lightblue;border: 2px solid black;overflow: hidden; /* 溢出内容被隐藏 */}.content {background-color: lightgreen;width: 300px;height: 150px;}</style>
</head>
<body><div class="container"><div class="content">我是溢出的内容，但被隐藏了。</div></div>
</body>
</html>

效果: 因为 overflow: hidden;，超出容器的内容会被隐藏，无法看到被裁剪的部分。

示例 3：`overflow: scroll;`

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Overflow Scroll</title><style>.container {width: 200px;height: 100px;background-color: lightblue;border: 2px solid black;overflow: scroll; /* 允许滚动 */}.content {background-color: lightgreen;width: 300px;height: 150px;}</style>
</head>
<body><div class="container"><div class="content">我是溢出的内容，您可以通过滚动查看。</div></div>
</body>
</html>

效果: overflow: scroll; 会显示滚动条，用户可以通过滚动条查看被隐藏的部分。

示例 4：`overflow: auto;`

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Overflow Auto</title><style>.container {width: 200px;height: 100px;background-color: lightblue;border: 2px solid black;overflow: auto; /* 自动显示滚动条 */}.content {background-color: lightgreen;width: 300px;height: 150px;}</style>
</head>
<body><div class="container"><div class="content">我是溢出的内容，自动添加滚动条。</div></div>
</body>
</html>

效果: overflow: auto; 将根据内容是否超出容器，自动显示滚动条。

3. 小结

CSS 中的 overflow 属性是控制元素内容超出容器后的显示方式的关键。它可以根据实际情况来裁剪内容或显示滚动条，常用于布局和响应式设计中。总结如下：

overflow: visible; 默认值，内容不会被裁剪，超出部分直接显示。
overflow: hidden; 内容超出部分会被隐藏，用户无法看到。
overflow: scroll; 强制出现滚动条，用户可以滚动查看超出部分。
overflow: auto; 根据需要自动显示滚动条，仅在内容超出时显示。

通过不同的 overflow 属性设置，我们可以灵活地处理网页中的内容溢出问题，从而提升用户体验。

六、css 显示特性

CSS 中的 display 属性是用于控制元素如何显示在页面上的核心属性。它决定了 HTML 元素的显示行为，不同的 display 值可以极大地改变页面布局和结构。

display 属性的使用

display 属性有多个值，最常用的有以下几种：

block: 将元素显示为块级元素。块级元素会占据父容器的全部宽度，默认会在上方和下方创建换行。
inline: 将元素显示为内联元素。内联元素不会在上方和下方创建换行，只占据内容所需的宽度，多个内联元素会在同一行显示。
inline-block: 使元素像内联元素一样排列，但同时保留块级元素的特性，例如可以设置宽度和高度。
none: 元素不显示在页面上，不占据任何空间（即隐藏元素）。
flex: 使元素成为弹性布局容器，可以方便地创建复杂的页面布局。
grid: 使元素成为网格布局容器，可用于创建基于行列的布局。

常见 display 属性的使用示例

2.1 `block` 示例

块级元素占据其父容器的全部宽度，会在前后自动换行，常见的如 <div>、<p> 等元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.block-element {display: block;background-color: lightblue;width: 100px;margin: 10px;}</style><title>Block Example</title>
</head>
<body><div class="block-element">块级元素1</div><div class="block-element">块级元素2</div>
</body>
</html>

2.2 `inline` 示例

内联元素不会在上下创建换行，仅占据内容所需的宽度，常见如 <span>、<a> 等。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.inline-element {display: inline;background-color: lightgreen;margin: 10px;}</style><title>Inline Example</title>
</head>
<body><span class="inline-element">内联元素1</span><span class="inline-element">内联元素2</span>
</body>
</html>

2.3 `inline-block` 示例

inline-block 元素在一行内显示，但可以像块级元素一样设置宽度和高度。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.inline-block-element {display: inline-block;background-color: lightcoral;width: 100px;height: 50px;margin: 10px;}</style><title>Inline-Block Example</title>
</head>
<body><div class="inline-block-element">内联块元素1</div><div class="inline-block-element">内联块元素2</div>
</body>
</html>

2.4 `none` 示例

display: none; 将隐藏元素，使它不占据页面任何空间。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.hidden-element {display: none;}</style><title>None Example</title>
</head>
<body><div class="hidden-element">这个元素不会显示</div><p>这是可见的文本。</p>
</body>
</html>

2.5 `flex` 示例

display: flex; 用于弹性布局，能够轻松实现复杂的页面布局，如垂直或水平对齐。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.flex-container {display: flex;justify-content: space-around;background-color: lightgray;}.flex-item {background-color: lightsalmon;width: 100px;height: 100px;margin: 10px;}</style><title>Flex Example</title>
</head>
<body><div class="flex-container"><div class="flex-item">元素1</div><div class="flex-item">元素2</div><div class="flex-item">元素3</div></div>
</body>
</html>

2.6 `grid` 示例

display: grid; 实现基于行列的布局，通常用于更复杂的页面布局设计。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.grid-container {display: grid;grid-template-columns: auto auto auto;gap: 10px;background-color: lightyellow;}.grid-item {background-color: lightseagreen;padding: 20px;text-align: center;}</style><title>Grid Example</title>
</head>
<body><div class="grid-container"><div class="grid-item">元素1</div><div class="grid-item">元素2</div><div class="grid-item">元素3</div><div class="grid-item">元素4</div><div class="grid-item">元素5</div><div class="grid-item">元素6</div></div>
</body>
</html>

小结

display 属性是 CSS 的核心属性之一，控制元素在页面上的显示方式。
常用的 display 属性值包括 block、inline、inline-block、none、flex 和 grid 等。
通过灵活运用 display 属性，可以实现不同的布局效果，如块级布局、内联布局、弹性布局和网格布局。
理解并掌握 display 属性的使用，对提升页面布局和设计有非常重要的作用。

通过上述代码示例，你可以清楚地了解 display 属性在不同场景中的实际应用。在项目开发过程中，合理使用 display 属性可以帮助你创建更加灵活和高效的网页布局。

七、盒子模型

1. 盒子模型的介绍

盒子模型（Box Model）是CSS中用于描述HTML元素布局的基础概念。所有的HTML元素都被看作是一个矩形的盒子。这个盒子由以下四个部分组成：

内容区域（Content）：盒子的最内部部分，用于显示文本和图像等内容。
内边距（Padding）：内容区域和边框之间的空间。
边框（Border）：包裹内容和内边距的边框线。
外边距（Margin）：盒子和其他元素之间的外部间距。

下图表示了盒子模型的结构：

+-----------------------------+
|          外边距（Margin）      |
+-----------------------------+
|         边框（Border）        |
+-----------------------------+
|        内边距（Padding）       |
+-----------------------------+
|        内容（Content）         |
+-----------------------------+

2. 盒子模型相关样式属性

在CSS中，盒子模型的各个组成部分可以通过样式属性进行控制。以下是常见的盒子模型相关的样式属性：

（1）`width` 和 `height`

描述：定义元素内容区域（Content）的宽度和高度，不包括内边距、边框和外边距。
示例：
```
div {width: 200px;height: 100px;
}
```

（2）`padding`

描述：定义内容和边框之间的空间，可以为四个方向分别设置，也可以统一设置。
用法
- padding-top：上内边距
- padding-right：右内边距
- padding-bottom：下内边距
- padding-left：左内边距

示例

div {padding: 10px; /* 设置所有内边距为10px */
}
div {padding: 10px 20px; /* 上下为10px，左右为20px */
}

（3）`border`

描述：定义边框的宽度、样式和颜色。
用法
- border-width：边框宽度
- border-style：边框样式（如solid、dashed、dotted等）
- border-color：边框颜色

示例

div {border: 2px solid black; /* 黑色实线边框，宽度为2px */
}

（4）`margin`

描述：定义元素与其他元素之间的外边距空间，也可以为四个方向分别设置。
用法
- margin-top：上外边距
- margin-right：右外边距
- margin-bottom：下外边距
- margin-left：左外边距

示例

div {margin: 20px; /* 设置所有外边距为20px */
}
div {margin: 10px 15px; /* 上下外边距为10px，左右为15px */
}

（5）`box-sizing`

描述

：控制元素宽度和高度的计算方式。它有两个常见的值：
- content-box：默认值，仅内容区域的宽度和高度由width和height决定。
- border-box：宽度和高度包括内边距和边框。

示例

div {box-sizing: border-box; /* 宽高包括边框和内边距 */
}

3. 小结

盒子模型是CSS布局的重要基础，理解盒子模型的各个组成部分以及如何通过样式属性控制它们是掌握CSS布局的关键。在设计网页时，需要正确设置元素的内外边距、边框、内容大小，以实现页面元素的对齐和布局。

通过合理使用padding、margin、border和box-sizing等属性，可以有效地控制页面布局，实现预期的视觉效果。

教学案例

案例1：创建一个盒子模型的简单示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.box {width: 300px;height: 150px;padding: 20px;border: 5px solid blue;margin: 10px;background-color: lightgrey;}</style><title>盒子模型示例</title>
</head>
<body><div class="box">这是一个演示盒子模型的盒子</div>
</body>
</html>

在这个案例中，.box元素的内容区域宽为300px，高为150px，同时设置了内边距、边框和外边距。通过这个例子可以清晰地看到盒子模型的各个组成部分如何影响元素的布局。

案例2：使用`box-sizing`简化布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.box {width: 300px;height: 150px;padding: 20px;border: 5px solid red;margin: 10px;background-color: lightyellow;box-sizing: border-box;}</style><title>使用box-sizing简化布局</title>
</head>
<body><div class="box">这个盒子使用了 box-sizing: border-box</div>
</body>
</html>

在这个示例中，box-sizing: border-box让元素的宽度和高度包括内边距和边框，简化了布局的复杂性，特别是在需要精确控制元素大小时非常有用。

通过这些案例，学生可以更直观地理解CSS盒子模型的概念，并应用于实际的网页设计中。

八、作业

做一个表格，6行4列实现隔行换色（背景色）并且第3列文字红色第一个单元格文字大小30px。最后一个单元格文字斜体

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>table {width: 100%;border-collapse: collapse;}th, td {border: 1px solid black;padding: 10px;text-align: center;}/* 隔行换色 */tr:nth-child(even) {background-color: #f2f2f2;}tr:nth-child(odd) {background-color: #ffffff;}/* 第三列文字红色 */td:nth-child(3) {color: red;}/* 第一个单元格文字大小为30px */td:first-child {font-size: 30px;}/* 最后一个单元格文字斜体 */td:last-child {font-style: italic;}</style><title>表格样式</title>
</head>
<body><table><tr><td>单元格 1</td><td>单元格 2</td><td>单元格 3</td><td>单元格 4</td></tr><tr><td>单元格 5</td><td>单元格 6</td><td>单元格 7</td><td>单元格 8</td></tr><tr><td>单元格 9</td><td>单元格 10</td><td>单元格 11</td><td>单元格 12</td></tr><tr><td>单元格 13</td><td>单元格 14</td><td>单元格 15</td><td>单元格 16</td></tr><tr><td>单元格 17</td><td>单元格 18</td><td>单元格 19</td><td>单元格 20</td></tr><tr><td>单元格 21</td><td>单元格 22</td><td>单元格 23</td><td>单元格 24</td></tr>
</table></body>
</html>