学习笔记，仅供参考，有错必纠
CSS
标签的类型(显示模式)
HTML标记一般分为块标记和行内标记2种类型，它们也称块元素和行内元素。
块元素
- 每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
- 块级元素容器可以容纳多个嵌套的块级标签或行内标签。
- 常见的块元素有
<h1> ~ <h6>, <p>, <div>, <ul>, <ol>, <li>等，其中<div>标记是最典型的块元素。
行元素
- 行内元素不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
- 行内元素不能嵌套块级标签，只能嵌套其他的行内标签。
- 常见的行内标签有
<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>
页面：
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>
页面：
可以看到，行内块元素可以设置宽高，但是行内元素却不能。
- 行内元素,块级元素,行内块元素之间的对比
| 是否可以设置宽高 | 边距 | 是否可以独占行 | |
|---|---|---|---|
| 行内元素 | × | 左右 | × |
| 块级元素 | √ | 上下左右 | √ |
| 行内块元素 | √ | 左右 | × |