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

关注

已于 2022-10-23 19:58:50 修改 · 2.9k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

CSS行内样式，移动端前端前端开发大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】阅读详情

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>

网页显示效果：