float

优点:

横向排列时比较方便,不存在浏览器兼容问题。

缺点:

1)多行横向排行时,换行后经常不能顶行显示。

2)浮动后会跳出当前流,造成父元素高度塌陷,解决办法比较成熟统一 ,不存在浏览器兼容问题。

inline-block

缺点:最大的问题就是在不同的浏览器下,解决空白间隙的方法会不同,难以统一,兼容性不好。常见解决办法有,父元素设置font-size:0;大部分浏览器可以这样,个别不行的在不影响布局的前提下还可以加个display:table。个人不喜欢用letter-space和word-space总感觉不同浏览会有不同问题。

优点:换行时顶行显示,可以用text-align,white-space等属性操作,text-align:justify两边对齐,效果特棒,white-space:nowrap可以不换行,有时有奇效。

先写这一点,有时间再补充吧

float 和 inline-block的心得的更多相关文章

  1. 使用float和display:block将内联元素转换成块元素的不同点

    使用float和display:block将内联元素转换成块元素的不同点 使用float和display:block将内联元素转换成块元素的不同点:内联元素可以转换成块级元素,常用的方法比如可以为内联 ...

  2. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  3. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  4. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  5. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  6. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  7. inline,block,inline-block解析

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

  8. oc中的block使用心得

    typedef void (^ simpleBlock) (void); typedef double (^multiplyTwoValues)(double, double); typedef vo ...

  9. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  10. CSS 基础总结

    CSS基础 Doctype 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...

随机推荐

  1. Linux的学习--配置LNMP环境

    最近,回到公司,发现电脑都换成linux系统了...很无力... 配置环境,跑起项目来就花了一天...额...在这里记录一下-- 系统是ubuntu 12.04. 一.安装nginx1:ubuntu因 ...

  2. VS2013正则表达式应用示例

    VS2013正则表达式语法 在查找替换对话框中查看 VS2013语法可在查找替换对话框中查看,具体过程如下: 通过编辑->查找和替换->在文件中替换或者相应快捷键(Ctrl+Shift+H ...

  3. layout_weight详解

    注:LinearLayout中的TextView按比例显示的时候,layout_width="0dp"或者layout_height="0dp" 在androi ...

  4. WebGL实现HTML5的3D贪吃蛇游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

  5. 兼容各浏览器的iframe - onlaod事件

    上次工作中,在使用 Iframe+FormSubmit进行无刷新提交时,如果后台返回的数据有延迟,或者浏览器对Iframe内容的更改过慢的话,会遇到onload响应在Iframe内容改变之前触发,这也 ...

  6. 非常完善的Log4net详细说明

      4.1.6 <filter> 过滤器,只能作为<appender>的子元素. 支持的属性: type 必须的,Filter的类型 支持的子元素: param 0个或多个,  ...

  7. javascript日期验证:填写的日期大于等于当前日期

    <script> $(function () { var d = new Date(); var strDate = getDateStr(d); $("#beginTime&q ...

  8. 基于C#的MongoDB数据库开发应用(1)--MongoDB数据库的基础知识和使用

    在花了不少时间研究学习了MongoDB数据库的相关知识,以及利用C#对MongoDB数据库的封装.测试应用后,决定花一些时间来总结一下最近的研究心得,把这个数据库的应用单独作为一个系列来介绍,希望从各 ...

  9. Winform开发框架之读卡器和条码扫描枪的数据接收处理

    在我们开发一些项目的时候,一般需要一些外围的设备进行数据处理,如ID/IC读卡器获取卡号.激光条码扫描枪.USB摄像头.USB方式的小票据打印机(POS打印机).USB来电录音盒.普通打印机等一系列附 ...

  10. 新学C#的List<T>总结

    所属命名空间:using System.Collections.Generic; List<T>类是 ArrayList 类的泛型等效类. 该类使用大小可按需动态增加的数组实现 IList ...