display:block|inline|inline-block;各自的特征

最新推荐文章于 2024-03-31 16:06:48 发布
最新推荐文章于 2024-03-31 16:06:48 发布
阅读量502 收藏 6
点赞数 1
CC 4.0 BY-SA版权
分类专栏： css 文章标签： display
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iHopen/article/details/52555889
本文详细介绍了CSS中的三种主要显示模式：block、inline及inline-block的特点与应用。包括它们如何影响元素布局、支持的CSS属性范围及其在不同浏览器下的兼容性表现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

☆display:block  

  1、在没有设置宽度时，默认撑满一行。

  2、默认块元素独占一行

  3、支持所有css命令


☆display:inline

  1、宽高由内容撑开

  2、不支持宽高

  3、一行上可以显示继续跟同类的标签

  4、不支持上下的margin

  5、标签之间的换行被解析


☆display:inline-block

  1、块元素能在一行上显示

  2、内联元素支持宽高

  3、未设置宽高时，由内容撑开宽度

  4、标签之间的换行被解析

  5、ie6 ie7不支持块状属性的inline-block


<mark>妙味课堂</mark>

25-display:block；display: inline；display: inline-block；
qq_47462646的博客
12-05 454
【代码】25-块标签,行内标签,行内块标签，特殊标签。
display属性理解： inline ， block， inline-block+BFC格式上下文、盒模型
hhhh
04-28 697
display的常用的属性值，inline ， block， inline-block 块级元素 总是从新行开始 width、height、margin、padding都可以控制 宽度默认是页面的100% 可以容纳内联元素和其他块元素 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> <di
[转]css中display:inline-block
weixin_30922589的博客
08-04 253
很多时候我们必须使一些块元素并排显示，一般想到的是必须使用浮动，但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG，所以很多时候不得不把这个块元素套在一个内联元素里面，然后给内联元素浮动和边距。今天看到了怿飞、秦歌和乌龙茶关于display:inline-block的文章，很不错，综合一下，记录下来。display:inline-block简单来说就是将对象呈递为内联对象，但是对...
「前端早读君008」新手必踩坑之display: inline-block
weixin_34416754的博客
01-02 285
今日励志语 往日不可追，来日犹可期，祝大家2019年继往开来 迷之间隙 我们创建一个导航列表，并将其列表 item 设置为 inline-block，主要代码如下： <div class="nav"> <div class="nav-item"><a>我</a></div> ...
浅谈block, inline和inline-block的区别
weixin_30580943的博客
04-24 139
block 块元素 inline 内联元素 常见的块元素有：div, p, h1~h6, table, form, ol, ul等 常见的内联元素有：span, a, strong, em, label, input, select, textarea, img, br等 display:block特点 1、独占一行，多个block元素另起一行，默认情况下，block元素宽度自动填满...
display: inline-block
xm2by的博客
06-22 896
display: inline-block &amp;amp;lt;div class=&amp;quot;container&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;item&amp;quot;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt; &amp;amp;lt;div class=
display:inline | block |inline-block
09-27
display:block就是将元素显示为块级元素. block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度, , , <form>, <ul> 和 是块元素的例子。
CSS属性display:inline-block用法深入理解
09-25
`display:inline-block`是其中一种特殊的值，它结合了`inline`和`block`两种显示特性的优点，使得元素既能像内联元素一样并排显示，又能像块级元素一样控制内容的宽度和高度。下面我们将深入探讨`display:inline-...
关于css display: inline block inline-block的区别分析
09-25
`display: inline`、`display: block` 和 `display: inline-block` 是三种常见的值，它们各自具有不同的行为和用途。 1. **display: inline** - `display: inline` 使得元素以行内元素的方式呈现，这意味着它们会...
CSS display：inline-block的元素特点：
weixin_30750335的博客
09-08 189
将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 在CSS中，块级对象元素会单独占一行显示，多个block元素会各自新起一行，并且可以设置width,height属性；而内联对象元素前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满，对inline元素设置width,height属性无效。 我们有个时候既希望元素具有宽度高度特性...
浅谈display：inline-block
热门推荐
bigboom_的博客
04-23 2万+
css之display:inline-block布局 先写几个常用的display布局方法 1.display：none 用来在不删除元素的情况下隐藏或显示元素。 它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。 2.display：block 块级元素 通常可以用来搭配display：none来实现元素的显示或隐藏，也可以作为块级元素来使用，使元素独占一行 3.displ
display的inline-block属性
08-06 981
对于IE8+以及现代浏览器，直接使用： {display:inline-block;} 就可以了，支持任意水平的元素。 对于不支持的IE6/7浏览器该怎么办呢？如果是inline水平的元素（如a标签，span标签之类）跟上面一样，直接： {display:inline-block;} 就可以了，对于这两个浏览器，其功效与*zoom:1;是一样的。 如果是block水平的元素，例如li标
display:inline-block详解
最新发布
m0_59508634的博客
03-31 1715
是一个CSS样式属性，它结合了inline和block两个元素类型的特性。在HTML和CSS中，你可以使用这个属性来创建一个块级元素，但是它不会像普通的块级元素（如）那样独占一行，而是会像行内元素（如）那样与其他元素并排显示。同时，元素可以设置宽度（width）和高度（height），就像块级元素一样。这使得成为一个非常有用的布局工具，特别是在需要创建复杂的布局，但又不希望元素独占一行的情况下。
浅谈float和display:inline-block
慎独的博客
12-26 497
1、首先先解释下display的几个属性：inline,block,inline-block; (1)inline:       a、把元素变成行内元素，也就是它可以和其它的元素共占据一行。       b、元素的大小由其内容自动撑开，其宽高是不可修改的。       c、可以使用margin、padding,top,bottom产生边距。       eg:   &lt;span&g...
详细介绍 display: block（块级元素）、inline-block（行内块元素）和inline（行内元素）的差别
qq_43532275的博客
09-05 7206
详细介绍 display: block（块级元素）、inline-block（行内块元素）和inline（行内元素）的差别
HTML行内元素和块级元素的区别
zbb202013030229的博客
12-13 2465
　HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。 一，行内元素与块级元素的区别： 1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别 行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。 块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。 2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它...
CSS display: inline-block；
qq_41045651的博客
07-06 9841
这意味着元素会在一行上显示，并且可以设置宽度、高度、内外边距等属性，同时仍保留内联元素的特性，可以与其他元素在同一行内显示。是一种常用的 CSS 属性，用于将元素以内联块级元素的方式显示，使其具备块级元素的特性，并在一行内与其他元素共享空间。元素可以在一行内显示，并且可以与其他元素共享一行，适用于需要结合文本或其他内联元素进行布局的情况。元素不会独占一行，而是根据其内容的宽度来决定自身的宽度，可以在一行内与其他元素并排显示。元素可以设置宽度、高度以及内外边距等属性，使其具备块级元素的特性。
CSS 中 display 的 block，inline，inline-block 这三个属性的区别
m0_46848664的博客
07-16 2154
要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。常见的内联元素有SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等。1.inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。常见的块级元素有DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等。...
css之display:inline-block布局和浮动布局对比
wordpython
02-23 2355
https://www.cnblogs.com/Ry-yuan/p/6848197.html
display:block|none|inline|compact
07-25
这是关于 CSS 中 display 属性的几个可选值： 1. `block`：元素将被显示为块级元素，占据一整行，可以设置宽度、高度和边距等属性。 2. `none`：元素将被隐藏，不占据任何空间，并且不可点击。 3. `inline`：元素将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值