---块状元素、内联元素(又叫行内元素)和内联块状元素

布满荆棘的人生 2022-07-15 13:23 188阅读 0赞

元素分类在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：**<div>**、**<p>**、**<h1>**...**<h6>**、**<ol>**、**<ul>**、**<dl>**、**<table>**、**<address>**、**<blockquote>** 、**<form>**

常用的内联元素有：**<a>**、**<span>**、**<br>**、**<i>**、**<em>**、**<strong>**、**<label>**、**<q>**、**<var>**、**<cite>**、**<code>**

常用的内联块状元素有：**<img>**、**<input>**

元素分类--块级元素什么是块级元素？

在html中**<div>**、**<p>**、**<h1>**、**<form>**、**<ul>** 和 **<li>**就是块级元素。

设置display:block就是将元素显示为块级元素。

如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。a\{display:block;\}

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

元素分类--内联元素在html中，**<span>**、**<a>**、**<label>**、**<input>**、**<img>**、**<strong>** 和**<em>**就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从页使用div元素具有内联元素特点。

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

元素分类--内联块状元素内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，**<img>**、**<input>**标签就是这种内联块状标签。inline-block元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

发表评论取消回复

表情：

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

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

相关阅读

相关 HTML行内元素、块状元素、行内块状元素的区别

HTML行内元素、块状元素、行内块状元素的区别][HTML] 转载于:https://www.cnblogs.com/hool/p/11313329.html [H...

╰半橙微兮°/ 2024年04月20日 10:52/ 0 赞/ 28 阅读

相关 html块状元素和内联元素_如何在HTML中使用内联和块元素

html块状元素和内联元素 [How To Build a Website With HTML][] [如何使用HTML构建网站][How To Build a Websit

小咪咪/ 2022年11月28日 15:23/ 0 赞/ 183 阅读

相关内联元素

> > > > 1.任何元素加上float属性就可以自动变成块级元素 > > 2.内联元素你一样可以对它设置padding与margin.只不过它们都不会影响内联元

谁借莪１个温暖的怀抱￠/ 2022年08月06日 00:26/ 0 赞/ 155 阅读

相关常见的块状元素与内联元素

<table> <tbody> <tr> <td> <p></p> <p><strong><span style="font-size:18px; color

﹏ヽ暗。殇╰゛Y/ 2022年08月02日 15:56/ 0 赞/ 126 阅读

相关行内元素与块状元素行内替换元素与行内非替换元素的区别

img属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。行内非替换元素，例如, height/width/padding

Love The Way You Lie/ 2022年07月21日 02:25/ 0 赞/ 160 阅读

相关行内元素和块状元素的区别

<!DOCTYPE html> <html lang="zh-CN"> <head> <style> div{

╰+攻爆jí腚メ/ 2022年07月20日 12:30/ 0 赞/ 162 阅读

相关 ---块状元素、内联元素(又叫行内元素)和内联块状元素

元素分类在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有：<div>、<p>、<h1>...<h

布满荆棘的人生/ 2022年07月15日 13:23/ 0 赞/ 189 阅读

相关常见的内联和块状元素

![Center][] [Center]: /images/20220606/2366c9ad30c6406f91486fa54b6c62fa.png

本是古典何须时尚/ 2022年06月06日 08:26/ 0 赞/ 151 阅读

相关 HTML行内元素、块状元素、行内块状元素的区别

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：　　(1)displ

柔光的暖阳◎/ 2022年02月25日 07:40/ 0 赞/ 189 阅读

相关 HTML行内元素、块状元素、行内块状元素的区别

　HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：　　(1)disp

ゝ一世哀愁。/ 2022年01月10日 10:11/ 0 赞/ 212 阅读