Web 前端学习之元素类型

最新推荐文章于 2024-02-25 13:56:28 发布

菇毒

最新推荐文章于 2024-02-25 13:56:28 发布

阅读量417

点赞数

分类专栏： web 前端学习文章标签： html html5 css

本文链接：https://blog.csdn.net/weixin_43960383/article/details/120519686

版权

web 前端学习专栏收录该内容

90 篇文章 4 订阅

订阅专栏

Web 前端学习之元素类型

1. 定义块元素、行内元素、行内块元素
2. 块元素
3. 行内元素
4. 行内元素和块元素的相互转换
5. 行内块元素
6. 块标签转行内标签
7. 行内标签转换为行内块标签
8. 完整代码如下
结束语

1. 定义块元素、行内元素、行内块元素

<style type="text/css">
			.bios {
				/* 设置宽高 */
				width: 150px;
				height: 150px;
				background-color: #0ff;
				border: 1px solid #f0f;
			}
			
			span {
				/* 设置宽高 */
				width: 150px;
				height: 150px;
				background-color: #f00;
				border: 1px solid pink;
			}
			
			img {
				width: 100px;
				height: 100px;
			}

2. 块元素

<div class="bios" >3</div>
<div class="bios">2</div>
<div class="bios">1</div>

3. 行内元素

<span>s1</span>
<span>s2</span>
<span>s3</span>

4. 行内元素和块元素的相互转换

块元素转行内元素（display: inline）

<!-- 将块元素转换为行内元素  display: inline; -->
<h1 style="width: 50px;height: 50px;background-color: #f0f;border: 1px solid #0f0; display: inline;">h1</h1>
<h1 style="width: 50px;height: 50px;background-color: #f0f;border: 1px solid #0f0; display: inline;">h2</h1>
<h1 style="width: 50px;height: 50px;background-color: #f0f;border: 1px solid #0f0; display: inline;">h3</h1>

行内元素转块元素（display: block）

<b style="width: 50px;height: 50px;background-color: #ff0;border: 1px solid #0f0; display: block;">b4</b>
<b style="width: 50px;height: 50px;background-color: #ff0;border: 1px solid #0f0; display: block;">b5</b>
<b style="width: 50px;height: 50px;background-color: #ff0;border: 1px solid #0f0; display: block;">b6</b>

5. 行内块元素

<img src="../image/wu1.jpg" alt="">
<img src="../image/wu1.jpg" alt="">
<img src="../image/wu1.jpg" alt="">

6. 块标签转行内标签

<h2 style="width: 50px;height: 50px;background-color: pink;display: inline-block;">h2</h2>
<h2 style="width: 50px;height: 50px;background-color: pink;display: inline-block;">h2</h2>
<h2 style="width: 50px;height: 50px;background-color: pink;display: inline-block;">h2</h2>

7. 行内标签转换为行内块标签

<em style="width: 50px;height: 50px;background-color: rgb(23,233,0);display: inline-block;">e7</em>
<em style="width: 50px;height: 50px;background-color: rgb(23,233,0);display: inline-block;">e8</em>
<em style="width: 50px;height: 50px;background-color: rgb(23,233,0);display: inline-block;">e9</em>

8. 完整代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.bios {
				/* 设置宽高 */
				width: 150px;
				height: 150px;
				background-color: #0ff;
				border: 1px solid #f0f;
			}
			
			span {
				/* 设置宽高 */
				width: 150px;
				height: 150px;
				background-color: #f00;
				border: 1px solid pink;
			}
			
			img {
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 元素类型 -->
		<!-- 块元素 -->
		<!-- 一个块元素独占一行  可设置宽度高度 -->
		<!-- 常见的块元素  div  p  h1-h6 -->
		<div class="bios" >3</div>
		<div class="bios">2</div>
		<div class="bios">1</div>
		<br><br><br><br><br>
		<!-- 行内元素 -->
		<!-- 多个元素共占一行 -->
		<!-- 不能设置宽度高度 -->
		<!-- 常见的行内元素  span a  strong  b em i ins u  bel  s -->
		<span>s1</span>
		<span>s2</span>
		<span>s3</span>
		<br><br><br><br><br>
		<!-- 行内元素和块元素可相互转换 -->
		<!-- 将块元素转换为行内元素  display: inline; -->
		<h1 style="width: 50px;height: 50px;background-color: #f0f;border: 1px solid #0f0; display: inline;">h1</h1>
		<h1 style="width: 50px;height: 50px;background-color: #f0f;border: 1px solid #0f0; display: inline;">h2</h1>
		<h1 style="width: 50px;height: 50px;background-color: #f0f;border: 1px solid #0f0; display: inline;">h3</h1>
		<br><br><br><br><br>
		<!-- 将行内元素转换为块元素 -->
		<b style="width: 50px;height: 50px;background-color: #ff0;border: 1px solid #0f0; display: block;">b4</b>
		<b style="width: 50px;height: 50px;background-color: #ff0;border: 1px solid #0f0; display: block;">b5</b>
		<b style="width: 50px;height: 50px;background-color: #ff0;border: 1px solid #0f0; display: block;">b6</b>
		<br><br><br><br>
		<!-- 行内块元素 -->
		<!-- 既能设置宽度高度  又可以在一行显示 -->
		<!-- 常见的行内块元素 img input -->
		<img src="../image/wu1.jpg" alt="">
		<img src="../image/wu1.jpg" alt="">
		<img src="../image/wu1.jpg" alt="">
		<br><br><br><br>
		<!-- 块元素  和  行内元素  可转换为行内元素 -->
		<!-- 将块标签转换为行内块标签 -->
		<h2 style="width: 50px;height: 50px;background-color: pink;display: inline-block;">h2</h2>
		<h2 style="width: 50px;height: 50px;background-color: pink;display: inline-block;">h2</h2>
		<h2 style="width: 50px;height: 50px;background-color: pink;display: inline-block;">h2</h2>
		<br><br><br><br>
		<!-- 将行内标签转换为行内块标签 -->
		<em style="width: 50px;height: 50px;background-color: rgb(23,233,0);display: inline-block;">e7</em>
		<em style="width: 50px;height: 50px;background-color: rgb(23,233,0);display: inline-block;">e8</em>
		<em style="width: 50px;height: 50px;background-color: rgb(23,233,0);display: inline-block;">e9</em>
		<!-- 行内标签	块标签	行内块标签	三者可互相转换 -->
		<br><br>
	</body>
</html>

执行结果如下所示：
2021-9-28

结束语

若这篇文章有帮到你，给个赞，收个藏，欢迎大家留言评论；
若文章有什么错误，欢迎大家指教。

菇毒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web 前端学习之元素类型

Web 前端学习之元素标签完整代码如下完整代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .bios { /* 设置宽高 */ width: 100px; height: 100px; background-color: #
复制链接

扫一扫