学习笔记，仅供参考，有错必纠
文章目录
- CSS
- 标签的类型(显示模式)
- 块元素
- 行元素
- 行内块元素
- 三种模式的区别和联系
- display改变标签显示模式
CSS
标签的类型(显示模式)
HTML标记一般分为块标记和行内标记2种类型，它们也称块元素和行内元素。
块元素
- 每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
- 块级元素容器可以容纳多个嵌套的块级标签或行内标签。
- 常见的块元素有
<h1> ~ <h6>, <p>, <div>, <ul>, <ol>, <li>
<div>
- 块元素的宽度默认是容器（父级宽度）的100%
- p标签内不能放div标签，段落里面不能放块级元素，同理，文字类块级标签(h1,h2,h3,h4,h5,h6,dt)内，不能放其他块级元素。
行元素
- 行内元素不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，默认宽度就是它本身内容的宽度，常用于控制页面中文本的样式。
- 行内元素不能嵌套块级标签，只能嵌套其他的行内标签。
- 常见的行内标签有
<strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <a>, <span>
<span>
- 举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dispaly</title>
</head>
<body>
<!-- 行内元素 -->
<span>我是span</span>
<strong>我是strong标签</strong>
<s>我是一个s标签</s>
<!-- 块级标签 -->
<div>
我是一个div
</div>
</body>
</html> 页面：
行内块元素
- 行内块元素和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙，一行可以显示多个。
- 其默认宽度就是它本身内容的宽度。
- 行内块高度，行高、外边距以及内边距都可以控制。
- 常见的行内块标签有
<img />
<input />
<td>
三种模式的区别和联系
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
display改变标签显示模式
- display为inline或block
display可以控制标签的显示模式，比如，将块级元素(例如
<div>
)按照行级标签的形式显示，再比如，将行级标签(例如
<strong>
)按照块级标签的形式显示，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dispaly</title>
<style>
div {
background-color: silver;
display: inline; /* 可以让块元素变成行内显示模式*/
}
strong {
display: block; /* 可以让行内元素变成块显示模式*/
background-color: yellow;
}
</style>
</head>
<body>
<!-- 行内元素 -->
<span>我是span</span>
<strong>我是strong标签</strong>
<s>我是一个s标签</s>
<!-- 块级标签 -->
<div>
我是一个div
</div>
</body>
</html> 页面：
- display为none
若我们把display设置为none，那么这个标签就会被从页面中移除，不进行显示，也不影响页面布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dispaly</title>
<style>
div {
background-color: silver;
display: inline; /* 可以让元素编成行内模式的标签*/
}
strong {
/* display: block; */
display: none;
background-color: yellow;
}
</style>
</head>
<body>
<!-- 行内元素 -->
<span>我是span</span>
<strong>我是strong标签</strong>
<s>我是一个s标签</s>
<!-- 块级标签 -->
<div>
我是一个div
</div>
</body>
</html> 页面：
- visibility为hidden
我们也可以设置visibility为hidden，将标签隐藏起来，但是它和
display: none
有点不同，它仅仅是不显示标签，但是依然占用我们的页面空间：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dispaly</title>
<style>
div {
background-color: silver;
display: inline;
}
strong {
visibility: hidden;
background-color: yellow;
}
</style>
</head>
<body>
<!-- 行内元素 -->
<span>我是span</span>
<strong>我是strong标签</strong>
<s>我是一个s标签</s>
<!-- 块级标签 -->
<div>
我是一个div
</div>
</body>
</html> 页面：
- display为inline-block
我们先来看下面一段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dispaly</title>
<style>
div {
background-color: silver;
display: inline-block;
height: 100px;
}
span {
background-color: blue;
height: 200px;
}
</style>
</head>
<body>
<!-- 行内元素 -->
<span>我是span</span>
<strong>我是strong标签</strong>
<s>我是一个s标签</s>
<!-- 块级标签 -->
<div>
我是一个行内块div
</div>
</body>
</html> 页面：
可以看到，行内块元素可以设置宽高，但是行内元素却不能。
- 行内元素,块级元素,行内块元素之间的对比
| 是否可以设置宽高 | 边距 | 是否可以独占行 | |
| 行内元素 | × | 左右 | × |
| 块级元素 | √ | 上下左右 | √ |
| 行内块元素 | √ |