CSS块级、行级、行级块标签、display、div、span

最新推荐文章于 2024-10-30 19:49:11 发布

小智RE0-走在路上

最新推荐文章于 2024-10-30 19:49:11 发布

阅读量980

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/MrTumnus/article/details/114887797

CSS 专栏收录该内容

7 篇文章

订阅专栏

文章目录

块级标签
行级标签
行级块标签
display
div 和span

块级标签

无论内容有多少,都会占据一行;

默认宽:与父级标签一致;
默认高:0 ；或者与内容高度一致。

但是可以通过 width和height来设置标签的宽高;

包括: < p>、< h1 >、< ul >、< ol >、< hr / >等。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>这是一个段落</p><!--段落标签-->
		
		<h1>一级标题</h><!--标题标签-->
		<ul>
			<li>列表1</li>
			<li>列表2</li>
		</ul>
		
		<hr/><!--分割标签-->
		
		
	</body>
</html>

运行：

在这里插入图片描述

行级标签

只占自身大小,不会占一行;

即使设置宽高也是无效的。

包括 < font >、< b >、< i >、< a >等。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 尝试给行级标签设置宽高,并不会发生变化 */
			*{
				width: 600px;
				height: 100px;
			}/* 通配选择器,选择所有标签 */
		</style>
	</head>
	<body>
		<b>加粗字体</b><!--b标签加粗当前字体--> 旁边的文本
		
		<i>斜体字体</i><!--i标签将字体变为斜体-->
		
	    <s>文本文本文本</s><!---s标签设置穿过文本的一条线-->
		 
		<a href=""> 这是链接</a>
		
		<p>段落</p><!--这是块级标签，作为设置宽高的对比-->
	</body>
</html>

运行：浏览器页面点击F12，通过网页调试查看设置的宽高，块级标签p标签受到影响，而行级标签都没有受到影响。

在这里插入图片描述

行级块标签

可以设置大小,不会占一行;

包括 < img/> ; < input />;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="img/tx.png" /><!-- style="width: 500px; height: 200px;"-->
		旁边的文本

		<!--图片标签，先把设置的宽高注释掉，对比设置前后的变化-->
		<input type="text" /><!--表单文本输入框-->
	</body>
</html>

运行：

在这里插入图片描述
设置宽高之后：

在这里插入图片描述

一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签。
a可以包含任何标签，除去a本身；
p标签不能包含任何块级标签。

display

block ：设置标签为块标签 ;
inline ：设置标签为行级标签 ;
inline-block ：设置标签为行级块标签 ;
none ：隐藏标签（标签将在页面中完全消失,不会占用网页空间）。

div 和span

div是一个纯净版的块级标签；可以设置宽高。

span是一个纯净版的行级标签；给定宽高是无效的。

没有任何附加功能。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<hr/>
		<div style="width: 200px; height: 100px;">
			div标签的属性默认
		</div>
		<span style="width: 500px;height: 200px;">
			span标签的编辑属性;行级的,给定宽高是无效的;
		</span>
	</body>
</html>