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

CSS的元素显示模式

😊博主页面:鱿年年

👉博主推荐专栏:《WEB前端》👈

​💓博主格言:追风赶月莫停留,平芜尽处是春山❤️

目录

  前言

一、什么是元素显示模式

1.1块元素

1.2行内元素

1.3行内块元素

元素显示模式总结

二、元素显示模式的转换


 前言

了解元素的显示模式是可以更好的让我们布局页面。

1.什么是元素的显示模式

2.元素显示模式的分类

3.元素显示模式的转换

 根据以上三点,掌握了就知道什么是显示模式、显示模式的分类以及能不能相互转换。

一、什么是元素显示模式

作用:网页的标签非常多,在不同的地方会用到不同类的标签,了解他们的特点可以更好的布局我们的网页。

元素 显示模式 就是元素(标签)以什么方式进行显示,比如<div>自己占一行,也比如一行可以放多个<span>。

HTML元素一般分为两大类型:

1.块元素

2.行内元素

1.1块元素

常见的块元素有:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。

块元素的特点:

比较霸道,自己独占一行。

高度,宽度,外边距以及内边距都可以控制。

宽度默认的是容器(父级宽度)的100%。

是一个容器及盒子,里面可以放行内或者块级元素。

 注意:

文字类的元素不能使用块元素

<p>标签主要用于存放文字,因此<p>里面不能放块元素,特别是不能放<div>

同理,<h1>~<h6>等都是文字类块元素级标签,里面也不能放其他块级元素

1.2行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点:

相邻行内元素在一行上,一行可以显示多个。

高、宽直接设置是无效的。

默认宽度就是它本身内容的宽度。

行内元素只能容纳文本或其他行内元素。

注意:

链接里面不能再放链接

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

1.3行内块元素

在行内元素中有几个特殊的标签———<img/>、<input/>、<td>,它们同时具有块元素和行内元素的特点。有的又称它们为行内块元素。

行内块元素的特点

和相邻行内元素(行内快)在一行上,但是他们之间会有空白间隙。一行可以显示多个(行内元素特点)。

默认宽度就是它本身内容的宽度(行内元素特点)

高度、宽度、外边距以及内边距都可以控制的(块元素特点)

元素显示模式总结

元素模式元素排列设置样式默认高度包含
块元素一行只能放一个块元素可以设置宽度高度容器的100%容器级可以包含任何标签
行内元素一行可以放多个行内元素不可以直接设置宽度高度它本身内容的宽度容纳文本或者其他行内元素
行内块元素一行可以放多个行内块元素可以设置宽度高度她本身内容的宽度

二、元素显示模式的转换

特殊情况下,我们需要元素模式的转换,简单来说:就是一个模式的元素需要另外一个模式的特性。比如:想要增加链接<a>的触发范围。

转换块元素代码: display:block;

转换行内元素代码:display:inline;

转换为行内块元素代码:display:inline-block;

相关文章:

CSS的元素显示模式

&#x1f60a;博主页面&#xff1a;鱿年年 &#x1f449;博主推荐专栏&#xff1a;《WEB前端》&#x1f448; ​&#x1f493;博主格言&#xff1a;追风赶月莫停留&#xff0c;平芜尽处是春山❤️ 目录 前言 一、什么是元素显示模式 1.1块元素 1.2行内元素 1.3行内块元素…...

【MySQL Shell】8.9.1 在 InnoDB ClusterSet 中隔离集群

在发生紧急故障切换后&#xff0c;如果 ClusterSet 的各个部分之间存在事务集不同的风险&#xff0c;则必须保护集群不受写入流量或所有流量的影响。 如果发生网络分区&#xff0c;则有可能出现脑裂的情况&#xff0c;即实例失去同步&#xff0c;无法正确通信以定义同步状态。…...

Ubuntu20.04+cuda11.2+cudnn8.1+Anaconda3安装tensorflow-GPU环境,亲测可用

(1)安装nvidia显卡驱动注意Ubuntu20.04和Ubuntu16.04版本的安装方法不同,安装驱动前一定要更新软件列表和安装必要软件、依赖&#xff08;必须&#xff09;sudo apt-get update #更新软件列表sudo apt-get install gsudo apt-get install gccsudo apt-get install make查看GP…...

剑指Offer 第27天 JZ75 字符流中第一个不重复的字符

字符流中第一个不重复的字符_牛客题霸_牛客网 描述 请实现一个函数用来找出字符流中第一个只出现一次的字符。例如&#xff0c;当从字符流中只读出前两个字符 "go" 时&#xff0c;第一个只出现一次的字符是 "g" 。当从该字符流中读出前六个字符 “google&…...

科研试剂供应1476737-97-9,Bis-PEG2-endo-BCN可发生点击反应

●外观以及性质&#xff1a;Bis-PEG2-endo-BCN一般为白色固体&#xff0c;BCN其为点击试剂&#xff0c;点击化学&#xff08;Click chemistry&#xff09;&#xff0c;又译为“链接化学”、“动态组合化学” &#xff08;Dynamic Combinatorial Chemistry&#xff09;、“速配接…...

Zabbix 构建监控告警平台(一)--部署安装

监控对象监控收集信息方式Zabbix 部署 1.监控对象 源代码: *.html *.jsp *.php *.py 数据库&#xff1a; MySQL,MariaDB,Oracle,SQL Server,DB2 应用软件&#xff1a;Nginx,Apache,PHP,Tomcat agent 集群&#xff1a; LVS,Keepalived,HAproxy…...

【nodejs】nodejs入门核心知识(命令行使用、内置模块、node 模块化开发)

&#x1f4bb; nodejs入门核心知识(命令行使用、内置模块、node 模块化开发) &#x1f3e0;专栏&#xff1a;JavaScript &#x1f440;个人主页&#xff1a;繁星学编程&#x1f341; &#x1f9d1;个人简介&#xff1a;一个不断提高自我的平凡人&#x1f680; &#x1f50a;分享…...

5. Spring 事务

文章目录1. Spring 事务简介2. Spring 事务角色3. Spring 事务属性3.1 事务配置3.2 案例&#xff1a;转账业务追加日志3.3 事务传播行为1. Spring 事务简介 Spring 事务作用&#xff1a;在数据层或业务层保障一系列的数据库操作同成功、同失败。 数据层有事务我们可以理解&am…...

【堆】数据结构堆的实现(万字详解)

前言&#xff1a; 在上一期中我们讲到了树以及二叉树的基本的概念&#xff0c;有了之前的认识&#xff0c;今天我们将来具体实现一种二叉树的存储结构“堆”&#xff01;&#xff01;&#xff01; 目录1.二叉树顺序结构介绍2.堆的概念及结构3.调整算法3.1向上调整算法3.1.1算法…...

Docker进阶 - 9. docker network 之自定义网络

1. 运行两个tomcat实例&#xff0c;并进入容器内部 docker run -d -p 8081:8080 --name tomcat81 billygoo/tomcat8-jdk8 docker exec -it tomcat81 bashdocker run -d -p 8082:8080 --name tomcat82 billygoo/tomcat8-idk8 docker exec -it tomcat82 bash2. ping一下各自的ip…...

springcloud-工程创建(IDEA)

文章目录介绍springcloud 常用组件1.创建父工程2.删除父工程的src目录3.修改父工程的pom文件4 springcloud 版本依赖5.创建子模块6 子项目下创建启动类介绍 Spring Cloud 是一个基于 Spring Boot 实现的云应用开发工具&#xff0c;它为开发中的配置管理、服务发现、断路器、智…...

Blender——物体的随机分布

问题描述将正方体随机分布在平面上。问题解决点击编辑-->偏好设置。在【插件】中的【物体】类型中勾选【Object: Scatter Objects】。右下的活动工具与工作区设置中就会出现【物体散列】的模块&#xff0c;可以调节各参数。选中正方体&#xff0c;按着Shift&#xff0c;选中…...

一文教你玩转 Apache Doris 分区分桶新功能

数据分片&#xff08;Sharding&#xff09;是分布式数据库分而治之 (Divide And Conquer) 这一设计思想的体现。过去的单机数据库在大数据量下往往面临存储和 IO 的限制&#xff0c;而分布式数据库则通过数据划分的规则&#xff0c;将数据打散分布至不同的机器或节点上&#xf…...

Spring JdbcTemplate 和 事务

JdbcTemplate概述 JdbcTemplate是spring框架中提供的一个对象&#xff0c;是对原始繁琐的Jdbc API对象的简单封装。spring框架为我们提供了很多的操作模板类。例如&#xff1a;操作关系型数据的JdbcTemplate和&#xff0c;操作nosql数据库的RedisTemplate&#xff0c;操作消息…...

C/C++:程序环境和预处理/宏

程序的翻译环境和执行环境 在ANSI C的任何一种实现中&#xff0c;存在两个不同的环境。第1种是翻译环境&#xff0c;在这个环境中源代码被转换为可执行的机器指令。第2种是执行环境&#xff0c;它用于实际执行代码。 编译和链接 一份源代码(比如test.c)需要通过编译&#xf…...

什么是死锁?死锁产生的四个必要条件是啥?如何避免和预防死锁的产生?

点个关注&#xff0c;必回关 文章目录什么是死锁死锁产生的原因&#xff1a;1、系统资源的竞争2、进程运行推进顺序不当引起死锁产生死锁的四个必要条件&#xff1a;死锁的避免与预防什么是死锁 死锁是指两个或两个以上的线程在执行过程中&#xff0c;由于竞争资源或者由于彼此…...

工程管理系统源码-物料管理-工程项目管理系统-建筑施工管理软件

如今建筑行业竞争激烈&#xff0c;内卷严重&#xff0c;发展趋势呈现两极分化&#xff0c;中小微企业的生存空间被逐步压缩&#xff0c;利润逐年减少。事实证明&#xff0c;工地上粗放式的人管人管理模式已经落于时代&#xff0c;劳动力纠纷和物料浪费现象尤其普遍&#xff0c;…...

Roboguide与TIA V16通讯

软件需求:1. roboguide;2. TIA V16;3. KEPServer; 在之前的文章中介绍过KEPServer与TIA V16的通讯,此处不再介绍。接下来,介绍roboguide与KEPServer的仿真通讯。 创建一个roboguide项目。选择【外部设备】➡【添加外部设备】 选择【OPC Server】➡【OK】 OPC服务器名称命…...

利用PyTorch深度学习框架进行多元回归

目录前言数据加载数据转换模型定义模型训练模型评估模型保存与加载完整代码讨论参考文献前言 大多数数据科学家以往经常常是利用传统的机器学习框架sklearn搭建多元回归模型&#xff0c;随着深度学习和强化学习越来越普及&#xff0c;很多数据科学家尝试使用深度学习框架来进行…...

EBS常用接口开发

整理了一些工作中常用的Oracle EBS接口和API&#xff0c;最早是看着大神黄建华文档起来的&#xff0c;格式内容参考他的文档&#xff0c;加上一些自己开发的程序和经历而已。 PO PO接收、检验、入库、退货-InterfaceAPI_刘文钊1的博客-CSDN博客 基础数据 EBS物料、bom、工艺导入…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...