标签显示模式

最新推荐文章于 2023-03-06 15:14:53 发布

山山而川-T

最新推荐文章于 2023-03-06 15:14:53 发布

阅读量399

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/Valentine_T/article/details/107429208

版权

HTML+CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1. 标签显示模式

什么是标签显示模式？

 标签以什么方式进行显示，比如div自己占一行，比如span一行可以放很多个。

作用

网页的标签非常多，在不同地方使用不同类型的标签，可以更好的完成我们的网页需求。

标签的分类

HTML标签一般分为块标签和行内标签两种类型，也称块元素和行内元素。

2. 块级元素

块级元素特点

 （1）块级元素独占一行
 （2）宽度、高度、边距都是可控的
 （3）宽度默认是浏览器的100%
 （4）是一个容器及盒子，里面可以放行内或者块级元素

注意

 （1）只要文字才能组成段落，因此p标签里面不能放块级元素，特别是p不能放div
 （2）同理还有这些标签h1、h2、h3、h4、h5、h6、dt，他们都是文字类块级标签，里面不能放其他块级元素。

3. 行内元素

行内元素的特点

 （1）相临行内元素在一行上，一行可以显示多个。
 （2）高度、宽度直接设置是无效的。
 （3）默认宽度是就是它本身内容的宽度
 （4）行内元素只能容纳文本或者其他行类元素

注意

 （1）链接里面不能再放链接
 （2）特殊情况a里面可以放块级元素，但是给a转换成块级元素最安全

4. 行内块元素

例如

 在行内元素中有几个特殊的标签：<img/>、<input/>、<td/>，可以对他们设置宽度和对齐属性，有些资料称他们为行内块元素。

行内块元素的特点

 （1）和相临行内元素（行内块）在一行上，但是之间会有空白间隙，一行可以显示多个。
 （2）默认宽度是它本身内容的宽度。
 （3）高度、行高、边距都是可以控制的。

5. 三种模式总结区别

在这里插入图片描述

6. 标签显示模式转换

把行内元素转换为块级元素：display:block;
把块级元素转换成行类元素：display:inline;
块、行元素转换为行内块元素：display:inline-block;

7.简单导航栏

在这里插入图片描述

注意：

	（1）在实际开发中标签是不能直接设置高度和宽度的，这里需要进行模式转换，将其转换为行内块元素。
	（2）此外，我们看见例图中，导航栏里面的文字是偏上的，要使文字居中我们可以：让行高等于高度

即：行高等于高度会让单行文字垂直居中。

<style type="text/css">
		/* 1.变化样式 有大小 一行显示 行内块元素 */
		a {
			/* 进行模式转换 行内块 */
			display: inline-block;
			width: 100px;
			height: 30px;
			line-height: 30px;
			background-color:pink;
			text-align: center;
			color: #fff;
			text-decoration: none;
		}
		/* 2. 鼠标经过 变化底色 和 颜色文字 */
		a:hover{
			background-color: orange;
			color: yellow;
		}
		</style>
</head>
<body>
	<a href="#">新闻</a>
	<a href="#">体育</a>
	<a href="#">汽车</a>
</body>

在这里插入图片描述