当前位置：首页 > news >正文

CSS-2：CSS的元素显示模式

news 2025/11/17 10:18:54

一.CSS的元素显示模式

作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解它们的特点可以更好地布局我们的网页

元素显示模式就是元素（标签）以什么方式进行显示

比如div自己占一行，比如一行可以放多个span

HTML元素一般分为块元素和行内元素两种类型

1.块元素：

常见的块元素：<h1>~<h6> <p> <div> <ul> <ol> <li>等

其中<div>是最典型的块元素

块级元素的特点：

比较霸道，自己独占一行
高度、宽度、外边距以及内边距都可以控制
宽度默认是容器（父级容器）的100%
是一个容器和盒子，里面可以放行内元素或块级元素

注意：

文字类的元素中不能放块级元素，比如<p>标签内主要用来放文字，不能放<div>标签

2.行内元素

常见的行内元素（内联元素）有<a> <strong> <em> <b> <del> <span>等

其中<span>是最典型的行内元素

行内元素的特点：

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

注意：

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

3.行内块元素

在行内元素中有几个特殊的元素，如<img> <input> <td> ，它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素

特点：

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

4.元素显示模式的转换

特殊情况下，我们需要元素的显示模式的转换

比如，<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 {width: 150px;height: 60px;color: green;display: block;background-color: skyblue;}div {width: 200;height: 80;background-color: yellow;display: inline;}span {width: 300;height: 150;background-color: darkgreen;display: inline-block;}</style>
</head><body><a href="#">珍惜时间</a><p><a href="#">本来2025年的暑假是不会被浪费掉的</a></p><p><a href="#">以后不要再说“本来我可以怎么怎么样了”</a></p><div>我是第一个块级元素</div><div>我是第二个块级元素</div><span>我是一个行内元素</span><span>我也是一个行内元素</span><a href="https://www.baidu.com">点此打开百度</a>
</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>
</head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 儿童</a>
</body></html>

效果：

在<head>标签内加上<style>CSS标签：a.{display: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 {display: block;}</style>
</head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 儿童</a>
</body></html>

效果：

再加上行高，行宽，背景颜色，height,width,background-color

<style>a {display: block;width: 230px;height: 40px;background-color: #55585a;}</style>

效果：

模仿小米官网的样式，文字颜色改为白色，文字不要下划线，文字与边框有一定距离

<style>a {display: block;width: 230px;height: 40px;background-color: #55585a;font-size: 14px;color: #fff;/*white*/text-decoration: none;text-indent: 2em;}</style>

效果：

然后还要设置鼠标光标经过链接时，要改变背景颜色

a:hover {background-color: #ff6700;}

效果：

设置单行文字垂直居中：让文字行高等于盒子行高

行高line-height 盒子高度heihgt

盒子高度等于行高加文字上下的空隙的高度，让line-height=height，由于文字上下的空隙是一样的，则相当于文字就位于盒子的中间部分，即实现了单行文字的垂直居中

如果行高小于盒子高度，则文字会偏上

如果行高大于盒子高度，则文字会偏下（还有可能到盒子范围外面去了）

 <style>a {display: block;width: 230px;height: 40px;background-color: #55585a;font-size: 14px;color: #fff;/*white*/text-decoration: none;text-indent: 2em;line-height: 40px;}a:hover {background-color: #ff6700;}</style>

效果：