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

第五讲_css元素显示模式

news 文章来源：https://blog.csdn.net/wenqi1992/article/details/135452951 2024/10/25 10:23:22

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

公司办公电脑文件防泄密系统

电脑文件防泄密系统是一种用于保护企业机密文件的软件系统&#xff0c;它采用一系列的安全技术手段&#xff0c;如数据加密、访问控制、审计跟踪等&#xff0c;来确保企业机密文件不被非法获取、窃取或泄漏。这种系统通常适用于企业、政府机构等需要对重要文件进行保密的机构。…...

编程日记 2024/1/8 12:51:08

手把手带你死磕ORBSLAM3源代码(三十四)Tracking.cc MonocularInitialization编辑

目录 一.前言 二.代码 2.1完整代码 2.2 单目视觉跟踪初始化 一.前言 这段代码是一个名为MonocularInitialization的函数，它属于Tracking类。从函数名称和代码内容来看，这个函数主要用于单目视觉跟踪的初始化过程。以下是代码的详细解读： 首先，函数检查一个名为m...

编程日记 2024/1/8 12:48:05

STL标准库与泛型编程（侯捷）笔记3

STL标准库与泛型编程&#xff08;侯捷&#xff09; 本文是学习笔记&#xff0c;仅供个人学习使用。如有侵权&#xff0c;请联系删除。 参考链接 Youbute: 侯捷-STL标准库与泛型编程 B站: 侯捷 - STL Github:STL源码剖析中源码 https://github.com/SilverMaple/STLSourceCo…...

编程日记 2024/1/8 12:47:04

Iceberg: 列式读取Parquet数据

通过Spark读取Parquet文件的基本流程 SQL > Spark解析SQL生成逻辑计划树 LogicalPlan > Spark创建扫描表/读取数据的逻辑计划结点 DataSourceV2ScanRelation > Spark优化逻辑计划树&#xff0c;生成物理计划树 SparkPlan > Spark根据不同的属性&#xff0c;将逻辑…...

编程日记 2024/1/8 12:46:03

Ansible、Saltstack、Puppet自动化运维工具介绍

本文主要是分享介绍三款主流批量操控工具Ansible、Saltstack、Puppet主要对比区别&#xff0c;以及Ansible和saltstack的基础安装和使用示例&#xff0c;如果觉得本文对你有帮助&#xff0c;欢迎点赞、收藏、评论&#xff01; There are many things that can not be broken&am…...

编程日记 2024/1/8 12:45:02

python线程池提交任务

1. 线程池参数设置 CPU数量&#xff1a;N线程池的核心线程数量 IO密集型的话&#xff0c;一般设置为 2 * N 1&#xff1b; CPU密集型的话&#xff0c;一般设置为 N 1 或者 使用进程池。线程池的最大任务队列长度 &#xff08;线程池的核心线程数 / 单个任务的执行时间&#…...

编程日记 2024/1/8 12:44:01

跨境电商企业客户服务优化指南：关键步骤与实用建议

随着全球经济一体化的加强&#xff0c;跨境电子商务产业在过去几年蓬勃发展。但是&#xff0c;为应对激烈竞争&#xff0c;提供全方面的客户服务成为了跨境电子商务卖家在市场中获得优势的关键因素之一。本文将介绍跨境电商企业优化客户服务有哪些步骤&#xff1f;以助力企业提…...

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

Visual Studio Code 常用快捷键

Visual Studio Code 常用快捷键 文章目录 Visual Studio Code 常用快捷键1. 主命令框2. 常用快捷键2.1 编辑器与窗口管理2.2 代码编辑格式调整光标相关重构代码查找替换显示相关其他 1. 主命令框 F1 或 CtrlShiftP : 打开命令面板。在打开的输入框内&#xff0c;可以输入任何命…...

编程日记 2024/1/8 12:38:56

ubuntu创建pytorch-gpu的docker环境

文章目录 安装docker创建镜像创建容器 合作推广&#xff0c;分享一个人工智能学习网站。计划系统性学习的同学可以了解下&#xff0c;点击助力博主脱贫( •̀ ω •́ )✧ 使用docker的好处就是可以将你的环境和别人的分开&#xff0c;特别是共用的情况下。本文介绍了ubuntu环境…...

编程日记 2024/1/8 12:37:55

数据库原理与应用期末复习试卷2

数据库原理技术与应用 一.单项选择题 设有属性A&#xff0c;B&#xff0c;C&#xff0c;D&#xff0c;以下表示中不是关系的是( C) ​ A、R(A) B、R(A, B, C, D) C、R&#xff08;AxBxCxD&#xff09; D、R(A&#xff0c;B) 在SQL语言中的视图VIEW是数据库的(A&#xff09;…...

编程日记 2024/1/8 12:36:55

linux做网站/佛山网站设计实力乐云seo

1.微信官方文档 auth.code2Session | 微信开放文档 2.我们来实现这个登录功能, 直接上完整代码 controller <!-- 工具类-JSONUtil --> <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.…...

编程日记 2024/10/25 9:57:33

网站建设中中文模板/网站备案查询工信部官网

答案CL.的答案就是诀窍&#xff01;我最终使用了一个Python脚本(可以在下一节中查看,名为“更新&#xff1a;正在解决问题”),并且一旦我正确设置了数据库,以便将ID列设置为整数键(或者,如果是是不可能的,数字)和名称列被设置为文本然后它工作&#xff01;更新&#xff1a;努力…...

编程日记 2024/10/25 9:15:08

网站建设ssc源码平台/推广运营平台

越来越多的感受到了生活的压力与无奈.我还能够做什么呢,寂寞是这个时代的产物,只有耐得住寂寞,我们才能走的更远,让嘲笑的话语成长的动力,让时间证明一切,风雨兼程只为无愧我心!加油自己,加油北京!转载于:https://blog.51cto.com/4602664/803372...

编程日记 2024/10/25 9:11:02

0fees 安装 wordpress/营销推广的特点

这篇文章主要介绍了thinkPHP5.0框架整体架构,简单介绍了thinkPHP5.0的应用,模块,MVC,驱动,行为,命名空间等概念与基本用法,需要的朋友可以参考下本文讲述了thinkPHP5.0框架整体架构。分享给大家供大家参考&#xff0c;具体如下&#xff1a;ThinkPHP5.0应用基于MVC(模型-视图-控…...

编程日记 2024/10/25 9:09:00

网站模板免费下载网站/免费推广网站大全下载安装

作者&#xff1a;姚嵩 外星人… 本文来源&#xff1a;原创投稿 *爱可生开源社区出品&#xff0c;原创内容未经授权不得随意使用&#xff0c;转载请联系小编并注明来源。 摘抄&#xff1a; https://dev.mysql.com/doc/refman/8.0/en/charset-general.html https://dev.mysql.c…...

编程日记 2024/10/25 2:11:23

简洁游戏企业网站/新塘网站seo优化

一个点向一个点连边太easy了。 现实有的时候并没有这么简单。 对于这样的一类问题&#xff1a;需要多次&#xff08;m1e5次左右&#xff09;从一个编号在[L1,R1]的区间内的所有点&#xff0c;向另一个编号在[L2,R2]的所有点之间分别连权值相同的边。 求S到T的最短路&#xff0c…...

编程日记 2024/10/24 23:22:26