【面试题集 —— No.08】HTML中的行内元素，块级元素和行内块级元素

最新推荐文章于 2021-04-27 21:31:56 发布

Code_Zevin_J

最新推荐文章于 2021-04-27 21:31:56 发布

阅读量2.4k

点赞数 1

分类专栏：面试题集 HTML5 文章标签： html css

本文链接：https://blog.csdn.net/JZevin/article/details/109583512

版权

面试题集同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

HTML5

1 篇文章 0 订阅

订阅专栏

有关HTML中的行内元素，块级元素和行内块级元素的举例或者区别，这真的是前端面试中的一道经典必问项了。今天特意总结此篇，方便日后回顾。

文章目录

一. 三者实例汇总

分类	举例
行内元素	span、a、b、img、input、strong、select、label、em、button、textarea
块级元素	div、p、h1-h6、ul、ol、li、blockquote 、header 、section 、aside 、footer 、dl、 dd 、dt 、form、 hr 、pre 、tbody 、tfoot 、th 、thead 、tr
行内块级元素	img、 input、 td
空元素	br、 hr 、img、 input 、link、 meta

二. 行内元素与块级元素的区别

两者的区别主要有以下三点：

2.1 直观上的表现不同

行内元素会在一条直线上排列，都是同一行的，水平方向排列；
块级元素各独占一行，垂直方向排列。

具体请看示例对比：

// 行内元素举例
<body>
    <span>我是span标签</span>
    <a>我是a标签</a>
    <input type="text">
    <button>确定</button>
    <img src="./timg.jpg" alt="">
    // 可自由换图
</body>

在这里插入图片描述

// 块级元素举例
<body>
    <div>我是div标签</div>
    <h1>我是h1标签</h1>
    <p>我是p标签</p>
    <ul>
        <li>无序列表项1</li>
        <li>无序列表项2</li>
        <li>无序列表项3</li>
    </ul>
</body>

在这里插入图片描述

2.2 包含关系不同

块级元素内既可以包含行内元素又可以包含块级元素；
行内元素内不能包含块级元素，只能包含行内元素。

同样看例子，比如我们常常使用的div标签内嵌套其他标签：

<div>
    <input type="text">
</div>
<div>
    <img src="./timg.jpg" alt="">
    <span>我是span标签</span>
    <h3>我是h3标签</h3>
</div>

在这里插入图片描述

块级元素内嵌套的行内元素，在没有遇到同级的块级元素时，也是按照行内元素的规则水平排列的。比如上图中第二个div标签内的img标签和span标签。

2.3 盒模型属性不同

行内元素设置宽高属性（width，heigth）无效，margin，padding等边距属性也只有水平方向有效，垂直方向无效；
块级元素的width，heigth，margin，padding等属性均有效。

行内元素的垂直方向的边距属性中，虽然padding-top和padding-bottom可以设置，但是不占据空间，也就等于无效；而margin-top和margin-bottom压根就不能设置。

在这里插入图片描述
可以看到上图中的例子：我在之前行内元素的例子中又加了一条分割线<hr>，方便对比padding属性在垂直方向上是否占用空间。

可以看到padding属性显示了四周，但是很明显，垂直方向上的padding-top和padding-bottom没有占据空间。margin属性也只显示了左右两块，说明只有margin-left和margin-right有效。

<style>
    * {
        margin: 0;
        padding: 0;
    }

    span {
        width: 500px;
        height: 100px;
        margin: 20px;
        padding: 10px;
    }
</style>

// 行内元素举例
<body>
    <span>我是span标签</span>
    <a>我是a标签</a>
    <input type="text">
    <button>确定</button>
    <img src="./timg.jpg" alt="">
    // 可自由换图
    <hr>
</body>

块级元素的width，heigth，margin，padding等属性均有效。

三. 行内块级元素

很多情况下，我们又希望行内元素也可以像块级元素那样正常设置边距，这个时候行内块级元素就出现了，比如img、 input、 td等等，他们严格来说属于行内块级元素。

比如我们可以给input设置宽高和边距：

在这里插入图片描述

<style>
    * {
        margin: 0;
        padding: 0;
    }

    input {
        width: 200px;
        height: 80px;
        margin: 20px;
        padding: 10px;
    }
</style>

四. 互相转化

一个标签具体是行内元素还是块级元素是可以设置的，这个属性为display，这三种格式分别对应的属性值为：

div {
    display: inline;  // 行内元素
    display: block;  // 块级元素
    display: inline-block;  // 行内块级元素
}

浏览器将块级元素的dispaly属性默认为block，行内元素属性默认为inline，因此行内元素与块级元素的切换可以通过修改display属性实现。

Code_Zevin_J

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【面试题集 —— No.08】HTML中的行内元素，块级元素和行内块级元素

有关HTML中的行内元素，块级元素和行内块级元素的举例或者区别，这真的是前端面试中的一道经典必问项了。今天特意总结此篇，方便日后回顾。文章目录一. 三者实例汇总二. 行内元素与块级元素的区别2.1 直观上的表现不同2.2 包含关系不同2.3 盒模型属性不同三. 行内块级元素四. 互相转化一. 三者实例汇总分类举例行内元素span、a、b、img、input、strong、select、label、em、button、textarea块级元素div、p、h1-h6、u.
复制链接

扫一扫

专栏目录