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

devtools/2025/1/16 14:24:39/

一. 块元素(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.ppmy.cn/devtools/150974.html

相关文章

OPT: Open Pre-trained Transformer语言模型

摘要 大规模语言模型通常需要数十万计算日的训练时间&#xff0c;展现了在零样本和小样本学习中的显著能力。鉴于其计算成本之高&#xff0c;这些模型在没有大量资本投入的情况下难以复现。对于那些通过API提供的少数模型&#xff0c;研究者无法获取完整的模型权重&#xff0c…

性能测试 - Locust WebSocket client

Max.Bai 2024.10 0. 背景 Locust 是性能测试工具&#xff0c;但是默认只支持http协议&#xff0c;就是默认只有http的client&#xff0c;需要其他协议的测试必须自己扩展对于的client&#xff0c;比如下面的WebSocket client。 1. WebSocket test Client “”“ Max.Bai W…

模之屋模型导入到UE5

去模之屋随便下个模型 安装Blender2.8 插件 cats-blender-plugin &#xff0c; 打开blender 2.8转换 pmx转换fbx https://github.com/absolute-quantum/cats-blender-plugin Index of /release/Blender2.80/ 修改单位 修复贴图 更高清了 点fix model 修复模型 改为编辑模式…

mysql5.7+实现分组排行实现分组排行,自动序列,分组求最值

在做导出时&#xff0c;遇到一个根据价格最低数统计&#xff0c;所以用到了序号排行&#xff0c;mysql 8.0以上版本支持窗口函数&#xff0c;8.0可以参看我另一篇文章 一下总结5.7怎么实现一下几种函数&#xff1a; 1、根据分组的结果是每一行记录生成一个序号&#xff0c;每…

django在线考试系统

Django在线考试系统是一种基于Django框架开发的在线考试平台&#xff0c;它提供了完整的在线考试解决方案。 一、系统概述 Django在线考试系统旨在为用户提供便捷、高效的在线考试环境&#xff0c;满足教育机构、企业、个人等不同场景下的考试需求。通过该系统&#xff0c;用…

504 Gateway Timeout:网关超时解决方法

一、什么是 504Gateway Timeout&#xff1f; 1. 错误定义 504 Gateway Timeout 是 HTTP 状态码的一种&#xff0c;表示网关或代理服务器在等待上游服务器响应时超时。通俗来说&#xff0c;这是服务器之间“对话失败”导致的。 2. 常见触发场景 Nginx 超时&#xff1a;反向代…

72_List列表原理

1.List列表介绍 在Redis的List数据类型中,元素以字符串形式存在,并按照它们被插入的顺序进行有序排列。List允许元素重复,即相同元素可以被多次添加到列表中。每个List的容量上限为2的32次方减1,,也就是4294967295个元素。我们可以添加一个新元素到List列表的头部(左边)…

Plyr 在 vue3 中的使用

1. 安装 Plyr pnpm add plyr 2. 引入 Plyr 在需要使用 Plyr 的 Vue 组件中&#xff0c;引入 Plyr 的 CSS 和 JavaScript 文件。 import "plyr/dist/plyr.css";import Plyr from "plyr"; 3. 在模板中使用 Plyr 在 Vue 组件的<template>中&#…