CSS中块级元素，行内块元素，行内元素的特点

火月亮

已于 2022-10-23 19:58:50 修改

阅读量2.6k

点赞数 3

文章标签： html 前端 css

于 2022-10-23 19:32:33 首次发布

本文链接：https://blog.csdn.net/Din_volcano/article/details/127478279

版权

CSS自学笔记

前言

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。 HTML 元素一般分为块元素和行内元素两种类型。块级元素和行内元素都是元素显示模式，而本文讲的是这几种模式的区别以及使用规则。

一、什么是元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，比如自己占一行，比如一行可以放多个。HTML 元素一般分为块元素和行内元素两种类型。

二、CSS的元素显示模式

1.块元素

常见的块元素有：<h1>~<h6>，<p>，<div>，<ul>，<ol>，<li>等，其中div是最典型的块元素。

块级元素的特点：

① 比较霸道，自己独占一行。

② 高度，宽度、外边距以及内边距都可以控制。

③ 宽度默认是容器（父级宽度）的100%。

④ 是一个容器及盒子，里面可以放行内或者块级元素。

注意：1.文字类的元素内不能使用块元素。

2.标签主要用于存放文字，因此里面不能放块级元素，特别是不能放。

3.同理h1~h6等都是文字类块级标签，里面也不能放其他块级元素。

代码如下（错误示例）:

<body>
    <div>比较霸道,自己独占一行</div> 瑟瑟发抖
    <p>独占一行</p>
    <p>
    <div>这里有问题</div>
    </p>
</body>

网页显示效果：

此代码的21到23行中将div放在了文字类元素中，乍一看好像是没有什么问题的，但是我们在网页中查看代码便可以发现浏览器渲染的过程中div自动从p标签里跳出来了。

这里p标签生效，上下都有间隙，但是

在p里嵌套div之后这个p便不再生效

同理如果在p标签中嵌套p标签，或者在a标签中嵌套a标签，容易造成错误。

错误示例：

<body>
    <a href="#">
        我是谁
        <a href="#">我是谁</a>
    </a>
</body>

网页显示效果

嵌套在里面的a或者p均会跳出来。

2.行内元素

常见行内元素：<a><strong><b><em><del><i><s><ins><u><span>等，其中<span>是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

① 相邻行内元素在一行上，一行可以显示多个。

② 高、宽直接设置是无效的。

③ 默认宽度就是它本身内容的宽度。

④ 行内元素只能容纳文本或其他行内元素。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示模式之行内元素</title>
    <style>
        span {
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <span>我是行内元素span</span> <strong>我是行内元素strong</strong>
    <span>我是行内元素span</span> <strong>我是行内元素strong</strong>

</body>

</html>

网页显示效果：

可以看出CSS中长宽设置对于行内元素是无效的。

3.行内块元素

在行行内元素中有几个特殊的标签，<img/><input/><td>它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。

② 默认宽度就是它本身内容的宽度（行内元素特点）。

③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示模式之行内块元素(特殊情况)</title>
    <style>
        input {
            width: 249px;
            height: 35px;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
</body>

</html>

网页显示效果：

可以看出既可以在同一行显示，又可以设置长宽。

火月亮

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
CSS中块级元素，行内块元素，行内元素的特点

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。HTML 元素一般分为块元素和行内元素两种类型。块级元素和行内元素都是元素显示模式，而本文讲的是这几种模式的区别以及使用规则。
复制链接

扫一扫