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

第五讲_css元素显示模式

news 2025/7/8 13:21:59

css元素显示模式

  • 1. 元素的显示模式
    • 1.1 块元素
    • 1.2 行内元素
    • 1.3 行内块元素
  • 2. 元素根据显示模式分类
  • 3. 修改元素的显示模式

1. 元素的显示模式

1.1 块元素

块元素的特性：

  • 在页面中独占一行，从上到下排列。
  • 默认宽度，撑满父元素。
  • 默认高度，由内容撑开。
  • 可以通过 css 设置宽高。
<style>.first {width: 100px;height: 100px;background-color: blue;}.second {height: 100px;background-color: green;}.third {background-color: red;}
</style><div class="first">第一个块元素</div>
<div class="second">第二个块元素</div>
<div class="third">第三个块元素</div>

1.2 行内元素

行内元素的特性：

  • 在页面中不独占一行，从左到右排列。
  • 默认宽度，由内容撑开。
  • 默认高度，由内容撑开。
  • 无法通过 css 设置宽高。
<style>.first {background-color: blue;}.second {background-color: green;}.third {background-color: red;}
</style><span class="first">第一个行内元素</span>
<span class="second">第二个行内元素</span>
<span class="third">第三个行内元素</span>

1.3 行内块元素

行内块元素的特性：

  • 在页面中不独占一行，从左到右排列。
  • 默认宽度，由内容撑开。
  • 默认高度，由内容撑开。
  • 可以通过 css 设置宽高。
<style>.first {background-color: blue;}.second {height: 100px;width: 100px;background-color: green;}.third {background-color: red;}
</style><input class="first" placeholder="第一个行内块元素"/>
<input class="second" placeholder="第二个行内块元素"/>
<input class="third" placeholder="第三个行内块元素"/>

2. 元素根据显示模式分类

  • 块元素

<html>、<body>、<h1>-<h6>、<hr>、<p>、<pre>、<div>
<ul>、<ol>、<li>、<dl>、<dt>、<dd>
<table>、<tbody>、<thead>、<tfoot>、<tr>、<caption>
<form>、<option>

  • 行内元素

<br>、<em>、<strong>、<sup>、<sub>、<del>、<ins>、<a>、<label>

  • 行内块元素

<img>、<td> 、<th>、<input>、<textarea>、<select>、<button>、<iframe>

3. 修改元素的显示模式

/* block：设置为块元素 */
/* inline：设置为行内元素 */
/* inline-block：设置为行内块元素 */
/* none：隐藏元素 */
选择器 {display: block;
}

相关文章：

第五讲_css元素显示模式

css元素显示模式 1. 元素的显示模式1.1 块元素1.2 行内元素1.3 行内块元素 2. 元素根据显示模式分类3. 修改元素的显示模式 1. 元素的显示模式 1.1 块元素 块元素的特性&#xff1a; 在页面中独占一行&#xff0c;从上到下排列。默认宽度&#xff0c;撑满父元素。默认高度&a…...

编程日记 2024/1/8 13:29:44

Shell脚本入门实战：探索自动化任务与实用场景

引言 Shell脚本作为一种强大的自动化工具&#xff0c;在现代操作系统中具有广泛的应用。无论是简单的文件操作&#xff0c;还是复杂的系统管理&#xff0c;Shell脚本都能提供高效、快速的解决方案。在本文中&#xff0c;我们将探索Shell脚本的基础知识&#xff0c;并通过实战场…...

编程日记 2024/1/8 13:27:42

【AI视野·今日Sound 声学论文速览 第四十二期】Fri, 5 Jan 2024

AI视野今日CS.Sound 声学论文速览 Fri, 5 Jan 2024 Totally 10 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Sound Papers PosCUDA: Position based Convolution for Unlearnable Audio Datasets Authors Vignesh Gokul, Shlomo Dubnov深度学习模型需要大量干净的…...

编程日记 2024/1/8 13:26:41

Java中如何使用SQLite数据库

目录 SQLite简介SQLite优势安装 SQLite基本使用Java使用SQLite Springboot使用SQLite1.添加依赖2.配置数据库3.创建实体类 4.创建Repository接口5.创建控制器6.运行应用程序 SQLite简介 SQLite 是一个开源的嵌入式关系数据库&#xff0c;实现了自给自足的、无服务器的、配置无…...

编程日记 2024/1/8 13:24:40

kettle的基本介绍和使用

1、 kettle概述 1.1 什么是kettle Kettle是一款开源的ETL工具&#xff0c;纯java编写&#xff0c;可以在Window、Linux、Unix上运行&#xff0c;绿色无需安装&#xff0c;数据抽取高效稳定。 1.2 Kettle核心知识点 1.2.1 Kettle工程存储方式 以XML形式存储以资源库方式存储…...

编程日记 2024/1/8 13:23:39

数据结构第2章 栈和队列

名人说&#xff1a;莫听穿林打叶声&#xff0c;何妨吟啸且徐行。—— 苏轼《定风波莫听穿林打叶声》 本篇笔记整理&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 0、思维导图栈和队列1、栈1&#xff09;特点2&#xff0…...

编程日记 2024/1/8 13:22:38

Axure鲜花商城网站原型图，网上花店订花O2O本地生活电商平台

作品概况 页面数量&#xff1a;共 30 页 兼容软件&#xff1a;仅支持Axure RP 9/10&#xff0c;非程序软件无源代码 应用领域&#xff1a;鲜花网、花店网站、本地生活电商 作品特色 本作品为「鲜花购物商城」网站模板&#xff0c;高保真高交互&#xff0c;属于O2O本地生活电…...

编程日记 2024/1/8 13:21:37

【docker】centos 使用 Nexus Repository 搭建私有仓库

Nexus Repository 是一种流行的软件仓库管理工具&#xff0c;它可以帮助您搭建私有仓库&#xff0c;以便在内部网络或私有云环境中存储、管理和分发各种软件包和组件。 它常被用于搭建Maven的镜像仓库。本文演示如何用Nexus Repository搭建docker 私有仓库。 使用Nexus Repos…...

编程日记 2024/1/8 13:19:35

RabbitMQ（八）消息的序列化

目录 一、为什么需要消息序列化&#xff1f;二、常用的消息序列化方式1&#xff09;Java原生序列化&#xff08;默认&#xff09;2&#xff09;JSON格式3&#xff09;Protobuf 格式4&#xff09;Avro 格式5&#xff09;MessagePack 格式 三、总结 RabbitMQ 是一个强大的消息中间…...

编程日记 2024/1/8 13:18:34

23款奔驰GLC260L升级原厂540全景影像 安装效果分享

嗨 今天给大家介绍一台奔驰GLC260L升级原厂360全景影像 新款GLC升级原厂360全景影像 也只需要安装前面 左右三个摄像头 后面的那个还是正常用的&#xff0c;不过不一样的是 升级完成之后会有多了个功能 那就是新款透明底盘&#xff0c;星骏汇小许Xjh15863 左右两边只需要更换后…...

编程日记 2024/1/8 13:14:30

【CSS】文字描边的三种实现方式

目录 1. 可行的几种方式1.1. text-shadow 描边代码优缺点 1.2. text-stroke 描边实现优缺点 1.3. svg 描边实现优缺点 总结 1. 可行的几种方式 text-shadow–webkit-text-strokesvg 1.1. text-shadow 描边 MDN text-shadow 代码 <div class"text stroke">…...

编程日记 2024/1/8 13:10:27

【事务】事务传播级别

Spring事务定义了7种传播机制&#xff1a; PROPAGATION_REQUIRED&#xff1a;默认的Spring事物传播级别&#xff0c;若当前存在事务&#xff0c;则加入该事务&#xff0c;若不存在事务&#xff0c;则新建一个事务。 PAOPAGATION_REQUIRE_NEW&#xff1a;若当前没有事务&#x…...

编程日记 2024/1/8 13:09:26

Android WiFi 连接

Android WiFi 连接 1、设置中WiFi显示2、WiFi 连接流程2.1 获取PrimaryClientModeManager2.2 ClientModeImpl状态机ConnectableState2.3 ISupplicantStaNetworkCallback 回调监听 3、 简要时序图4、原生低层驱动5、关键日志 1、设置中WiFi显示 Android WiFi基础概览 packages/a…...

编程日记 2024/1/8 13:03:19

PLC与上位机PN通讯时，如何防止连接失败？

连接西门子PLC时失败&#xff0c;或者连接不上PLC&#xff0c;你可能需要做以下几点设置才可以。 一般来说每个PLC都有自己的IP地址&#xff0c;如果你的地址与PLC的地址冲突也就是地址重复是连接不上PLC的&#xff0c;如果地址没有冲突&#xff0c;但是不是在一个网段上也会导…...

编程日记 2024/1/8 13:01:17

LDD学习笔记 -- Linux错误码

LDD学习笔记 -- Linux错误码 EACCES(Permission Denied) 13EEXIST(File Exits) 17EINVAL(Invalid Argument) 22ENOENT(No Such File or Directory)ENOMEM(Out of Memory)EIO(Input/Output Error) 5ENOSPC(No space Left on Device)ENOTTY(Not a Typewrite)EPIPE(Broken Pipe)EI…...

编程日记 2024/1/8 13:00:17

华为交换机入门（六）：VLAN的配置

VLAN&#xff08;Virtual Local Area Network&#xff09;即虚拟局域网&#xff0c;是将一个物理的LAN在逻辑上划分成多个广播域的通信技术。VLAN内的主机间可以直接通信&#xff0c;而VLAN间不能直接互通&#xff0c;从而将广播报文限制在一个VLAN内。 VLAN 主要用来解决如何…...

编程日记 2024/1/8 12:59:16

登录验证

目录 会话技术 Cookie Session JWT JWT生成 JWT校验 会话技术 会话 打开浏览器&#xff0c;访问web服务器的资源&#xff0c;会话建立&#xff0c;直到有一方断开连接&#xff0c;会话结束。在一次会话中可以包含多次请求与响应 会话跟踪 一种维护浏览器的方法 服务器需要…...

编程日记 2024/1/8 12:58:14

利用Podman构建基于Fission env/builder的镜像

镜像准备 构建Dockerfile fission的基础环境包括两种&#xff1a;env 以及 builder。如果仅基于code构建function&#xff08;i.e., 只创建deployachive&#xff09;&#xff0c;仅构建env即可&#xff1b;但如果需要构建sourcearchive&#xff0c;则需要同时创建env和builde…...

编程日记 2024/1/8 12:57:13

php加减乘除函数

目录 第一部分&#xff1a;简单示例 1、加法 2、减法 3、乘法 4、除法 第二部分&#xff1a;官方文档 1、加法 2、减法 3、乘法 4、除法 第一部分&#xff1a;简单示例 1、加法 $result bcadd(1.2, 1.4, 2); echo $result;//2.60 2、减法 $result bcsub(1.6, 1.…...

编程日记 2024/1/8 12:54:11

Go语言学习记录——用正则表达式（regexp包）来校验参数

前言 最近坐毕设ing&#xff0c;简单的一个管理系统。 其中对于用户注册、登录功能&#xff0c;需要进行一些参数校验。 因为之前使用过&#xff0c;因此这里计划使用正则表达式进行校验。但是之前的使用也仅限于使用&#xff0c;因此这次专门进行一次学习&#xff0c;并做此记…...

编程日记 2024/1/8 12:53:10

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/6/20 12:22:50

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/7/7 12:21:55

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2025/7/7 0:36:53

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2025/7/8 12:26:58

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/7/6 4:52:27

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2025/7/6 19:09:54

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/6/18 3:11:41

人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

编程新知 2025/7/8 8:09:35

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

编程新知 2025/7/4 22:31:47

AI语音助手的Python实现

引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2025/7/8 0:50:44