目录
CSS显示模式简介
元素显示模式就是元素(标签)以什么方式进行显示,比如<div></div>
自己占一行,比如一行可以放多个<span></span>
。当网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局网页
CSS显示模式的分类
块元素
常见的块元素有以下标签:
html
标题标签
<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>
等都是文字类块级标签,里面也不能放其他块级元素
示例代码:
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>
<div>这是一段内容</div>
</body>
</html>
效果如下:
如果在文字类标签中放入可以放置任何内容的块元素则会出现问题
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>
问题如下:
行元素
常见的行元素标签:
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>
转换一下块级模式最安全
示例代码:
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>
span {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<span>这是一段内容</span>
</body>
</html>
效果如下:
行内块元素
常见的行内块标签:
html
<img />
<input />
<td></td>
行内块元素同时具有块元素和行内元素的特点:
- 和相邻行内元素(或者行内块元素)在一行上,但是他们之间会有空白缝隙。
- 一行可以显示多个行内块元素(行内元素特点)。
- 默认宽度就是它本身内容的宽度(行内元素特点)。
- 高度,行高、外边距以及内边距都可以控制(块级元素特点)。
元素显示模式的转换
即一个模式的元素需要另外一种模式的特性,比如想要增加链接 <a></a>
的触发范围
转换方式:
- 转换为块元素:
display: block;
- 转换为行内元素:
display: inline;
- 转换为行内块:
display: inline-block;
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>
/* 将a标签转换为行内块元素 */
a {
display: inline-block;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<a href="#">链接</a>
<a href="#">链接</a>
</body>
</html>
效果如下:
使块内文字垂直居中的方法
在CSS中没有直接对文字设置垂直居中的属性,但是可以采用行高的设置来解决这个问题
当行高与当前块高度相同时,文字会被上下两个间隙挤在块的中间
同理,当行高大于当前块高度时,则此时因为上下间隙均等分布,所以上面的间隙会占据大部分的块空间,从而使文字向下移动,反之当行高小于当前块高度时,使文字向上移动
设计简单小米侧边栏(实践)
参考图如下:
参考小米商城链接:小米商城
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>
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>