HTML中块级元素和行内元素的区别

最新推荐文章于 2024-07-30 16:49:30 发布

Rollinmu

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量765

点赞数 1

分类专栏： HTML 文章标签： HTML 前端

本文链接：https://blog.csdn.net/weixin_44942740/article/details/89489231

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML中块级元素和行内元素的区别：

块级元素

总是在新行上开始；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度；
它可以容纳内联元素和其他块元素

行内元素

和其他元素都在一行上；
高，行高及外边距和内边距不可改变；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下：

设置宽度width 无效。设置高度height 无效，可以通过line-height来设置；
设置margin只有左右margin有效，上下无效；
设置padding只有左右padding有效，上下则无效。
注意元素范围是增大了，但是对元素周围的内容是没影响的。

区别：

行内元素会在一条直线上排列，都是同一行的，水平方向排列。

块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
行内元素与块级元素属性的不同，主要是盒模型属性上：
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

html中的块级元素：

标签	描述
<div>	定义文档中的节。
<address>	定义地址。
<article>	定义文章。
<aside>	定义页面内容之外的内容。
<audio>	定义声音内容。
<blockquote>	定义长的引用。
<canvas>	定义图形。
<caption>	定义表格标题。
<fieldset>	定义围绕表单中元素的边框。
<details>	定义元素的细节。
<section>	定义 section。
<header>	定义 section 或 page 的页眉。
<footer>	定义 section 或 page 的页脚。
<h1> to <h6>	定义 HTML 标题。
<form>	定义供用户输入的 HTML 表单。
<legend>	定义 fieldset 元素的标题。
<menu>	定义命令的列表或菜单。
<meter>	定义预定义范围内的度量。
<nav>	定义导航链接。
<output>	定义输出的一些类型。
<p>	定义段落。
<pre>	定义预格式文本。
<time>	定义日期/时间。
<noframes>	定义针对不支持框架的用户的替代内容。
<noscript>	定义针对不支持客户端脚本的用户的替代内容。
<figure>	定义媒介内容的分组，以及它们的标题。
<figcaption>	定义 figure 元素的标题。

以及表格、列表的标签。

html中的行内元素：

标签	描述
<a>	定义锚。
<abbr>	定义缩写。
<acronym>	定义只取首字母的缩写。
<b>	定义粗体字。
<bdo>	定义文字方向。
<big>	定义大号文本。
<br>	定义简单的折行。
<button>	定义按钮 (push button)。
<cite>	定义引用(citation)。
<code>	定义计算机代码文本。
<command>	定义命令按钮。
<dfn>	定义定义项目。
<del>	定义被删除文本。
<em>	定义强调文本。
<embed>	定义外部交互内容或插件。
<i>	定义斜体字。
<img>	定义图像。
<input>	定义输入控件。
<kbd>	定义键盘文本。
<label>	定义 input 元素的标注。
<map>	定义图像映射。
<mark>	定义有记号的文本。
<objec>	定义内嵌对象。
<progress>	定义任何类型的任务的进度。
<q>	定义短的引用。
<samp>	定义计算机代码样本。
<select>	定义选择列表（下拉列表）。
<small>	定义小号文本。
<span>	定义文档中的节。
<strong>	定义强调文本。
<sub>	定义下标文本。
<sup>	定义上标文本。
<textarea>	定义多行的文本输入控件。
<time>	定义日期/时间。
<tt>	定义打字机文本。
<var>	定义文本的变量部分。
<video>	定义视频。
<wbr>	定义可能的换行符。

实例：

块级元素：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title></title>
  <style type="text/css">
	.box1{
		background-color:#ff0000;
	}
	.box2{
		background-color:#ffcc00;
	}
	.box3{
		background-color:#ccff00;
	}
  </style>
 </head>
 <body>
  <div class="box1">we</div>
  <div class="box2">ssd</div>
  <div class="box3">ga</div>
  
 </body>
</html>

效果如下：
在这里插入图片描述
给box1设置width、height，box2、box3不设置

.box1{
		width:100px;
    	height:100px;
		background-color:#ff0000;
	}
	.box2{
		background-color:#ffcc00;
	}
	.box3{
		background-color:#ccff00;
	}

效果如下：
在这里插入图片描述

行内元素：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title></title>
  <style type="text/css">
	.box1{
		background-color:#ff0000;
	}
	.box2{
		background-color:#ffcc00;
	}
	.box3{
		background-color:#ccff00;
	}
  </style>
 </head>
 <body>
  <span class="box1">we</span>
  <span class="box2">ssd</span>
  <span class="box3">ga</span>
  
 </body>
</html>

效果如下：
在这里插入图片描述
给box1设置width、height，box2、box3不设置

.box1{
		width:300px;
		height:400px;
		background-color:#ff0000;
	}
	.box2{
		background-color:#ffcc00;
	}

效果跟原来一样：
为图片描述
给box1设置line-height、margin、padding，box2、box3不设置

.box1{
		line-height:400px;
		margin:100px;
		padding:100px;
		background-color:#ff0000;
	}
	.box2{
		background-color:#ffcc00;
	}
	.box3{
		background-color:#ccff00;
	}

效果如下：
在这里插入图片描述

在块级元素里面放行内元素：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title></title>
  <style type="text/css">
	.box1{
		height:100px;
		background-color:#ff0000;
	}
	.box2{
		background-color:#ffcc00;
	}
	.box3{
		background-color:#ccff00;
	}
  </style>
 </head>
 <body>
  <div class="box1">we
	  <span class="box2">ssd</span>
	  <span class="box3">ga</span>
  </div>
  
  
 </body>
</html>

在这里插入图片描述

在块级元素里面放块级元素：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title></title>
  <style type="text/css">
	.box1{
		height:100px;
		background-color:#ff0000;
	}
	.box2{
		background-color:#ffcc00;
	}
	.box3{
		background-color:#ccff00;
	}
  </style>
 </head>
 <body>
  <div class="box1">we
	  <div class="box2">ssd</div>
	  <div class="box3">ga</div>
  </div>
  
  
 </body>
</html>

在这里插入图片描述

在块级元素里面放块级元素并设置为inline-block（行内块元素）：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title></title>
  <style type="text/css">
	.box1{
		height:100px;
		background-color:#ff0000;
	}
	.box2{
		display:inline-block;
		background-color:#ffcc00;
	}
	.box3{
		display:inline-block;
		background-color:#ccff00;
	}
  </style>
 </head>
 <body>
  <div class="box1">we
	  <div class="box2">ssd</div>
	  <div class="box3">ga</div>
  </div>
  
  
 </body>
</html>

在这里插入图片描述

在块级元素里面多重嵌套放块级元素，将二级块元素设为inline-block（行内块元素）：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title></title>
  <style type="text/css">
	.box1{
		height:100px;
		background-color:#ff0000;
	}
	.box2{
		display:inline-block;
		background-color:#ffcc00;
	}
	.box3{
		background-color:#ccff00;
	}
  </style>
 </head>
 <body>
  <div class="box1">we
	  <div class="box2">ssd
		<div class="box3">ga</div> 
	  </div>
	  
  </div>
  
  
 </body>
</html>

在这里插入图片描述

Rollinmu

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML中块级元素和行内元素的区别

HTML中块级元素和行内元素的区别：块级元素总是在新行上开始；高度，行高以及外边距和内边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度；它可以容纳内联元素和其他块元素行内元素和其他元素都在一行上；高，行高及外边距和内边距不可改变；宽度就是它的文字或图片的宽度，不可改变内联元素只能容纳文本或者其他内联元素对行内元素，需要注意如下：设置宽度width 无效...
复制链接

扫一扫

专栏目录