HTML/CSS/JS学习笔记 Day5（CSS--C2 元素的显示模式）

跟着该视频学习，记录笔记：【黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p=12\&vd_source=04ee94ad3f2168d7d5252c857a2bf358

Day5 内容梳理：

[CSS 2.元素的显示模式](#CSS 2.元素的显示模式)

[2.0 显示模式的类型](#2.0 显示模式的类型)

块元素

行内元素

行内块元素

[2.1 显示模式之间的转换](#2.1 显示模式之间的转换)

CSS 2.元素的显示模式

2.0 显示模式的类型

元素显示模式就是元素（或叫标签）以什么方式进行显示。

HTML元素一般分为两种类型：块元素、行内元素。块元素是一行放一个，比如<div>自己占一行。行内元素是一行可放很多个，比如一行可以放很多个<span>。

不过也存在一些同时具有双方特点的特殊元素：行内块元素，比如<img/>、<input/>。

|-------|---------|---------------|---------|---------------|
| 元素模式 | 元素排列方式 | 设置样式 | 默认宽度 | 包含 |
| 块元素 | 一行只能放一个 | 可设置长宽高 | 容器的100% | 可包含任何标签 |
| 行内元素 | 一行可放多个 | 不可直接设置长宽高 | 内容本身的宽度 | 只能容纳文本或其他行内元素 |
| 行内块元素 | 一行可放多个 | 可设置长宽高 | 内容本身的宽度 | |

块元素

常见块元素：<h1>到<h6>、<div>、<p>、<ul>、<ol>、<li>等等

块元素的特点：

自己独占一行。
高度、宽度、外边距、内边距都可以控制。
宽度默认是容器（也叫父级宽度）的100%。
是一个容器及盒子，内部可以放行内元素或块元素。

补充：文字类的元素内部不能放块元素。比如<p>、<h1>到<h6>等文字标签的内部不能放<div>等块元素。

行内元素

常见行内元素：<a>、<em>、<span>等等

块元素的特点：

一行可以显示多个行内元素。
高度、宽度都无法直接设置，默认宽度就是它本身的内容的宽度。
行内元素只能容纳文本或其他行内元素。

补充：链接里面不能再放链接。链接<a>比较特殊，里面可以放块元素。

行内块元素

常见行内块元素：图片、表单、单元格等等。

同时具有块元素和行内元素的特点：

一行可以显示多个（行内元素特点），但是相邻元素之间会有空白缝隙。
默认宽度市它本身的内容的宽度（行内元素特点）。
高度、行高、外边距、内边距都可自己设置（块元素特点）。

2.1 显示模式之间的转换

特殊情况下，需要对元素的显示模式进行转化。

比如因为文本框的被点击范围是文本内容本身的宽高，所以为了增加它的被点击范围，把它从行内元素（不可直接设置长宽高）转换为行内块元素（可设置长宽高），如下图：

转换成块元素：

html 复制代码

display: block;

转换成行内元素：

html 复制代码

display: inline;

转换成行内元素：

html 复制代码

display: inline-block;

例子1，把行内元素<a>改为块元素：

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>
        a {
            width: 530px;
            height: 50px;
            background-color: skyblue;
            display: block;
            /* display这行代码就能把元素更改为块元素 */
        }
    </style>
</head>

<body>
    <a>这是一个行内元素，会被更改为块元素的样子（独占一行、可更改长宽高）</a>
    <a>这也是一个被更改的行内元素</a>
</body>

</html>

例子2，把块元素<div>改为行内元素：

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>
        div {
            width: 530px;
            height: 50px;
            background-color: yellow;
            display: inline;
            /* inline这行代码可把块元素更改为行内元素 */
        }
    </style>
</head>

<body>
    <div>这是一个被改为行内元素的块元素div</div>
    <div>这也是一个被更改的元素div</div>
</body>

</html>

例子3，把行内元素<span>改为行内块元素：

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>
        span {
            width: 130px;
            height: 100px;
            background-color: orange;
            display: inline-block;
            /* inline这行代码可把块元素更改为行内元素 */
        }
    </style>
</head>

<body>
    <span>行内元素转化为行内块元素</span>
    <span>行内元素转化为行内块元素</span>
</body>

</html>