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>

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Apache搭建https服务器

Apache搭建https服务器 REF: 使用OpenSSL自建一个HTTPS服务

线上工单引发的思考:Spring Boot 中 @Autowired 与 @Resource 的区别

最近接手了离职同事负责的业务&#xff0c;在处理一个线上工单的时候&#xff0c;看了下历史逻辑&#xff0c;在阅读他们写的代码时&#xff0c;发现他们竟然把Autowired和Resource注解混用。今天就借此机会聊聊SpringBoot项目中这两者之间的区别。 1. 注解来源 Autowired&am…

React 第三方状态管理库相关 -- Redux MobX 篇

一、redux 首先安装依赖&#xff1a; npm install redux react-redux reduxjs/toolkit 示例代码&#xff1a; // src/store/index.js import { configureStore } from reduxjs/toolkit import couterSlice from ./couterSliceconst store configureStore({reducer:{coute…

从Arrays源码学习定义工具类

背景 在日常编码中&#xff0c;一个比较好的实践是&#xff1a;我们把一些业务无关的、可复用的一些通用逻辑&#xff0c;封装成工具类、甚至jar包。这样一方面方便通用代码抽取、代码复用&#xff0c;同时也隔离经常变动的业务代码和不变的通用代码。那如何定义好一个工具类呢…

spark,读取和写入同一张表问题

读取a表&#xff0c;写入a表 1.写入的是分区表&#xff0c;不报错 2.读取上来之后&#xff0c;创建为临时视图temp&#xff0c;然后先写入a表&#xff0c;再使用temp&#xff0c;就会报错 解决办法&#xff1a;可以先使用temp&#xff0c;再写入a表 3.写入的不是分区表&…

工作记录小点

postman问题 postman 返回404 可以先看看这个模块是否集成到pom文件中 postman 返回200不调debug 请求参数Json有错误请求方式不对Get/Post debug报错连接失败 host文件没copy同事的 2.对应组件的不同服务白名单没添加导致的 host文件刷新 进入 C:\windows\system32\drivers\e…

GaussDB中的Vacuum和Analyze

GaussDB中的Vacuum和Analyze 基本概念与区别手动Vacuum和Analyze查看Vacuum和Analyze记录Autovacuum配置参数 基本概念与区别 使用VACUUM、VACUUM FULL和ANALYZE命令定期对每个表进行维护&#xff0c;主要有以下原因&#xff1a; VACUUM FULL可回收已更新或已删除的数据所占据…

w~Transformer~合集11

我自己的原文哦~ https://blog.51cto.com/whaosoft/12472192 #LightSeq 最高加速9倍&#xff01;字节跳动开源8比特混合精度Transformer引擎,近年来&#xff0c;Transformer 已经成为了 NLP 和 CV 等领域的主流模型&#xff0c;但庞大的模型参数限制了它的高效训练和推理。…

【Rust自学】13.1. 闭包 Pt.1:什么是闭包、如何使用闭包

13.1.0. 写在正文之前 Rust语言在设计过程中收到了很多语言的启发&#xff0c;而函数式编程对Rust产生了非常显著的影响。函数式编程通常包括通过将函数作为值传递给参数、从其他函数返回它们、将它们分配给变量以供以后执行等等。 在本章中&#xff0c;我们会讨论 Rust 的一…

Linux服务器配置onnxruntime-gpu

本文实现 onnxruntime-gpu 不依赖于服务器主机上 cuda 和 cudnn&#xff0c;仅使用虚拟环境中的 cuda 依赖包实现 onnx GPU 推理加速的安装教程。为了适配推理节点&#xff0c;因此我们仅在 base 下配置环境&#xff0c;不需要重新创建新的虚拟环境。 升级 pip pip install -…

AWS云平台上生成式AI通过项目文档内容分析获知项目风险

要在AWS云平台上设计和实施高性能系统&#xff0c;同时使用生成式人工智能识别项目风险来分析项目文档内容。 利用生成式AI分析项目文档并协助风险管理可以显著提高识别和解决AWS上托管的复杂项目中的风险的速度、准确性和效率。通过将AI的功能与传统的项目管理最佳实践相结合&…

近红外简单ROI分析matlab(NIRS_SPM)

本次笔记主要想验证上篇近红外分析是否正确&#xff0c;因为叠加平均有不同的计算方法&#xff0c;一种是直接将每个通道的5分钟实时长单独进行叠加平均&#xff0c;另一种是将通道划分为1分钟的片段&#xff0c;将感兴趣的通道数据进行对应叠加平均&#xff0c;得到一个总平均…

G1原理—5.G1垃圾回收过程之Mixed GC

大纲 1.Mixed GC混合回收是什么 2.YGC可作为Mixed GC的初始标记阶段 3.Mixed GC并发标记算法详解(一) 4.Mixed GC并发标记算法详解(二) 5.Mixed GC并发标记算法详解(三) 6.并发标记的三色标记法 7.三色标记法如何解决错标漏标问题 8.SATB如何解决错标漏标问题 9.重新梳…

springBoot项目使用Elasticsearch教程

目录 一、引言&#xff08;一&#xff09;使用背景&#xff08;二&#xff09;版本库区别 二、引入依赖&#xff08;一&#xff09;springboot集成的es依赖&#xff08;建议&#xff09;&#xff08;二&#xff09;es提供的客户端库 三、配置&#xff08;以yaml文件为例&#x…

使用Newtonsoft.Json插件,打包至Windows平台显示不支持

在unity中使用Newtonsoft.Json插件&#xff0c;打包至Windows遇到的问题 string json JsonConvert.SerializeObject(msg); 打包windows平台&#xff0c;显示该平台不支持 出现问题的原因 JsonConvert.SerializeObject 使用了反射来动态遍历对象的属性和字段。这可能在某些平台…

【网络云SRE运维开发】2025第3周-每日【2025/01/16】小测-【第15章 bgp路由协议】理论和实操解析

文章目录 一、选择题二、理论题三、实操题 【网络云SRE运维开发】2025第3周-每日【2025/01/16】小测-【第15章 bgp路由协议】理论和实操解析 一、选择题 答案&#xff1a;B 解题思路&#xff1a;BGP&#xff08;Border Gateway Protocol&#xff09;是边界网关协议&#xff0c…

npm发布工具包+使用

1.初始化package包 npm init -y {"name": "common-cjs-tools","version": "1.0.0","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" &&…

Spring boot面试题----Spring Boot核心注解有哪些

一、@SpringBootApplication 功能: 这是一个组合注解,相当于同时使用了 @Configuration、@EnableAutoConfiguration 和 @ComponentScan 三个注解。它是 Spring Boot 应用程序的入口点,通常添加在应用程序的主类上,例如:@SpringBootApplication public class MyApplicatio…

C# Web 开发:ASP.NET Core 从入门到实战

ASP.NET Core 是一个开源、跨平台、高性能的 Web 框架&#xff0c;适用于构建现代 Web 应用和 API。它不仅支持传统的 Web 应用开发&#xff0c;还支持 RESTful API、实时应用、微服务等架构。与传统的 ASP.NET 框架相比&#xff0c;ASP.NET Core 更加轻量级、模块化&#xff0…

http转化为https生成自签名证书

背景 项目开发阶段前后交互采用http协议&#xff0c;演示环境采用htttps协议 &#xff0c;此处为个人demo案例 组件 后端&#xff1a;springBoot 前端&#xff1a;vue web 服务&#xff1a;tomcat 部署环境&#xff1a;linux 生成自签名证书 创建目录 存储证书位置 # mkdir -p…