标签显示模式
-
标签显示模式即：标签以什么样的方式进行显示，比如div自己占一行，span一行可以放很多个
-
作用：
网页的标签非常多，在不同的地方会用到不同类型的标签，以便更好的完成我们的网页
-
标签的类型（分类）
HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。
1.块级元素
-
例
常见的块元素有<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等，其中<div>标签是最典型的块元素 -
块级元素的特点：
- 自己独占一行（霸道）
- 高度、宽度、外边距以及内边距都可以控制
- 宽度默认是容器的100%
- 是一个容器及盒子，里面可以放行内或块级元素
-
注意
- 只有文字才能组成段落，因此p里面不能放块级元素，特别是p不能放div
- 同理，h1~h6,,dt，都是文字类块级标签，里面不能放其他块级元素
2.行内元素
-
例
常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<u>,<span>等，其中<span>是最典型的行内元素，有的地方也称内联元素 -
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
-
注意：
- 链接里面不能再放链接
- 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全
3. 行内块元素
-
例：
在行内元素中有几个特殊的标签--<img/>,<input/>,<td>,可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。 -
行内块元素的特点：
- 和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙，一行可以显示多个
- 默认宽度就是它本身内容的宽度
- 宽度、行高、外边距以及内边距都可以控制。
4.三种模式总结区别
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
5.标签显示模式转换
- 块转行内： display:inline
- 行内转块： display:block
- 块、行内元素转换为行内块： display:inline-block
案例：简单导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*1.变换样式，有大小，一行显示，即 行内块元素*/
a { /*一定要进行行内块转换*/
display: inline-block;
width: 100px;
height: 30px;
background-color: pink;
/*让文字水平居中*/
text-align: center;
color: #fff;
text-decoration: none;
}
a:hover {
background-color: orange;
color: yellow;
}
/*2.鼠标经过变化底色和文字的颜色*/
</style>
</head>
<body>
<a href="#">新闻</a>
<a href="#">体育</a>
<a href="#">汽车</a>
<a href="#">好物</a>
</body>
</html>