`

display 的 inline 、 block、inline-block 区别

阅读更多
引用


【inline】
  1. 行内元素
  2. 宽、高、边距等无效
  3. 不换行

【block】
  1. 块级元素
  2. 宽、高、边距等有效
  3. 换行

【inline-block】
  1. 将对象呈递为内联对象,但是对象的内容作为块对象呈递
  2. 旁边的内联对象会被呈递在同一行内,允许空格。
  3. 宽、高、边距等有效
  4. 不换行
分享到:
评论

相关推荐

    display:inline、block、inline-block的区别(转的)

    本篇文章将深入探讨`display:inline`、`display:block`以及`display:inline-block`这三种主要的显示模式之间的区别,帮助你更好地理解它们在实际开发中的应用。 首先,我们来看`display:inline`。这种模式使得元素...

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

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

    display:inline-block的实际应用

    `display:inline-block` 是 `display` 的一个值,它结合了块级元素(block-level element)和内联元素(inline element)的一些特性,为网页布局提供了更灵活的选择。在本篇文章中,我们将深入探讨 `display:inline-...

    有关display:inline-block在FF出现空白的解决方案

    在网页布局设计中,`display:inline-block` 是一个非常常用且强大的CSS属性,它允许元素在保持块级元素特性的同时,像内联元素一样并排显示。然而,在不同浏览器之间,尤其是在Firefox(FF)上,可能会遇到一些显示...

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

    **CSS属性`display:inline-block`深入理解** 在CSS布局中,`display:inline-block`是一个非常重要的属性,它结合了`block`和`inline`两种显示方式的优点,使得元素既能保持内联元素的特性(如同行排列,允许空格)...

    css之display属性之inline-block布局实现详解

    在这个详解中,我们将深入讨论`display`属性中的`inline`、`block`以及`inline-block`值,以及它们在实际布局中的应用。 1. **`display: inline`** `inline`值使得元素作为行内元素显示,这意味着元素会与其他...

    display:inline-block的原理分析

    `display:inline-block` 是 CSS 中的一个重要属性,用于控制元素的布局方式。这个属性结合了 `display:inline` 和 `display:block` 的特性,使得元素既能像内联元素一样在一行内排列,又能像块级元素一样拥有宽度、...

    使用display:inline-block居中没有宽度的元素

    "使用display:inline-block居中没有宽度的元素"这个主题主要涉及到CSS中的两个关键概念:`text-align`属性和`display`属性的`inline-block`值,它们在实现动态或未知宽度元素的居中对齐上发挥着重要作用。...

    display inline怎么用

    - **`display: inline-block;`**:这种显示方式结合了`inline`和`block`的特点,元素将作为内联元素显示但同时保留块级元素的一些特性,如可以设置宽度和高度。 - **`display: none;`**:隐藏元素,使得元素完全不...

    css display inline block 兼容性问题写法

    CSS中的display属性用来定义元素的显示类型,其中inline-block是一种非常有用的值,它允许你将元素以块级元素的形式显示,同时保持行内元素的特性。这使得元素可以设置宽高而不必使用float属性,并且能够在父容器中...

    inline-block 前世今生1

    【描述】:“同时我们知道 IE6、7 中 display:inline-block 是可以触发 hasLayout 的,触发了 hasLayout的元素表现出来的特征就是一” 【标签】:“软件/插件” 【正文】: display:inline-block 属性是CSS布局中...

    inline-block带来的元素间距问题解决

    首先,`display: inline-block` 是一种混合型布局模式,它结合了`inline`元素的并排显示特性与`block`元素的宽高控制能力。在`inline-block`模式下,元素可以像文本一样排列在同一行,但也可以设置宽度、高度、内...

    IE6的inline-block

    1、display:inline-block 让一个元素具有“区块元素”的属性(可以设置width和height),又具有“内联元素”的属性(不产生换行)。 2、IE中的inline-block IE6不支持这个属性,但IE8开始支持这个属性。 让IE6...

    CSS中使用inline-block来进行居中的示例

    基本方法是使用 display: inline-block, vertical-align: middle样式和伪元素让内容块在容器中居中。我的实现用到了几个在其他地方见不到的新技巧解决了一些问题。  内容区声明的宽度不能大于容器的100% 减去0.25em...

    display:inline | block |inline-block

    display:block就是将元素显示为块级元素. block元素的特点是:总是在新行上开始;高度,行高以及顶和底边距都可控制;宽度缺省是它的容器的100%,除非设定一个宽度, , , <form>, <ul> 和 是块元素的例子。

Global site tag (gtag.js) - Google Analytics