当前位置：首页 > 科技 > 软件

什么是块元素、行元素以及行内块元素

来源：责编：时间：2024-01-02 09:31:02 127观看

导读一、块级元素块级元素(Block-level elements)是指在HTML中以块的形式显示的元素。它们通常有以下特征：块元素在页面中以区域块的形式出现每个块元素通常都会独自占据一整行或多个整行可以对其设置宽度、高度、对齐等属

一、块级元素

块级元素(Block-level elements)是指在HTML中以块的形式显示的元素。它们通常有以下特征：

块元素在页面中以区域块的形式出现
每个块元素通常都会独自占据一整行或多个整行
可以对其设置宽度、高度、对齐等属性
块级元素可以包含其他块级元素和内联元素

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

块元素的默认属性：

display: block

二、行内元素

行内元素（Inline elements）是指在HTML中以行内的方式显示的元素。行内元素也称为内联元素或内嵌元素，常用于控制页面中文本的样式。它们通常有以下特征：

一个行内元素通常会和其前后的其他行内元素显示在同一行中，不占独立的区域
仅仅靠自身的字体大小和图像尺寸来支撑结构
一般不可以设置高度、宽度等属性
只能设置水平方向的外边距

常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等，其中<span>标记是最典型的行内元素

行内元素的默认属性：

display: inline

三、行内块级元素

行内块级元素，它既具有块级元素的特点，也有行内元素的特点。

和相邻的行内元素（包含行内块）在同一行显示
可以任意设置元素宽度、高度以及内外边距
默认宽度就是内容的宽度（行内元素的特点）

常见的行内块级元素有<input>、<img>等

行内块级元素的默认属性：

display: inline-block

四、元素之间的转换

块级元素、行内元素、行内块级元素之间可以相互转换，设置相应的display属性值即可。对于display存在属性值为none，意思是设置元素不可见并且连盒模型也不生成，一般用于不占空间的隐藏元素：

display: none

本文链接：http://www.28at.com/showinfo-26-55159-0.html什么是块元素、行元素以及行内块元素

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：同步架构和异步架构的区别，你知道吗？

下一篇：同步架构和异步架构的区别，你知道吗？

标签：

热门焦点

Golang 中的 io 包详解：组合接口

io.ReadWriter// ReadWriter is the interface that groups the basic Read and Write methods.type ReadWriter interface { Reader Writer}是对Reader和Writer接口的组合，
三分钟白话RocketMQ系列—— 如何发送消息

我们知道RocketMQ主要分为消息生产、存储（消息堆积）、消费三大块领域。那接下来，我们白话一下，RocketMQ是如何发送消息的，揭秘消息生产全过程。注意，如果白话中不小心提到相关代
小红书1周涨粉49W+，我总结了小白可以用的N条涨粉笔记

作者：黄河懂运营一条性教育视频，被54万人“珍藏”是什么体验？最近，情感博主@公主是用鲜花做的，火了！仅仅凭借一条视频，光小红书就有超过128万人，为她疯狂点赞！更疯狂的是，这
得物宠物生意「狂飙」，发力“它经济”

作者｜花花小萌主近日，得物宣布正式上线宠物鉴别，通过得物App内的“在线鉴别”，可找到鉴别宠物的选项。通过上传自家宠物的部位细节，就能收获拥有专业资质认证的得物鉴
东方甄选单飞：有些鸟注定是关不住的

文/彭宽鸿编辑/罗卿东方甄选创始人俞敏洪带队的“7天甘肃行”直播活动已在近日顺利收官。成立后一年多时间里，东方甄选要脱离抖音自立门户的传闻不绝于耳，“7
华为Mate 60系列用上可变灵动岛：正式版体验将会更出色

这段时间以来，关于华为新旗舰的爆料日渐密集。据此前多方爆料，今年华为将开始恢复一年双旗舰战略，除上半年推出的P60系列外，往年下半年的Mate系列也将
2022爆款：ROG魔霸6 冰川散热系统持续护航

喜逢开学季，各大商家开始推出自己的新产品，进行打折促销活动。对于忠实的端游爱好者来说，能够拥有一款梦寐以求的笔记本电脑是一件十分开心的事。但是现在的
SN570 NVMe SSD固态硬盘价格与性能兼具

SN570 NVMe SSD固态硬盘是西部数据发布的最新一代WD Blue系列的固态硬盘，不仅闪存技术更为精进，性能也得到了进一步的跃升。WD Blue SN570 NVMe SSD的包装外
苹果MacBook Pro 2021测试：仍不支持平滑滚动

据10月30日9to5 Mac 消息报道，苹果新的 14 英寸和 16 英寸 MacBook Pro 2021 上市后获得了不错的评价，亮点包括行业领先的性能，令人印象深刻的电池续航，精美丰