HTML/CSS 元素的类型block, inline, inline-block

最新推荐文章于 2025-09-27 16:37:54 发布

原创

最新推荐文章于 2025-09-27 16:37:54 发布 · 522 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

本文探讨了HTML/CSS中三种基本的元素类型：block、inline和inline-block。详细解释了它们的特性，如何影响页面布局，并通过实例展示了它们在实际网页设计中的应用。

HTML/CSS 元素的类型block, inline, inline-block

<!-- 1. block -->
<div class="block-div">独占一行</div>standalone in one line
<div class="block-div">我也独占一行</div>


<!-- 2. inline -->
<span class="inline-span">我是一个span</span><strong class="inline-strong

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Punkerwei

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

关于css display: inline block inline-block的区别分析

01-21

display:inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。支持的浏览器有：Opera、Safari。但很遗憾，最...

Firefox Bug: inline/inline-block的间隙采用代码缩进可解决

09-25

在网页布局中，`inline-block` 是一种常用的CSS布局方式，它允许元素保持内联特性的同时，具有块级元素的宽度和高度可调整性。然而，`inline-block` 在不同浏览器间存在兼容性问题，特别是在Firefox中有一个知名的...

参与评论您还未登录，请先登录后发表或查看评论

html中的block,inline,inline-block

风轻云淡

11-01

7498

display:block 1.block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。 2.block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。 3.block元素可以设置margin和padding属性。 display:inline 1.inline元素不会独占一行，多个相邻的行内元素会排列在同一...

html的块级、内联、内联块级元素基础

weixin_34409822的博客

11-21

197

概念块级：block 内联：inline 内联块级：inline-block 在html元素中，元素会有display属性 display属性默认值是block，那么该元素是块级元素。 display属性默认值是inline，那么该元素是内联元素。没有元素的display默认值是inline-block。 display属性值可以被设置，比如可以把块级元素div的disp...

HTML 中的行级元素（inline）、块级元素（block）、行内块元素（inline-block）

最新发布

老韩的Linux云计算架构师进阶之路

09-27

1264

类型定义块级元素（Block-level Element）默认独占一行，可以设置宽高，前后自动换行。常用于布局结构。如<div><p><h1>等。行级元素（Inline Element）不独占一行，多个可并排显示，不能直接设置宽高，宽高由内容决定。如<span><a><strong>等。行内块元素（Inline-block Element）结合两者优点：不独占一行（像 inline），又能设置宽高（像 block）。如<img><input><button>等。

使用类选择器在div块实现透明背景（包含实例代码）

qq_41904864的博客

04-12

659

使用类选择器在div块实现透明背景，还可更改背景颜色的透明度，让快与快之间便于区分，错落有致。

HTML block inline inline-block

wengduke的博客

07-13

298

1.block 块级元素特点： a.block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父级宽度 b.block元素可以设置width,height属性。块级元素即使设置了宽度，仍然是独占一行。 c.block元素可以设置margin和padding属性。常见的有：div p h1-h6 ol ul dl table blockquote for...

html中block，inline和inline-block概念和区别

一只苟延残喘的卑微蝼蚁

07-22

2092

总体概念 block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被显示为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL,

CSS属性display:inline-block用法深入理解

12-13

在CSS布局中，`display:inline-block`是一个非常重要的属性，它结合了`block`和`inline`两种显示方式的优点，使得元素既能保持内联元素的特性（如同行排列，允许空格），又能拥有块级元素的特性（如设置宽高，垂直居...

html中display属性inline,css中的display属性(行内元素和块级元素)

weixin_29661213的博客

06-07

1085

我们常用的display属性值有：inlineblockinline-blocknone把 display 设置成 none 不会保留元素本该显示的空间，但是 visibility: hidden 还会保留。我们最关心的还是display:inline、display:block和display:inline-block的区别：inline特性内联对象inline给它设置属性height和widt...

常见的inline元素、block元素、inline-block元素

weixin_42012282的博客

05-30

2310

1.背景介绍 2.知识解析 3.常见问题 4.解决方案 5.编码实战 6.扩展思考 7.参考文献 1.背景介绍历史这三个元素到底是怎么产生的。 line和block可能是类似于1+1=2的基础概念，还记得在没有网络的时代，有一种叫做剪报的东西，它是把从报刊杂志等上面剪下的文字、图片资料，...

<q><blockquote> block,inline,元素分类

chq11106004389的博客

12-22

684

-内联（inline）元素：正常元素块（block）元素：空（void）元素：只需要一个开始标记，无需块元素常用于Web页面构建主要模块，内联元素用来标记小段内容。启示：设计页面时，一般从大到小。block first,then inline.

div inline-block

qq 117791303

12-26

363

#div_top { position: absolute; right: 5px; top: 0; height: 30px; margin: 0px; background: #f2f2f2; border: 1px solid #000; z-index: 999; left: 5px; } #div_top div { display: inline-block; height: 30px; width: 30px; bo.

＜div class=“block“ style=“margin: 10px auto“＞

weixin_52098544的博客

10-27

369

【代码】＜div class=“block“ style=“margin: 10px auto“＞

div 块元素（block）与 span 内联元素（inline）

Java_c#

09-07

2648

在谈论CSS布局时，我们需要提前知道一些东西。对于html各种标签/元素，可以从块的层面做一个分类：要么是block(块元素)，要么是inline(内联元素)： block（块）元素的特点： ① 总是在新行上开始； ② 高度，行高以及外边距和内边距都可控制； block（块）元素的特点效果： ③ 宽度缺省是它的容器的100%，除非设定一个宽度。 ④ 它可

div 和 block&inline

weixin_33910434的博客

06-01

126

IE6、IE7下DIV默认高度是10px，FF则为0px，如果你在页面中放置一个空的DIV的而且又没有定义它的高度的话，则IE6和IE7显示高度为10px，FF则显示为0px， IE6下默认的字体尺寸大致在 10px-14px 之间，当你试图定义一个高度小于这个默认值的 div 的时候， IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height...

<div>里用display：block有用么？

IT技术宅-北方的刀郎

03-21

517

里用display：block有用么？2010-11-20 16:05ccalen | 分类：Html/Css | 浏览76565次是块元素，那在布局时候，在div的元素里面写display：block有用么？是不是div里就没有必要写display：block呢？分享到： 2010-11-22 21:22提问者采纳对所有的块元素都没有意义，块元素的dispaly属性默认值为block，没必要再显

html中div的line,CSS中块级元素(block)和行内元素(line)

weixin_42535720的博客

06-11

2987

HTML中的元素可分为两种类型：块级元素和行级元素块级元素：block每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素块元素的特点:①、总是在新行上开始；②、高度，行高以及外边距和内边距都可控制；③、宽度缺省是它的容器的100%，除非设定一个宽度。④、它可以容纳内联元素和其他块元素块级元...

div与span，id与class，block与inline，inline-block的区别！

qq_35788269的博客

05-13

2596

div与span，id与class，block与inline的区别！这次我们来学习几组CSS元素的区别！相信小伙伴们在使用的时候肯定有过这样的疑问吧？什么时候用什么时候用class？DIV。span到底咋回事的啊！扎心了，老铁！第一组：DIV与SPANdiv与span的区别呢，博主已经在另外一片文章之中说过了！觉得他比较重要再来唠叨一次把233...

CSS inline-block详解：浏览器兼容与布局挑战

CSS教程深入探讨了inline-block在不同浏览器中的显示行为，这是一种非常实用的技术，尤其在处理网页布局时。inline-block元素的特性使得它能够在行内元素与块级元素之间切换，实现自适应布局，但同时也带来了一些...