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

开发
块级元素、行内元素、行内块级元素之间可以相互转换,设置相应的display属性值即可。

一、块级元素

块级元素(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
责任编辑:赵宁宁 来源: IT人家
相关推荐

2010-09-08 17:11:29

CSS块元素CSS内联元素

2012-09-18 09:43:14

Squid代理服务器安全网关

2010-09-15 13:21:32

DIV元素SPAN元素

2010-09-13 11:25:56

DIV元素

2010-09-07 13:58:28

SPANDIV

2023-05-31 07:29:46

2010-08-30 12:59:47

DIVSPAN

2010-09-16 09:13:09

CSS display

2010-09-16 09:33:33

CSS displayCSS display

2010-06-17 16:29:57

UML组成

2009-09-16 16:52:50

LINQ to XML

2020-05-15 08:30:25

前端开发工具

2017-08-07 16:39:03

JSX动态数据

2020-10-25 08:57:56

CSS前端浏览器

2023-03-16 09:00:00

HTML5HTML语言

2009-09-01 09:08:32

HTML 5

2013-01-14 10:02:10

UI设计设计元素Metro

2021-07-29 10:00:24

Arrays工具类元素

2009-07-06 14:43:30

JSP元素

2009-09-08 17:01:54

Linq源元素
点赞
收藏

51CTO技术栈公众号