`

清浮动与display：inline-block区别

    博客分类：
  • css
 
阅读更多

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

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

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

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

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

相关推荐

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

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

    CSS教程：inline-block在各浏览器的显示

    啊，inline-block，挺难琢磨并且迷人的声明上承诺了很多，其实提供了很少。很多次我拿到类似这样的 PSD 文件： 就哭了。 一般说来，这种类型的布局是小菜一桩。固定宽度，固定高度，向左浮动就解决了。但是，这个...

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

    在display属性的值中，inline-block具有一些特殊的混合行为.正如他的名字所暗示的，它具有块级元素的特点，也有行内元素的行为.从块级元素角度来说，可以为他设定外边距和内边距，也可以通过它简便

    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元素是无法设置上下...

    使用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;*...

    CSS display:inline和float:left两者区别探讨

    CSS display是指显示状态，inline表示内联，特点是紧贴着前一个内联元素，而float表示的是浮动，float:left，是针对块级元素的浮动形式，是不同形式的两种状态，感兴趣的朋友可以了解下

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

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

    CSS inline-block属性概述及其使用示例

    Inline-block是元素display属性的一个值，inline-block元素跟元素设置浮动后的表现差别并不是很大，本文有个不错的示例可以让大家知道它的具体使用，喜欢的朋友可以了解下

    CSS实现ul和li横向排列的两种方法

    display:inline-block 即把li变为行内元素且可以设置宽高以及边距，这样也有一个问题，低版本的Ie浏览器不兼容inline-block，建议在其后再加两个属性兼容低版本ie *display:inline; *zoom:1; <!DOCTYPE ...

    四种css 伪类选择器

    } .clearfix {*display: inline-block;_height: 1%;} 我想上面这段代码，很多朋友都非常熟悉，是清理浮动时常用的hack方法。:after伪类与content结合使用，用于往元素类追加内容。:after伪类还有个妙用：用于产生...

    浮动的ul背景及图片的边框的使用

    今天遇到的问题整理： 1.ul中的li浮动时，无论给外层div的class写背景，还是给ul写背景，都是没有效果的。这是因为li浮动时撑不起外层的高度。....clearfix { display:inline-block;} .clear { clear:both

    span设置text-indent不起作用的原因及解决方法

    }后发现并没有起作用，这是因为text-indent只能给块级元素设置，但是如果让span{display:block}时，就会换行，还得通过浮动来控制，增加了麻烦，所以改css为span.t-i{text-indent:-999px;display:inline-block;}

    DIV+CSS垂直居中一个浮动元素

    场景：在一个固定高度的div中，有一个浮动的元素，需要将这个浮动元素垂直居中。 原始代码如下: 复制代码代码如下:<!DOCTYPE html><html> <head> <title>... display: inline-block;

    WEBUI框架JingYes.zip

    JingYes采用大量 display:inline-block 在网格等其他组件中替代 float:float 浮动效果，这种替代必须剔除掉代码中的某些多余空白才能正确体现。这个工作可以交给JS完成，JingYes提供了一个函数 clearTextNode() 来...

    微信小程序scroll-view隐藏滚动条的方法详解

    3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排； 4.包裹 scroll-view 的元素要加上样式–> overflow:hidden;white-space:nowrap; 5.有时候为了美观要隐藏滚动条，需要在样式里加上...

    Homework-1:作业折射

    } .header h1 {display：inline-block; 字体大小：48px； } .header h1 .seo {color：＃d9dcd6; } .header div {padding-top：15px; 右边距：20px； 浮动：正确； 字体系列：“ Gill Sans”，“ Gill Sans MT”，...

    css 清除浮动的新方法

    } .clearfix { display: inline-table; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ 说明： *对大多数符合标准的浏览器应用第一个...

    css(display,float,position)深入理解

    display : block | none | inline | inline-block inline：指定对象为内联元素 block：指定对象为块元素 inline-block：指定对象为内联块元素 none：隐藏对象 float 控制元素是否浮动显示 float : none | left | ...

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