css2元素显示模式及转换

原创 已于 2024-02-18 22:00:08 修改 · 447 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #javascript

于 2024-02-10 23:03:08 首次发布
本文介绍了HTML元素的四种类型：块元素独占一行，行内元素如内联元素可出现在一行中，行内块元素同样可多行存在。还涉及元素之间的转换概念。

一.概念（根据单独占一行还是一行有多个来分类）

e5e334856bd949edb00cc5aa8ce85227.png

 二.分类

1.块元素（但独占一行)

a449fb97ff6d48cfb2718065f8f6bfa9.png

 2.行内元素（内联元素）（一行可以有多个）

3a644ecff02f4141ad4618953e0b5ec2.png

 3.行内块元素（一行可以有多个）

98ac5e1ac7644a2ea3995f1a54ff3579.png

4.总结

7485d77054e34401bda97bf59f86b3d3.png

 

三.转换

 f196ec556f59473f9f0481c590affc3b.png

 

CSS的元素显示模式
m0_64365419的博客
11-23 1419
特殊情况下，我们需要元素模式的转换---->一个模式的元素需要另一个模式的特性。比如：想要增加的触发范围。转换为块元素:display:block;转换为行内元素:display:inline;转换为行内块元素:display:inline-block;举例：
元素的显示模式及转换
Tina_dl的博客
05-02 1065
今天回头看看这些细节好多都忘记了，就做简单记录下。 元素的显示模式分为 1、块元素 2、行内元素两大类 1、块元素（占据一行，可以设置宽高属性） h1~h6， p ， div，ul， ol， li等 2、行内元素（一行内可有多个，不可以设置宽高属性） a， strong，b， em， i， del， s，sin，u，span等 其中span标签是最典型的行内元素（也叫内联元素） 其中CSS样式为 行元素转块级元素 dispaly:block； 块元素转换成行内元素 display:inlin.
css的元素显示模式
2301_80872441的博客
02-28 952
可以更好的布局我们的网页。元素显示模式就是元素(标签)以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。html元素可以分为。
认识CSS之元素显示模式
榕城候佳人的博客
03-10 1089
网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局网页。所以元素显示模式就是元素（标签）以什么方式进行显示，比如自己占一行，一行可以放多个等。HTML主要分为块元素和行内元素😃。
Web前端-CSS的元素显示模式
2301_79188932的博客
10-15 687
在行内元素中有几个特殊的标签—— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。常见的行内元素有<a>、<strong>、<b>、、<i>、<del>、<s>、<ins>、<u>、<span>等，其中。常见的块<em>元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。特殊情况下，我们需要元素模式的转换，简单理解:一个模式的元素需要另外一种模式的特性，比如想要增加链接<a>的触发范围。标签是最典型的行内元素。
CSS：元素显示模式与背景
博客网站 https://async-area.com
12-21 1440
讲解CSS中的元素显示模式，背景属性
【CSS】标签显示模式 ③ ( 标签显示模式转换 | 行内元素转换为块级元素 | 块级元素转换为行内元素 | 块级元素、行内元素转换为行内块元素 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-08 5801
一、标签显示模式转换 1、行内元素转换为块级元素 2、块级元素转换为行内元素 3、块级元素、行内元素转换为行内块元素
CSS教程（六）- 元素显示模式
Oblning的博客
11-10 957
元素显示模式，块元素，块级元素，行内元素，行内块元素，元素的模式转换
CSS-2：CSS的元素显示模式
2403_84646142的博客
11-16 929
作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解它们的特点可以更好地布局我们的网页元素显示模式就是元素（标签）以什么方式进行显示比如div自己占一行，比如一行可以放多个spanHTML元素一般分为块元素和行内元素两种类型。
CSS的元素显示模式(块元素、行内元素、行内块元素和显示模式转换)
Bulut0907
01-28 4589
目录1. 块元素2. 行内元素3. 行内块元素4. 转换为块元素5. 转换为行内元素6 转换为行内块元素 1. 块元素 常见的有<div>、<ul>、<ol>、<li>、 特点如下： 独占一行 可以设置高度、宽度、外边距、内边距 宽度默认是父级的100% 里面可以放行内元素或块级元素 注意：文字类的块元素，如<p>、<h1> ~ <h6>，里面不能放块元素 2. 行内元素 常见的有<strong>、<b
CSS技术解析：元素显示模式与背景属性的应用指南
02-11
内容概要：本文主要探讨CSS中的两个重要概念及其应用——元素显示模式和背景属性。首先介绍了元素显示模式，涵盖块级元素、行内元素和行内块元素三者的定义、特点、相互间区别及其实际使用案例；接着讲解了这些元素...
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
07-30
2.css的元素显示模式 html元素一般分为块元素和行内元素 （1）块级元素 div p h1-h6 ul ol li ①独占一行 ②宽度 高度 外边距 内边距都可控制 ③宽度默认是容器（父级元素）100%的宽度 ④是一个容器及盒子 里面...
PaperStudio：WYSIWYG文档的Web实现——从CSS Print到客户端PDF生成的技术解析
xinyu_Jina的博客
12-15 642
通过精确控制页面布局、利用 SVG/Canvas 进行高保真渲染，并结合客户端库实现安全的 PDF 导出，这类工具成功地将传统的桌面级排版功能带到了 Web 平台。它将复杂的 CSS Print 规则和 PDF 生成逻辑，封装在了一个用户友好的交互界面中。将 CSS Print 规范、矢量渲染和客户端 PDF 生成技术结合，使得 Web 应用具备了媲美桌面级软件的文档处理能力。等客户端库，在不依赖后端服务器的情况下，将动态生成的 DOM 结构安全、高效地转换为高质量的 PDF 文档。
tailwindcss：安装避坑，从 0 到项目跑通
qq_45796592的博客
12-17 911
本文详细介绍了TailwindCSS v3.4.x的安装配置流程及优化技巧。首先说明了官方文档在实际操作中可能遇到的问题，强调了核心依赖tailwindcss、postcss和autoprefixer的重要性。接着详细讲解了配置文件的生成和修改方法，包括自定义颜色配置和效果验证。文章还分享了优化方案，提供了一个cs工具方法来提升类名编写的可读性。最后推荐了VSCode插件TailwindCSS IntelliSense来增强开发体验。
CSS mix-blend-mode 实现元素融合效果
小小•愿望的博客
12-17 508
CSS的mix-blend-mode属性可实现元素内容与背景的颜色混合，提供多种混合模式如multiply（正片叠底）、screen（滤色）、difference（差值）等，类似Photoshop图层效果。其中difference模式能根据背景色自动调整文字颜色，如白色文字在黑色背景保持白色，在白色背景变为黑色，解决文字与背景色冲突问题。该属性兼容现代浏览器，适用于动态色彩适配场景，示例展示了不同背景色下文字自动反色的效果。
html+css基础：07、css2的复合选择器_伪类选择器(概念、动态伪类、结构伪类(核心)、否定伪类、UI伪类、目标伪类、语言伪类)及伪元素选择器
狮子座的男孩
12-15 599
本文介绍了CSS中多种伪类选择器的概念和应用。主要包括：1）伪类选择器的基本概念，通过a:link和a:visited示例说明元素特殊状态的样式控制；2）动态伪类选择器，展示链接在不同状态（未访问、悬停、激活、已访问）下的样式变化；3）结构伪类选择器，详细解析first-child、last-child、nth-child等选择器的使用方法和效果，包括按兄弟元素和同类型兄弟元素计算的不同应用场景。通过多个HTML结构和对应的CSS样式示例，直观展示了各类伪类选择器的实际应用效果。
Vue 3 的魔法：用 v-bind() 让 CSS 爱上 TypeScript 常量
最新发布
ttod的博客
12-18 693
Vue 3 的魔法：用 v-bind() 让 CSS 爱上 TypeScript 常量
CSS 网格布局（Grid Layout）核心概念、基础语法、常用属性、实战示例和进阶技巧全面讲解
只会写bug
12-15 1064
CSS网格布局(Grid Layout)是一种强大的二维布局系统，相比弹性布局更适合复杂页面设计。核心概念包括网格容器、网格项、网格轨道等。基础使用需定义网格容器(display:grid)，通过grid-template-columns/rows设置行列尺寸，支持px、fr、repeat()等单位。关键属性分为容器属性(如gap、grid-template-areas)和项目属性(如grid-column、grid-area)。实战中可实现3列自适应网格或经典页面布局(grid-template-area
CSS容器查询：让组件学会“见机行事“的魔法
ttod的博客
12-18 478
CSS容器查询：让组件学会"见机行事"的魔法
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值