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

【Java Web学习 | 第三篇】CSS(2) - 元素显示模式

news 2025/11/2 13:31:45
🌈 个人主页: Hygge_Code
🔥 热门专栏:从0开始学习Java | Linux学习| 计算机网络
💫 个人格言: “既然选择了远方，便不顾风雨兼程”

在这里插入图片描述

文章目录

    • CSS元素显示模式
      • 2.1 什么是元素显示模式？
      • 2.2 三大核心显示模式详解
        • 1. 块级元素（Block Level Elements）
        • 2. 行内元素（Inline Elements）
        • 3. 行内块元素（Inline-Block Elements）
      • 2.3元素显示模式的转换语法
        • 1. 转为块级元素：`display: block`
        • 2. 转为行内元素：`display: inline`
        • 3. 转为行内块元素：`display: inline-block`
      • 2.4 实战案例：小米侧边栏实现
      • 2.5综合代码演示
    • 学习资源推荐🐦‍🔥

CSS元素显示模式

2.1 什么是元素显示模式？

元素显示模式指的是HTML元素在页面中默认的表现形态，它决定了元素的排列方式、尺寸计算规则和嵌套关系。简单来说，就是元素"如何展示自己"以及"如何与其他元素相处"。

浏览器会为每个HTML标签预设默认的显示模式，例如：

  • <div>默认占据一整行（块级模式）
  • <span>默认与其他元素并排显示（行内模式）
  • <input>既可以并排显示又能设置宽高（行内块模式）

我们可以通过CSS的display属性修改元素的显示模式，这是实现灵活布局的关键技巧。

2.2 三大核心显示模式详解

1. 块级元素（Block Level Elements）

典型标签：<div>、<h1>-<h6>、<p>、<ul>、<ol>、<li>、<header>、<footer>等

核心特性：

  • 独占一行：无论内容多少，都会单独占据一整行空间
  • 尺寸可控：可以通过width和height属性设置宽高
  • 默认宽度：未设置时默认占满父容器的100%宽度
  • 边距生效：margin和padding的四个方向（上下左右）都能正常生效
  • 容器特性：可以嵌套其他块级元素或行内元素

代码示例：

.change {height: 200px;background-color: aqua;
}

注意事项：

  • 文字类块元素（如<p>、<h1>-<h6>）不能嵌套其他块级元素，例如<p>中不能放<div>
  • 块元素虽然可以嵌套行内元素，但语义上应保持合理（如导航容器嵌套链接）
2. 行内元素（Inline Elements）

典型标签：<span>、<a>、<strong>、<em>、<b>、<i>、<del>、<ins>等

核心特性：

  • 并肩排列：多个行内元素可以在同一行显示
  • 尺寸受限：width和height设置无效，尺寸由内容决定
  • 边距限制：margin和padding仅左右方向生效，上下方向不影响布局
  • 嵌套限制：只能容纳文本或其他行内元素，不能嵌套块级元素

代码示例：

.span1 {/* 宽高设置无效 */width: 100px;height: 100px;/* 背景色等样式有效 */background-color: hotpink;
}

注意事项：

  • 链接<a>不能嵌套其他链接
  • 行内元素虽然不能设置宽高，但可以通过转换显示模式实现（见后文）
3. 行内块元素（Inline-Block Elements）

典型标签：<img>、<input>、<td>等

核心特性：

  • 兼具两者优点：
    • 可以和其他行内元素并排显示（行内元素特性）
    • 可以设置width、height（块级元素特性）
    • margin和padding四个方向均有效（块级元素特性）
  • 默认宽度：由内容决定（类似行内元素）
  • 间隙特性：相邻行内块元素之间会有默认空白间隙

代码示例：

input {width: 249px;height: 50px;
}

2.3元素显示模式的转换语法

实际开发中，我们经常需要改变元素的默认显示模式以实现特定布局。CSS提供了三种主要转换方式：

1. 转为块级元素：display: block

适用场景：

  • 需要让行内元素（如<a>）独占一行
  • 需要为行内元素设置宽高
  • 需要让链接等可点击区域扩大
.a1 {width: 150px;height: 50px;/* 转换为块级元素 */display: block;background-color: pink;
}
2. 转为行内元素：display: inline

适用场景：

  • 需要让块级元素（如<div>）并排显示
  • 需要取消块级元素的默认独占一行特性
.change2 {/* 转换为行内元素 */display: inline;
}
3. 转为行内块元素：display: inline-block

适用场景：

  • 需要元素并排显示且能设置宽高（如导航按钮、表单控件）
  • 需要保持行内特性的同时拥有块级元素的尺寸控制能力
.change3 {width: 300px;height: 30px;background-color: skyblue;/* 转换为行内块元素 */display: inline-block;
}

2.4 实战案例：小米侧边栏实现

以小米官网侧边栏为例，展示元素显示模式转换的实际应用：

实现思路：

  1. 将行内元素<a>转换为块级元素，使其独占一行并可设置宽高
  2. 设置背景色和文字样式
  3. 使用line-height实现文字垂直居中
  4. 添加hover效果实现交互反馈
.a-change {color: white;width: 230px;height: 40px;background-color: #535758;/* 转换为块级元素 */display: block;text-decoration: none;font-size: 14px;text-indent: 2em;/* 文字垂直居中（行高=盒子高度） */line-height: 40px;
}/* 鼠标悬停效果 */
a:hover {background-color: #ff6700;
}

HTML结构：

<a href="#" class="a-change">手机 电话卡</a>
<a href="#" class="a-change">电视 盒子</a>
<a href="#" class="a-change">笔记本 平板</a>
<!-- 更多链接 -->

实现效果：
在这里插入图片描述

2.5综合代码演示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>元素显示模式</title><!-- ------  元素显示模式   ------ --><!--    1.作用：网页标签非常多，在不同地方会用到不同的标签，了解他们的特点可以更好的布局我们的网页2.元素显示模式就是 元素(标签) 以什么方式进行显示，比如<div>自己独占一行，而<span>一行可以放多个3.HTML元素一般分为 块元素 和 行内元素 两种类型--><style>/* 111.块元素 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>，其中<div>标签是最典型的块元素11.块元素特点：1.独占一行2.高度、宽度、外边距和内边距都可以控制3.宽度默认是容器(父级宽度)的100%4.是一个容器和盒子，里面可以放行内或块级元素22.注意：1.文字类元素不能使用块元素2.<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>3.同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素例如：  <p><div>这里有问题</div>   (使用浏览器的审查器即可发现问题)</p>*/.change {/* width: 200px; */height: 200px;background-color: aqua;}/* 222.行内元素 常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>其中<span>是最典型的行内元素（内联元素）11.行内元素的特点：1.相邻行内元素在一行上，即一行可以显示多个2.高、宽直接设置是无效的3.默认宽度就是它本身内容的宽度4.行内元素只能容纳文本后者其他行内元素22.注意：1.链接里面不能再放链接2.特殊情况链接<a>里面可以放块级元素，但给<a>转换一下块级模式最安全*/.span1 {/* 这里设置宽度和高度是无效的，但是设置其他的是可以的，比如下面设置背景颜色 */width: 100px;height: 100px;background-color: hotpink;}/* 333.行内块元素 在行内元素中有几个特殊的标签 <img>、<input>、<td>，他们同时具有块元素和行内元素的特点（行内块元素）*//*  11.行内块元素的特点1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙，一行可以显示多个（行内元素的特定）2.默认宽度就是它本身内容的宽度（行内元素的特点）3.高度、行高、外边距和内边距都可以控制（块级元素的特点）*/input {width: 249px;height: 50px;}/* --- 元素显示模式的转换 --- (特殊情况下，我们需要元素模式的转换 简单理解：一个模式的元素需要另一种模式的特性)*//*  1. 转换为块元素：display:block2. 转换为行内元素：display:inline;3. 转换为行内块元素：display:inline-block;*//* 这里想要增加链接<a>的触发范围  */.a1 {width: 150px;height: 50px;/* 1.把行内元素<a>转换为块级元素 这样width和height的修改才能生效 */display: block;background-color: pink;}.change2 {/* 2.把块级元素转换为行内元素，实现一行放多个块级元素 */display: inline;}.change3 {/* 把行内元素转换为行内块元素 */width: 300px;height: 30px;background-color: skyblue;/* 转换前，对于行内元素来说，宽度和高度的设置是无效的 */display: inline-block;}/* 简洁版小米侧边栏案例 */.a-change {/* 设置字体颜色 */color: white;width: 230px;height: 40px;background-color: #535758;/* 把行内元素转换为块元素 */display: block;/* 取消链接下划线 */text-decoration: none;font-size: 14px;/* 空两个格子 */text-indent: 2em;/* ! 实现单行文字垂直居中 ! --> 解决方案：让文字的行高等于盒子的高度*//*  原理：行高由上空隙、文本本省的高度、下空隙组成 简单理解：行高的上空隙和下空隙把文字挤到中间了，所以如果行高小于盒子高度，文字就会偏上；吐过行高大于盒子高度，则文字会偏下*/line-height: 40px;}a:hover {background-color: #ff6700;}del{display:block;height:200px;background-color: red;}</style>
</head><body><!-- 块元素测验 --><div class="change">比较霸道，自己独占一行</div><!-- 不能这么用！！用浏览器检查会发现有问题 --><p><div class="change">这里有问题</div></p><!-- 行内元素测验 --><span class="span1">pink老师你怎么穿着品如的衣服呢</span> <strong>品如的衣服</strong><span class="span1">pink老师</span> <strong>品如的衣服</strong><!-- 行内块元素测验 --><input type="text" /><input type="text" /><!-- 元素模式的转换测验 --><!-- 这里想要增加链接<a>的触发范围 --><a href="picture/img1.jpg" class="a1">夏至未至</a><a href="picture/img1.jpg" class="a1">夏至未至</a><!-- 使块级元素在一行显示多个 --><div class="change2">我是块级元素，将要通过元素转换模式(改为行内元素)</div><div class="change2">我是块级元素 </div><!-- 想行内元素的宽度和高度 --><span class="change3">把行内元素转换为行内块元素</span><span class="change3">把行内元素转换为行内块元素</span><br /><!-- 简洁版小米侧边栏案例  主要思路1.链接<a>要实现竖着显示(行内元素转换为块级元素，这样链接就可以独占一行并且有高度和宽度)2.链接有背景颜色，鼠标经过<a>时链接变色--><a href="https://re.jd.com/search?keyword=%E7%94%B5%E8%AF%9D%E5%8D%A1&enc=utf-8" target="_blank" class="a-change">手机电话卡</a><a href="picture/img1.jpg" class="a-change">电视 盒子</a><a href="#" class="a-change" target="_blank">笔记本呢 平板</a><a href="#" class="a-change">出行 穿戴</a><a href="#" class="a-change">智能 路由器</a><a href="#" class="a-change">健康儿童</a><a href="#" class="a-change">耳机 音响</a><del>你好啊</del>林七夜</body></html>

显示效果：
在这里插入图片描述

学习资源推荐🐦‍🔥

  1. MDN Web Docs - 最权威的CSS参考文档
  2. W3Schools - 包含丰富的示例和在线编辑器
  3. 菜鸟编程 - 讲解详细的宝藏网站

如果我的内容对你有帮助，请 点赞 ， 评论 ， 收藏 。创作不易，大家的支持就是我坚持下去的动力！

在这里插入图片描述

http://www.dtcms.com/a/552834.html

相关文章：

  • 10月31日
  • Mybatis-Plus实现MySQL分表
  • 兵团住房和城乡建设局网站网站设计标杆企业
  • 快充新标杆：AVS 协议如何重塑手机充电体验
  • LIUNX 与手机安卓的文件互传 的常用方法
  • 第一届数证杯做题笔记（流量分析和手机取证）
  • 【IO多路转接】深入解析 poll：从接口到服务器实现
  • 【Spring Boot】Spring Boot解决循环依赖
  • 网站开发发展趋势2018网上建立网站赚钱
  • SuperMap Hi-Fi 3D SDK for Unreal 使用蓝图接口加载多源数据
  • 【Java】如何使用jdbc连接并操作MySQL，一文读
  • SSM宠物寄养系统ih041gj7(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上，文末可获取，系统界面在最后面。
  • 网站广告素材php网站免费模板
  • 还在用JDK8？JDK8升级JDK11：一次价值千万的升级指南
  • 深圳网站建设模板乐云seo与设计行业相关的网站
  • 缓存异常：缓存穿透、缓存击穿、缓存雪崩
  • 【计算机网络】IO复用方法（二）——Select
  • 【Java EE进阶 --- SpringBoot】统一功能处理（拦截器）
  • 主流数据分析工具全景对比：Excel / Python / R / Power BI / Tableau / Qlik / Snowflake
  • 从被动防御到主动管控：雷池SafeLine的远程安全运营之道
  • 人体静电消除器安全设计 蒙冬智能
  • 我想要个网站深圳最新招聘
  • Hybrid OCR-LLM框架用于在大量复杂密集企业级文档信息提取
  • 仙居做网站在哪里做项目网格化管理方案
  • ubuntu部署whisper+speaker_large+qwen【一】
  • 四大主流平台深度测评：2025企业自动化运维平台选型指南，自动化巡检平台适配关键场景
  • 计算机毕业设计 基于Python的热门游戏推荐系统的设计与实现 Django 大数据毕业设计 Hadoop毕业设计选题【附源码+文档报告+安装调试】
  • 每周读书与学习-＞JMeter主要元件详细介绍(三)逻辑控制器
  • QML学习笔记（四十八）QML与C++交互：QML中可实例化C++对象
  • 深信服上网行为 SANGFOR_AC_v11.0_AD域密码认证配置