CSS 元素的显示模式(块元素,行内元素,行内块元素)

一. 块元素(block)

又称:块级元素
特点:
1. 在页面中独占一行,不会与任何元素共用一行,是从上到下排列的。
2. 默认宽度:撑满父元素
3. 默认高度:由内容撑开。
4. 可以通过 CSS 设置宽高。

例如:

1. 主体结构标签: <html> 、 <body>
2. 排版标签: <h1> ~  <h6> 、 <hr> 、 <p> 、 <pre> 、 <div>
3. 列表标签: <ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd>
4. 表格相关标签: <table> 、 <tbody> 、 <thead> 、 <tfoot> 、 <tr> 、<caption>
5.  <form> <option>

二. 行内元素(inline)

又称:内联元素
特点:
1. 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排
列。
2. 默认宽度:由内容撑开。

例如:

1. 文本标签: <br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、 <ins>
2.  <a> <label>

三 行内块元素(inline-block)

又称:内联块元素
特点:
1. 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排
列。
2. 默认宽度:由内容撑开。
3. 默认高度:由内容撑开。
4. 可以通过 CSS 设置宽高。

例如:

1. 图片: <img>
2. 单元格: <td> 、 <th>
3. 表单控件: <input> 、 <textarea> 、 <select> 、 <button>
4. 框架标签: <iframe>

注意:元素早期只分为:行内元素、块级元素,区分条件也只有一条:"是否独占一行",如果按照这种分类方式,行内块元素应该算作行内元素。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/955766.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

BeanFactory 是什么?它与 ApplicationContext 有什么区别?

谈到Spring&#xff0c;那势必要讲讲容器 BeanFactory 和 ApplicationContext。 BeanFactory是什么&#xff1f; BeanFactory&#xff0c;其实就是 Spring 容器&#xff0c;用于管理和操作 Spring 容器中的 Bean。可能此时又有初学的小伙伴会问&#xff1a;Bean 是什么&#x…

ABP - 缓存模块(1)

ABP - 缓存模块&#xff08;1&#xff09; 1. 与 .NET Core 缓存的关系和差异2. Abp 缓存的使用2.1 常规使用2.2 非字符串类型的 Key2.3 批量操作 3. 额外功能 1. 与 .NET Core 缓存的关系和差异 ABP 框架中的缓存系统核心包是 Volo.Abp.Caching &#xff0c;而对于分布式缓存…

SWD仿真接口(for ARM)的使用方法

概述: JTAG JTAG代表联合测试行动小组(定义JTAG标准的小组),旨在作为测试板的一种方式。JTAG允许用户与微控制器的各个部分进行对话。在许多情况下,这涉及一组指令或对电路板进行编程。JTAG标准定义了5个引脚: TCK: Test Clock TMS: Test Mode Select TDI: Test Data-…

Linux UDP 编程详解

一、引言 在网络编程领域&#xff0c;UDP&#xff08;User Datagram Protocol&#xff0c;用户数据报协议&#xff09;作为一种轻量级的传输层协议&#xff0c;具有独特的优势和适用场景。与 TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff0…

OpenCV相机标定与3D重建(60)用于立体校正的函数stereoRectify()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 为已校准的立体相机的每个头计算校正变换。 cv::stereoRectify 是 OpenCV 中用于立体校正的函数&#xff0c;它基于已知的相机参数和相对位置&am…

AWS物联网连接的数据记录器在冰川环境中的性能比较:Campbell CR1000X与ESP32开源

论文标题 中文&#xff1a;AWS物联网连接的数据记录器在冰川环境中的性能比较&#xff1a;Campbell CR1000X与ESP32开源 英文&#xff1a;Performance comparison of AWS IoT connected dataloggers in glacier environments: Campbell CR1000X vs. ESP32 Open source 作者信…

K8S 节点选择器

今天我们来实验 pod 调度的 nodeName 与 nodeSelector。官网描述如下&#xff1a; 假设有如下三个节点的 K8S 集群&#xff1a; k8s31master 是控制节点 k8s31node1、k8s31node2 是工作节点 容器运行时是 containerd 一、镜像准备 1.1、镜像拉取 docker pull tomcat:8.5-jre8…

Python爬虫学习前传 —— Python从安装到学会一站式服务

早上好啊&#xff0c;大佬们。我们的python基础内容的这一篇终于写好了&#xff0c;啪唧啪唧啪唧…… 说实话&#xff0c;这一篇确实写了很久&#xff0c;一方面是在忙其他几个专栏的内容&#xff0c;再加上生活学业上的事儿&#xff0c;确实精力有限&#xff0c;另一方面&…

【书生大模型实战营】Git 基础知识-L0G3000

本文是书生大模型实战营系列的第三篇文章&#xff0c;本文的主题是&#xff1a;Git基础知识点。 原始教程链接&#xff1a;Tutorial/docs/L0/git/readme.md at camp4 InternLM/Tutorial 1.Git总览 什么是Git&#xff1f; Git是一个分布式版本控制系统&#xff0c;广泛用于…

基于SpringBoot+Vue旅游管理系统的设计和实现(源码+文档+部署讲解)

个人名片 &#x1f525; 源码获取 | 毕设定制| 商务合作&#xff1a;《个人名片》 ⛺️心若有所向往,何惧道阻且长 文章目录 个人名片环境需要技术栈功能介绍功能说明 环境需要 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 数据库&…

python如何解析word文件格式(.docx)

python如何解析word文件格式&#xff08;.docx&#xff09; .docx文件遵从开源的“Office Open XML标准”&#xff0c;这意味着我们能用python的文本操作对它进行操作&#xff08;实际上PPT和Excel也是&#xff09;。而且这并不是重复造轮子&#xff0c;因为市面上操作.docx的…

Visual Studio2019调试DLL

1、编写好DLL代码之后&#xff0c;对DLL项目的属性进行设置&#xff0c;选择待注入的DLL&#xff0c;如下图所示 2、生成DLL文件 3、将DLL设置为启动项目之后&#xff0c;按F5启动调试。弹出选择注入的exe的界面之后&#xff0c;使用代码注入器注入步骤2中生成的dll&#xff…

nginx 配置防爬虫

今天早上查看服务器&#xff0c;发现昨天发布的一个在线解析充电桩协议的网页工具有大量的访问记录&#xff0c;应该是爬虫在爬api接口数据。该工具api接口后台用的是python写的&#xff0c;和大多数项目一样也采用nginx反向代理&#xff0c;由于采用nginx&#xff0c;可以利用…

日志收集Day001

1.ElasticSearch 作用&#xff1a;日志存储和检索 2.单点部署Elasticsearch与基础配置 rpm -ivh elasticsearch-7.17.5-x86_64.rpm 查看配置文件yy /etc/elasticsearch/elasticsearch.yml&#xff08;这里yy做了别名&#xff0c;过滤掉空行和注释行&#xff09; yy /etc/el…

微信小程序-base64加解密

思路&#xff1a;先创建一个base64.js的文件&#xff0c;这个文件可以作为专门加解密的文件模块&#xff0c;需要时就引用&#xff1b;创建好后&#xff0c;引用base64.js里的加解密函数。 注意&#xff1a;引用模块一定要引用正确的路径&#xff0c;否则会报错。 base64.js:…

【网络协议】【http】【https】AES-TLS1.2

【网络协议】【http】【https】AES-TLS1.2 https并不是一个协议 而是在传输层之间添加了SSL/TLS协议TLS TLS 协议用于应用层协议&#xff08;如 HTTP&#xff09;和传输层&#xff08;如 TCP&#xff09;之间&#xff0c;增加了一层安全性来解决 HTTP 存在的问题&#xff0c;H…

打造更安全的Linux系统:玩转PAM配置文件

在Linux系统中&#xff0c;用户认证是确保系统安全的关键步骤。PAM&#xff08;可插拔认证模块&#xff09;为我们提供了一个非常灵活的框架&#xff0c;帮助我们管理各种服务的认证过程。其中&#xff0c;/etc/pam.d目录是PAM配置的核心部分&#xff0c;这里存放了每个服务所需…

无人机技术架构剖析!

一、飞机平台系统 飞机平台系统是无人机飞行的主体平台&#xff0c;主要提供飞行能力和装载功能。它由机体结构、动力装置、电气设备等组成。 机体结构&#xff1a;无人机的机身是其核心结构&#xff0c;承载着其他各个组件并提供稳定性。常见的机身材料包括碳纤维、铝合金、…

【西藏乡镇界面】图层arcgis格式shp数据有乡镇名称和编码2020年wgs84坐标内容测评

西藏乡镇界面图层arcgis格式shp数据有乡镇名称和编码2020年wgs84坐标无偏移

【QT】: 初识 QWidget 控件 | QWidget 核心属性(API) | qrc 文件

&#x1f525; 目录 1. 控件概述 控件体系的发展阶段 2. QWidget 核心属性 2.1 核心属性概览2.2 用件可用&#xff08;Enabled&#xff09; 2.3 坐标系&#xff08;Geometry&#xff09; **实例 1: 控制按钮的位置**实例 2: 表白 程序 2.4 窗口标题&#xff08;windowTiltle&a…