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

1_bit

发布于 2022-05-10 19:38:55

3400

发布于 2022-05-10 19:38:55

文章被收录于专栏：我的知识小屋

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

在学习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中添加如下修饰：