CSS显示模式-编程知识

CSS显示模式简介

CSS显示模式的分类

块元素

行元素

行内块元素

元素显示模式的转换

使块内文字垂直居中的方法

设计简单小米侧边栏（实践）

CSS显示模式简介

元素显示模式就是元素（标签）以什么方式进行显示，比如<div></div>自己占一行，比如一行可以放多个<span></span>。当网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局网页

CSS显示模式的分类

块元素

常见的块元素有以下标签：

标题标签
<h1></h1>~<h6></h6>段落标签
<p></p><div></div>无序列表标签
<ul><li></li><li></li>
</ul>
有序列表标签
<ol><li></li><li></li>
</ol>

其中，<div></div>是典型的块元素标签

块元素标签的特点：

每一个标签独占一行。
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
一个容器及盒子，里面可以放行内或者块级元素

📌

文字类的元素内不能放块级元素，例如<p></p>中不可以放块级元素，特别是不能放<div> </div>同理， <h1></h1>~<h6></h6>等都是文字类块级标签，里面也不能放其他块级元素

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>块元素</title><style>div{width: 200px;height: 200px;background-color: red;}h1 {background-color: blue;}</style>
</head>
<body><h1>这是一段内容</h1><div>这是一段内容</div>
</body>
</html>

效果如下：

如果在文字类标签中放入可以放置任何内容的块元素则会出现问题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>块元素</title><style>div{width: 200px;height: 200px;background-color: red;}h1 {background-color: blue;}</style>
</head>
<body><h1>这是一段内容</h1><p><div>这是一段内容</div></p><div>这是一段内容</div>
</body>
</html>

问题如下：

行元素

常见的行元素标签：

链接标签
<a></a>粗体标签
<strong></strong>
<b></b>斜体标签
<em></em>删除线标签
<del></del>
<s></s>下划线标签
<ins></ins>
<u></u><span></span>

<span></span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素

📌

链接里面不能再放链接，特殊情况链接 <a></a>里面可以放块级元素，但是给 <a></a> 转换一下块级模式最安全

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行元素</title><style>span {width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><span>这是一段内容</span>
</body>
</html>

效果如下：

行内块元素

常见的行内块标签：

<img />
<input />
<td></td>

行内块元素同时具有块元素和行内元素的特点：

和相邻行内元素（或者行内块元素）在一行上，但是他们之间会有空白缝隙。
一行可以显示多个行内块元素（行内元素特点）。
默认宽度就是它本身内容的宽度（行内元素特点）。
高度，行高、外边距以及内边距都可以控制（块级元素特点）。

元素显示模式的转换

即一个模式的元素需要另外一种模式的特性，比如想要增加链接 <a></a>的触发范围

转换方式：

转换为块元素：display: block;
转换为行内元素：display: inline;
转换为行内块：display: inline-block;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行内块元素</title><style>/* 将a标签转换为行内块元素 */a {display: inline-block;width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><a href="#">链接</a><a href="#">链接</a>
</body>
</html>

效果如下：

使块内文字垂直居中的方法

在CSS中没有直接对文字设置垂直居中的属性，但是可以采用行高的设置来解决这个问题

当行高与当前块高度相同时，文字会被上下两个间隙挤在块的中间

同理，当行高大于当前块高度时，则此时因为上下间隙均等分布，所以上面的间隙会占据大部分的块空间，从而使文字向下移动，反之当行高小于当前块高度时，使文字向上移动

设计简单小米侧边栏（实践）

参考图如下：

参考小米商城链接：小米商城

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简单小米侧边栏</title><style>a {/* 设置每一个链接的大小，前提是为块元素 */display: block;width: 237px;height: 50px;/* 设置每一个链接的背景颜色 */background-color: rgb(80, 85, 92);/* 设置每一个链接的文字缩进 */text-indent: 2em;/* 设置每一个链接文字的行高，使内容文本垂直居中 */line-height: 50px;}/* 设置链接默认显示效果 */a:link {color: whitesmoke;text-decoration: none;}/* 设置当鼠标悬停时链接的效果 */a:hover {background-color: rgb(205, 103, 0);}</style>
</head>
<body><a href="#">手机</a><a href="#">电视</a><a href="#">家电</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">耳机 音箱</a><a href="#">健康 儿童</a><a href="#">生活 箱包</a><a href="#">智能 路由器</a><a href="#">电源 配件</a>
</body>
</html>