【前端就业课第二阶段】CSS 零基础到实战（02）列表

整个前端学习路线

以下路线为 CSDN C认提供：
请添加图片描述

如果想 快点搞完 并且就业可以选择C认证，C认证还可以 内推、招聘会 ，所以如果在校生想要稳一点，就可以选择C认证或者超级实习生计划，贼稳！

链接在这PC端：进入
手机移动端H5：进入
手机二维码扫码也可以：
在这里插入图片描述
请添加图片描述

合作的企业有这些：
请添加图片描述

如果有疑惑可以问我，如果报培训班我建议还是 CSDN 的靠谱，找我看文末就可以了。

更多资料我放文末了，想了解的可以看一下。

本系列文章持续更新，点击专栏就可以看其他文章：点击进入专栏

一、块元素、行内元素、行内块元素

在学习CSS时，我们需要搞清楚HTML 标签的一些分类，HTML 一般可分为块元素、行内元素以及行内块元素，不同的种类在呈现上有着不同的表现形式。

1.1 块元素

块元素有比较多的特性，例如在 HTML 页面中的呈现为独占一行，例如标题标签 <h1>、<h2>、<h3> 这些，当然也包括 <li> 标签元素这一类，这一类标签在页面中独占一个行，你在后面所编写的内容将会自动换行显示。例如如下代码，即时你并排显示也会进行自动换行，因为 h 标题标签属于块元素：
在这里插入图片描述

并且这些块元素的高度、内外边距都可以控制，宽度默认情况下是父容器（包裹这个块元素的容器）的整行宽（100%）。

例如咱们使用 div 进行说明，div 咱们可以理解为是一个容器，并且 div 也是一个块元素，咱们可以通过 div 对其内部元素进行统一的编排，布局，使整个页面布局合理更加美观，div 的使用在之前的内容中已经讲解过，下面是一个示例：

在这里插入图片描述

以上代码通过设置宽度和背景色改变了其 div 的一些属性，但是我们还是可以发现，这个div 即使更改了其宽度，也是独占一行。

在块元素中还可以包含块元素、行内元素、行内块元素，但是文字类型的元素内不能包含块元素，例如 h 、p 标签。

一般常见的块元素有标题标签 h、p、 div、有无序列表li与ol 等。

1.2 行内元素

我们可以理解行内元素即为同一行内可以显示的元素，当然这一个“同一行”的意思指的是宽度未大于最大行宽时则在同一行中进行显示，并且该元素宽度等于其内容宽度。常见的这类标签有 a、span、i、s 等标签，这一类标签直接设置宽度是无效的，并且在其内部是无法使用块元素的。

我们查看以下案例可知，设置宽度并无用处：

<!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>02 css 1_bit 的前端课</title><style>span{background-color: blue;}</style>
</head>
<body><span style="width: 70%;">这是个span</span><i>这个是 i</i>
</body>
</html>

在这里插入图片描述

1.3 具有行内元素及块元素特点的元素

行内块元素一般可以设置宽高、并且一行可显示多个，例如 img input 以及 td 元素。以下为 input 示例设置其宽高：

<body><input style="background-color:blueviolet;" /> <input style="background-color: blue;" />
</body>

在这里插入图片描述

二、显示模式转换

2.1 显示模式

显示模式则是刚刚我们所了解的元素显示形式，我们可以通过显示模式的转换使得一种类型元素拥有其他类型元素的显示形式。

2.1 显示模式转化

一般情况下，直接给行内元素设置其对应的宽高是不会生效的，如下代码所示：

<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>02 css 1_bit 的前端课</title><style>a{width: 50%;height:30px;background-color: aqua;}</style>
</head>
<body><a>a链接块级元素</a>
</body>

想让其生效，需要将a标签转化为块元素，在css中添加如下修饰：
在这里插入图片描述
最后显示如下：

此时若你在已经转换为块级元素的a标签后添加行内元素 span：

span将会换行显示，因为块元素特性独占一行。

当然块级元素也可以转化为行内元，例如如下代码：

在这里插入图片描述
此时只需要给予对应标签的 display 修饰为 inline 就好了，那么此时 div 将会变成行内元素进行显示。

当然行内块元素也可以进行转换，接下来咱们可以把span 元素转为行内块元素，代码如下：

我们只需要把display设置成 inline-block 即可，显示如下：
在这里插入图片描述