html css层叠样式基础（内联元素和块元素）（二）

最新推荐文章于 2020-12-24 15:17:48 发布

咸鸭蛋炒饭

最新推荐文章于 2020-12-24 15:17:48 发布

阅读量428

点赞数

分类专栏： HTML5基础篇文章标签： css html

本文链接：https://blog.csdn.net/u010853130/article/details/54894733

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.块元素和内联元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<!--
			
			块元素（block）
				- 在页面中块元素会独占一行，不会与其他元素出现在一行
				- 无论内容多少，块元素总会独占一行
				- 学习过的块元素
					p h1~h6 ul ol dl li div....
				- div是一个块元素，没有语义，在页面中使用div对页面进行布局
				
			内联元素或行内元素（inline）	
				- 内联元素不会独占一行，只占自身内容的大小
				- 学习过的内联元素
					a img span
				- 可以使用一个内联元素来选中一段文字，来为文字设置样式
				
				
			- 在页面中主要使用块元素进行布局，使用内联元素来选中文字，
				在页面中一般会使用块元素去包含内联元素，而不适用内联元素去包含块元素
				a元素可以包含任意元素，除了他本身
				p元素中不能包含任何的块元素
				
				
			
		-->
		<div style="background-color: red; width: 200px;">我是一个div</div>
		
		<div style="background-color: yellow; width: 200px;">我也是一个div</div>
		
		
		<span style="background-color:green">我是一个span</span>
		<span style="background-color:blue">我也是一个span</span>
		
		<a href="#">超链接一</a>
		<a href="#">超链接二</a>
		
		<span id="s1">你好，我是一段文字</span>
		
		
		<div>
			
			<div></div>
			
			<span>
				
				
			</span>
			
		</div>
		
		<a href="#">
			<div>我是一个div</div>
		</a>
		
		<!--错误的写法-->
		<a href="#"><a href="#">奇怪的超链接</a></a>
		
		<hr />
		
		<!--错误的写法-->
		<p>
			我是一个p元素
			<div>我是一个div</div>
		</p>
		
		
		
	</body>
</html>

咸鸭蛋炒饭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
html css层叠样式基础（内联元素和块元素）（二）

1.块元素和内联元素 <!-- 块元素（block） - 在页面中块元素会独占一行，不会与其他元素出现在一行 - 无论内容多少，块元素总会独占一行 - 学习过的块元素 p h1~h6 ul ol dl li div.... - div是一个块元素，没有语义，在页面中使用div对页面进行布局
复制链接

扫一扫