CSS样式：转换为行内块元素显示

于 2024-06-07 09:24:55 发布
阅读量348 收藏 1
点赞数 4
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/139515209
版权

使用display: inline-block;转换为行内块元素显示。

示例：

  • span元素是行内元素，如果不加`display: inline-block; 宽度和高度设置不起作用
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>验证</title>
    <style>
        span {
            width: 100px;
            height: 30px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>

</html>

展示效果：
在这里插入图片描述

  • 加`display: inline-block; 宽度和高度设置起作用了
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>验证</title>
    <style>
        span {
            width: 100px;
            height: 30px;
            background-color: pink;
            /* 转换为行内块元素 */
            display: inline-block;
        }
    </style>
</head>

<body>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>

</html>

展示效果：
在这里插入图片描述

听海边涛声
关注
前端-HTML/CSS-元素宽高特点及元素类型转换-块级元素、行级元素、行内块级元素
zx237964689的博客
05-28 2135
1、块级元素:（1）、可以设置宽高（2）、不可以与其他元素待在一行（3）、不设置宽高时，元素的宽度等于父元素的宽，高度由元素内容的高度决定（4）、当设置有宽高时，元素的宽高就是设置的值2、行级元素：（1）、不可以设置宽高，设置的宽高无效（2）、可以与其他元素待在一行（3）、元素的宽高由元素内容的宽高决定3、行内块级元素：（1）、可以设置宽高（2）、可以与其他元素待在一行（3）、当没有设置宽高时，宽高由元素内容决定。
块元素div转变为行内块元素之后如何消除之间间隙
h_4444的博客
02-28 3178
块元素div转变为行内块元素之后如何消除之间间隙 写了三个div，使其变成行内块元素之后，发现，有间隙，哟，我的小天使啊。 最外层父级div宽度width大于三个小div宽度之和 父级div： #aaa{ width: 400px; margin: 0 auto; margin-top: 50px; border: 1px solid navy; } 三个子级div： #a1{ width: 130px; height: 40px;
CSS的元素显示模式(块元素、行内元素、行内块元素和显示模式转换)
Bulut0907
01-28 4302
目录1. 块元素2. 行内元素3. 行内块元素4. 转换为块元素5. 转换为行内元素6 转换为行内块元素 1. 块元素 常见的有<div>、<ul>、<ol>、<li>、 特点如下： 独占一行 可以设置高度、宽度、外边距、内边距 宽度默认是父级的100% 里面可以放行内元素或块级元素 注意：文字类的块元素，如<p>、<h1> ~ <h6>，里面不能放块元素 2. 行内元素 常见的有<strong>、<b
CSS的元素显示模式：块元素， 行内元素 ，行内块级级元素 ，元素的显示模式转换（转换为块元素，转换为行内，元素转换为行内块）
qq_44156869的博客
09-20 1040
文章目录CSS的元素显示模式块元素行内元素行内块级级元素元素显示模式的总结元素的显示模式转换 CSS的元素显示模式 作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。 元素显示模式就是元素 （标签）以什么方式进行显示，比如 <div>自己占一行，比如一行可以放多个 <span>。 HTML元素一般分为块元素和行内元素两种类型。 块元素 常见的块元素有<h>~<h6>、<p>、<div>、&l
css 块元素、行内元素、行内块元素相互转换
最新发布
m0_47791238的博客
10-12 2666
在HTML和CSS中，元素可以分为三类：块级元素（Block-level Elements）、内联元素（Inline Elements）和内联块级元素（Inline-block Elements）。
css 块元素、行内元素、行内块元素极其相互转换
weixin_50632313的博客
09-14 3274
css 块元素、行内元素、行内块元素极其相互转换（黑马笔记）
【CSS】标签显示模式 ③ ( 标签显示模式转换 | 行内元素转换为块级元素 | 块级元素转换为行内元素 | 块级元素、行内元素转换为行内块元素 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-08 5073
一、标签显示模式转换 1、行内元素转换为块级元素 2、块级元素转换为行内元素 3、块级元素、行内元素转换为行内块元素
关于css 行元素和块元素 相互转换 居中
12-13
这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 您可以使用 display 属性改变生成的框的类型。这意味着，通过将 ...
浅谈CSS块级元素与行内元素(内联元素)的区别和联系
09-24
在CSS布局中，块级元素（Block Element）和行内元素（Inline Element）是两种基本的元素类型，它们之间的区别和联系是理解网页布局的关键。本文将深入探讨这两种元素的概念、特点以及它们如何影响文档流。 块级元素...
css中转换为行内样式的解决方案(css-inline)
12-28
聊聊场景 发送邮件 在第三方网站中嵌入HTML 从其他编辑器拷贝编辑好的文章发布到微信、今日头条等自媒体 在以上场景使用行内样式的兼容性要高很多，也可以保持原样式不变 解决方案 juice inline-css 这两种方案功能和 Api 非常相似,这里就以 juice 为例 安装 npm i juice --save 使用 import juice from 'juice' const html = ` <div class=test><h1>测试Juice</h1></div> <style> div{ width: 90%;
css怎么将块元素变成,CSS块元素、行内元素、行内块元素的转换
weixin_31408789的博客
08-03 7217
一、块元素转行内元素：display:inline二、行内元素转块元素：display:blockdiv{display: inline;/*无效width: 500px;height: 500px;*/background-color: red;}p{display: inline-block;}span{display: block;width: 400px;height: 300px;bac...
JS将样式表的样式转换成行内样式 sheetToSelf - 戴向天
戴向天的博客
06-15 770
大家好！我叫戴向天 QQ群：602504799 如若有不理解的，可加QQ群进行咨询了解 // 将样式表的样式装换成行内样式 let sheetToSelf = function(dom){ const sheets = document.styleSheets; const sheetsArry = Array.from(sheets); const $dom = dom.parentNode function cssTextToJSON(cssText){
CSS基础笔记八，display属性详解（变成弹性盒子flex，隐藏none，变成块级元素bolck，变成行内元素inline，变成行内块级元素inlen-bolck）
qq_55006020的博客
06-28 2593
前瞻：display属性可以设置弹性盒子 flex可以设置元素隐藏 none可以更改元素的属性变成块级 bolck变成行内 inline变成行内块级元素 inlen-bolck补充 让一个元素隐藏的几种方式1，更改属性使其隐藏 display：none 隐藏自己，不保留原来的位置2，bisbility：hidden 隐藏自己，保留原来位置3，opacity ：0 背景虚化 虚化到0的时候 自然就隐藏了，隐藏自己 保留原来的位置。
块元素、行内元素、行内块元素
qq_42815580的博客
02-22 224
块元素 特点： 自己独占一行 高度、宽度、外边距、内边距都可以控制 宽度默认是容器（父级宽度）的100% 是一个容器及盒子，里面可以放行内或块级元素 注意： 文字类的元素内不能使用块级元素。 p标签主要用于存放文字，因此p标签里面不能放块级元素，特别是不能放div， 同理h1-h6标签是文字类标签，里面不能放其他块元素。 行内元素 特点： 相邻行内元素在一行上，一行可以显示多个 宽、高直接设置是无效的，只能设置水平方向的内外边距 默认宽度是它本身内容的宽度 行内元素只能容纳文本或其他行内元素 注
3.块元素，行内元素，行内块元素及其元素转换
weixin_62061392的博客
04-09 5054
html块级，行内，行内块元素特点及其转换
【CSS】块级元素转成行内元素，行内元素转成块级元素
坚持不懈 一往无前
12-28 2807
/* 元素 => 块级、行内元素 --- 通用 */ display:inline-block; /* 行内元素 => 块级元素 */ display:block; /* 块级元素 => 行内元素 */ display:inline; /* 行内元素 */ <a>、<b>、<u>、<span>、<img>、<input>、<strong>、 <select>、<sub>、
<q><blockquote> block,inline,元素分类
chq11106004389的博客
12-22 618
-内联（inline）元素：     正常元素                                       块（block）元素：    空（void）元素： 只需要一个开始标记，无需 块元素常用于Web页面构建主要模块，内联元素用来标记小段内容。 启示： 设计页面时，一般从大到小。block first,then inline.
css:行内元素和块级元素的相互转换
baidu_24743861的博客
08-11 3967
1、行内元素转换成块级元素：display：block; 2、块级元素转换成行内元素:display:inline; 3、行内元素转行内块级元素：display:inline-block;
CSS 自动换行, 块级标签 变 行级标签
03-26 1761
word-break: break-all; --自动换行. display: inline; --把块级标签 变 行级标签 display:inline-block; --在当前行显示,而不会换行. 表格特有的CSS 样式: border-collapse: collapse; 这样,单元格之间不会出现间隙.
CSS：行内元素与块级元素的转换与居中方法
关于CSS中的行元素和块元素相互转换以及居中方法，我们首先要理解这两种...理解CSS中的块元素和行内元素以及如何转换它们，是网页布局和居中设计的关键。熟练掌握这些知识，可以有效地创建响应式和用户友好的网页布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值