快速了解元素的三种分类

朴灿烈づ我的快乐病毒、 2022-06-02 01:27 313阅读 0赞

在html中的标签元素 大体被分为三种不同的类型：

1、块状元素； 2、内联元素；3、内联块状元素。

特点：

**1.块状元素：所谓的块状元素，就是会独占一行的的元素,无论他的内容有多少，他都会独占一整行，【可以设置宽高】**

2.内联元素：所谓的内联元素，指的是只占自身大小的元素，不会独占用一行，【不可以设置宽高】

3.内联块状元素：所谓的内联块状元素，指的是只占自身大小的元素，不会占用一行，但是【可以设置宽高】

**例子：**

块状元素：

<div>我是第一个块状元素</div><div>我是第二个块状元素</div>

运行结果：如下，**会独占一行**，且**可设宽高**；

![Image 1][]![Center][]

**内联元素：**

<span>我是第一个内联元素</span><span>我是第二个内联元素</span>

运行结果：如下，只占自行元素大小，**不会独占一行**，且**不可设宽高**；

![Image 1][]![Center 1][]

内联块状元素：

<input style="height: 50px;" value="我是第一个内联块状元素" />  
<input style="height: 50px;" value="我是第二个内联块状元素" />

运行结果：如下，**不会独占一行**，且**可设宽高；**

**![Image 1][]![Center 2][]**

**我们可以根据需要将元素进行转化：**

**需要哪种样式，设置display即可：**

**块状元素（block），内联元素（inline），内联块状元素（inline-block）**

**1.块状元素>>（转）>>内联元素**

**设置样式：display：inline；**

**2.块状元素>>（转）>>内联块状元素**

**设置样式：display：inline-block；**

**3.内联元素>>（转）>>块状元素**

**设置样式：display：block；**

**注意点**

**一般情况下：  
只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素  
a元素可以包含任意元素，除了他本身  
p元素不可以包含任何块状元素**

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

[Image 1]: 
[Center]: /images/20220602/b53526cfabf0431c8fc43858cea96fb0.png
[Center 1]: /images/20220602/cfc30d4e8f5041268fbc7dc510c636a9.png
[Center 2]: /images/20220602/926c352aa5164e0db63e5fc7aca4967b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，313人围观）

还没有评论，来说两句吧...

相关阅读

相关元素居中的三种方式

元素居中的三种方式面试题如何让一个元素在父元素中上下左右居中？ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpd

た入场券/ 2022年12月26日 00:54/ 0 赞/ 202 阅读

相关三种快速排序以及快速排序的优化

1、快速排序的基本思想：快速排序使用分治的思想，通过一趟排序将待排序列分割成两部分，其中一部分记录的关键字均比另一部分记录的关键字小。之后分别对这两部分记录继续进行排

清疚/ 2022年12月10日 11:23/ 0 赞/ 194 阅读

相关三种快速排序以及快速排序的优化

一、快速排序的三种方法 1、快速排序的基本思想：快速排序使用分治的思想，通过一趟排序将待排序列分割成两部分，其中一部分记录的关键字均比另一部分记录的关键字小。之

谁践踏了优雅/ 2022年08月02日 04:50/ 0 赞/ 186 阅读

相关 html元素的分类

HTML对盒子(元素)分类： 1.块级元素(block) 2.行内元素(inline) 3.行内块元素(inline-block) 。注：HTML的大多数元素

末蓝、/ 2022年06月09日 14:48/ 0 赞/ 242 阅读

相关快速了解元素的三种分类

在html中的标签元素大体被分为三种不同的类型： 1、块状元素； 2、内联元素；3、内联块状元素。特点： 1.块状元素：所谓的块状元素，就是会独占一行的的元素,无论他

朴灿烈づ我的快乐病毒、/ 2022年06月02日 01:27/ 0 赞/ 314 阅读

相关 jsp的三种类型的元素

文章转自：[http://blog.sina.com.cn/s/blog\_64dc2d3f01015a4u.html][http_blog.sina.com.cn_s_blo

Bertha 。/ 2022年05月14日 10:49/ 0 赞/ 179 阅读

相关 spring的三种分类

IOC分为： bean 的相关操作， spring自动装配 spring注入的三种操作方法 spring容器 spring事件处理 \-

拼搏现实的明天。/ 2022年05月04日 08:27/ 0 赞/ 134 阅读

相关元素分类

dic = {} lst1 = [] lst2 = [] li = [11,22,33,44,55,66,77,88,99,90] fo

╰+攻爆jí腚メ/ 2021年11月19日 14:52/ 0 赞/ 317 阅读

相关 JavaScript创建元素的三种方式

第一种：document.write(“标签的代码及内容”)； document.write('新设置的内容<p>标签也可以生成</p>'); 该方法的缺陷：如

亦凉/ 2021年11月11日 09:46/ 0 赞/ 383 阅读

相关三种快速排序以及快速排序的优化

[ ][Link 1] 版权声明：本文为博主原创文章，遵循[ CC 4.0 by-sa ][Link 1]版权协议，转载请附上原文出处链接和本声明。本文链接： [http

叁歲伎倆/ 2021年10月31日 16:04/ 0 赞/ 344 阅读