`

清浮动与display：inline-block区别

    博客分类：
  • css
 
阅读更多

清浮动：由于内部有浮动的内容，所以使其脱离文档流，不影响父类的正常文档流，如此，外面的容器的高度不会因为内部内容而撑开，

前提条件是：：块级元素+父级容器的高度是自适应的（height未设置或者是height：auto）

display：inline-block：针对块级元素和内联元素的属性效果的互换，如块级元素行内制和内联元素的块级效果等

分享到：
| css important
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    4. **使用浮动布局**：虽然`float:left`或`float:right`不是`display:inline-block`，但它可以实现类似的效果，并且不会受到空白的影响： ```css .box { float: left; } ``` 5. **使用Flexbox或Grid布局**：...

    display:inline-block的实际应用

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

    display:inline-block的使用示例

    在给定的示例中，我们看到如何使用`display:inline-block`来解决浮动元素导致的换行问题。 在传统的多列布局中，我们通常使用`float:left`来实现元素并排显示。然而，这种方法存在一个问题，即如果父容器的宽度小于...

    让IE6/IE7支持display:inline-block属性的两种方法

    在Web开发中，`display:inline-block`是一种非常实用的CSS属性，它允许元素拥有块级元素的特性（如自定义宽度、高度），同时保持内联元素的排列方式，即允许元素在同一行显示。然而，IE6和IE7这两个较老的浏览器对`...

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

    当一个元素设置为`display: inline-block`，它既能保持内联元素的宽度由内容决定，又能像块级元素一样进行水平居中，同时还能包围浮动元素。 然而，`inline-block`元素的一个限制是，它们的外边距不能设置为`auto`...

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

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

    css解决display:inline-block;产生的缝隙（间隙）的方法

    今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙，这很显然不是我想要的效果，所以我就换成了左浮动，这样缝隙的问题是解决了，但是需要设置父元素的宽度...

    span掉落的演示代码

    当我们设置`display:block-inline`或者`display:inline-block`（注意，实际的CSS属性是`inline-block`，而不是`block-inline`），我们希望创建一种元素，它既能像内联元素一样并排显示，又可以像块级元素一样设置宽...

    float元素浮动后高度不一致导致错位的解决办方法

    浮动子元素定义需要的font-size， 再定义display:inline-block;vertical-align:top; 复制代码代码如下: ul{ margin:0; padding:0; list-style-type:none; font-size:0; } ul li{ width:160px; display:inline-...

    如何解决IE6/IE7不识别display:inline-block属性

    还有一种方法就是设置li为display:inline;这样可以达到同样的效果，但是问题是inline元素的特性：默认无法设置宽度，高度，以及上下margin，（关于padding，情况有点特殊，在ie6，7中 inline元素是无法设置上下...

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

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

    使用font-size：0px 来制作跨浏览器的inline-block css属性

    现代浏览器的最新版都支持inline-block，只有该死的ie6、7不支持inline-block，但ie6、7可以通过 display：inline；zoom：1；来模拟。 下面是inline-block兼容的代码： 复制代码代码如下: display:inline-block;*...

    使用font-size：0 来去掉inline-block元素之间的空隙方法

    现代浏览器的最新版都支持inline-block，只有该死的ie6、7不支持inline-block，但ie6、7可以通过 display：inline；zoom：1；来模拟。 下面是inline-block兼容的代码： view sourceprint?display:inline-block;*...

    深入了解float与inline-block

    在CSS布局中，`float` 和 `inline-block` 是两种重要的布局方式，它们各有特点，且在不同场景下有着不同的应用。本文将深入探讨这两种属性的兼容性、对父元素的影响，以及它们在布局中的差异。 首先，让我们来看...

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

    `display: inline-block`属性允许一个元素表现得像一个内联元素（即不换行显示），同时又具有块级元素（如div）的特性，如设置宽度、高度等。这种特性使得`inline-block`成为居中对齐的一种实用方法，尤其是当元素...

    项目笔记项目笔项目笔记记

    - **IE5 浏览器问题**：在 IE5 浏览器中，如果父元素设置了 `text-align:center`，而子元素设置了 `display:inline` 或 `display:inline-block`，则可能会出现文本对齐异常的情况。 - **解决方法**：确保在不同的...

    跨浏览器的inline-block声明上承诺了很多提供的却很少

    啊，inline-block，挺难琢磨并且迷人的声明上承诺了很多，其实提供了很少。很多次我拿到类似这样...我们以一个无序列表开始这个简单的页面，并把 display 设置为 inline-block: 复制代码代码如下:<ul> <li> <h4>This i

    一文掌握CSS 属性display:flow-root声明

    如果外部显示类型为`inline`或`run-in`，并且元素在`block`或`inline`格式上下文中，元素表现为内联框；否则，表现为块级容器框。 ### 结语 总的来说，`display:flow-root`是一个强大且灵活的布局工具，能够帮助...

    网页的效果：Style 中的Display用法.docx

    此外，`display`属性在CSS1和CSS2中有不同的支持程度，例如`display:none`和`display:block`在CSS1中就已经被广泛支持，而`display:inline-block`则是从CSS2.1开始引入的，对于跨浏览器的兼容性需要特别注意。...

Magicbox
Global site tag (gtag.js) - Google Analytics