元素显示模式
学习目标
image-20230705144809238.png
元素显示模式
了解元素显示模式的作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。元素显示模式就是元素（标签）以什么方式进行显示，比如`<div>`自己占一行，比如一行可以放多个`<span>`。
块元素
HTML 元素一般分为块元素和行内元素两种类型。常见的块元素有`<h1>~<h6>`、`<p>`、`<div>`、`<ul>`、`<ol>`、`<li>`等，其中` <div> `标签是最典型的块元素。
块级元素的特点：
- 自己独占一行。
- 高度，宽度、外边距以及内边距都可以控制。
- 宽度默认是容器（父级宽度）的100%。
- 是一个容器及盒子，里面可以放行内或者块级元素。
注意：
- 文字类的元素内不能使用块级元素。
-
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>。 - 同理，
<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素。
行内元素
常见的行内元素有 `<a>`、`<b>`、`<i>`、`<del>`、`<u>`、`<span>`等，其中`<span>` 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
注意：
- 链接里面不能再放链接。
- 特殊情况链接
<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。
行内块元素
在行内元素中有几个特殊的标签 —`<img />`、`<input />`、`<td>`，它们同时具有块元素和行内元素的特点。
行内块元素的特点：
- 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
- 默认宽度就是它本身内容的宽度（行内元素特点）。
- 高度，行高、外边距以及内边距都可以控制（块级元素特点）。
元素显示模式转换
display 属性规定元素应该生成的块的类型。这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。 |
| inherit | 规定应该从父元素继承 display 属性的值。 |
| table-cell | 此元素会作为一个表格单元格显示（类似<td>和 <th>） |
| table | 此元素会作为块级表格来显示（类似<table>），表格前后带有换行符。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
display: inline;
}
</style>
</head>
<body>
<div>
我不能换行了
</div>
<div>
我不能换行了
</div>
</body>
</html>
课程总结
image-20230705144809238.png
列表项符号
学习目标
image-20230705144856237.png
定义列表项符号
在CSS中，不管是有序列表还是无序列表，我们都是使用list-style-type属性来定义列表项符号。
语法：
list-style-type: 取值;
说明：list-style-type属性是针对ol或者ul元素的，而不是li元素。其中，list-style-type属性取值如下表所示。
在HTML中，对于有序列表和无序列表这两个的列表项符号，都是使用type属性来定义的。使用type属性来定义列表项符号，那是在HTML的“元素属性”中定义的。但是之前说过，结构和样式应该是分离的。
<div align="center">有序列表列表值</div>
| 属性值 | 说明 |
|---|---|
| decimal | 阿拉伯数字：1、2、3…（默认值） |
| lower-roman | 小写罗马数字：i、ii、iii… |
| upper-roman | 大写罗马数字：I、II、III… |
| lower-alpha | 小写英文字母：a、b、c… |
| upper-alpha | 大写英文字母：A、B、C… |
<div align="center">无序列表列表值</div>
| 属性值 | 说明 |
|---|---|
| disc | 实心圆●（默认值） |
| circle | 空心圆○ |
| square | 正方形■ |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ol {
list-style-type:lower-roman;
}
ul{
list-style-type:circle;
}
</style>
</head>
<body>
<h3>有序列表</h3>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<h3>无序列表</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
去除列表项符号
在CSS中，我们也是使用list-style-type属性来去除有序列表或无序列表的列表项符号的。
语法：
list-style-type: none;
说明：
由于列表项符号比较丑，因此在实际开发中，大多数情况下我们都需要使用list-style-type:none;去掉。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ol,ul{
list-style-type:none;
}
</style>
</head>
<body>
<h3>有序列表</h3>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<h3>无序列表</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
列表项图片
不管是有序列表还是无序列表，都有它们自身的列表项符号。不过这些列表项符号都比较丑。如果我们想自定义列表项符号，那该怎么实现呢？
在CSS中，我们可以使用list-style-image属性来定义列表项图片，也就是使用图片来代替列表项符号。
语法：
list-style-image: url(图片路径);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul{
list-style-image: url(img/leaf.png);
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
课程总结
image-20230705144856237.png
表格样式
学习目标
image-20230705144954637.png
表格标题位置
默认情况下，表格标题是在表格的上方。如果想要把表格标题放在表格的下方，应该怎么去实现呢？
在CSS中，我们可以使用caption-side属性来定义表格标题的位置。
语法：
caption-side: 取值;
说明：
caption-side属性取值只有2个，如下表所示。
| 属性值 | 说明 |
|---|---|
| top | 标题在顶部（默认值） |
| bottom | 标题在底部 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table,tr, td,th{
border:1px solid silver;
}
table{
caption-side:bottom;
}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>表行单元格1</td>
<td>表行单元格2</td>
</tr>
<tr>
<td>表行单元格3</td>
<td>表行单元格4</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>表行单元格5</td>
<td>表行单元格6</td>
</tr>
</tfoot>
</table>
</body>
</html>
表格边框合并
从前面的学习中可以知道，表格加入边框后的页面效果中，单元格之间是有一定空隙的。但是在实际开发中，为了让表格更加美观，我们都是要把单元格之间的空隙去除。
在CSS中，我们可以使用border-collapse属性来去除单元格之间的空隙，也就是将两条边框合并为一条。
语法：
border-collapse: 取值;
说明：
border-collapse属性取值只有2个，如下表所示 。
| 属性值 | 说明 |
|---|---|
| separate | 边框分开，有空隙（默认值） |
| collapse | 边框合并，无空隙 |
separate指的是“分离”，而collapse指的是“折叠、瓦解”。从英文意思角度可以让我们更好地理解和记忆。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table,th,td{
border:1px solid silver;
}
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>表行单元格1</td>
<td>表行单元格2</td>
</tr>
<tr>
<td>表行单元格3</td>
<td>表行单元格4</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>表行单元格5</td>
<td>表行单元格6</td>
</tr>
</tfoot>
</table>
</body>
</html>
表格边框间距
在实际开发中，有时候我们却需要定义一下表格边框的间距。在CSS中，我们可以使用border-spacing属性来定义表格边框间距。
语法：
border-spacing: 像素值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table,th,td{border:1px solid silver;}
table{border-spacing: 8px;}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>表行单元格1</td>
<td>表行单元格2</td>
</tr>
<tr>
<td>表行单元格3</td>
<td>表行单元格4</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>表行单元格5</td>
<td>表行单元格6</td>
</tr>
</tfoot>
</table>
</body>
</html>
课程总结
image-20230705144954637.png
