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

给bug两拳

于 2024-09-18 16:47:48 发布

阅读量354

点赞数 10

分类专栏：前端学习（HTML/CSS/JS）文章标签： css

本文链接：https://blog.csdn.net/m0_75036068/article/details/142337530

版权

前端学习（HTML/CSS/JS）专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

Day5 内容梳理：

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 显示模式之间的转换

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

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

转换成块元素：

display: block;

转换成行内元素：

display: inline;

转换成行内元素：

display: inline-block;

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

<!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>改为行内元素：

<!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>改为行内块元素：

<!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>