float 和 inline-block的心得
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的心得的更多相关文章
- 使用float和display:block将内联元素转换成块元素的不同点
使用float和display:block将内联元素转换成块元素的不同点 使用float和display:block将内联元素转换成块元素的不同点:内联元素可以转换成块级元素,常用的方法比如可以为内联 ...
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- oc中的block使用心得
typedef void (^ simpleBlock) (void); typedef double (^multiplyTwoValues)(double, double); typedef vo ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- CSS 基础总结
CSS基础 Doctype 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...
随机推荐
- 云计算之路-阿里云上:Web服务器遭遇奇怪的“黑色30秒”问题
今天下午访问高峰的时候,主站的Web服务器出现奇怪的问题,开始是2台8核8G的云服务器(ECS),后来又加了1台8核8G的云服务器,问题依旧. 而且3台服务器特地使用了不同的配置:1台是禁用了虚拟内存 ...
- Mac删除JDK
安装了1.6以后,没有安装1.7发现Android Studio报错: invalid source release: JDK 1.7 原因是Android Studio需要1.7以上的版本,结果再次 ...
- C#简单问题,不简单的原理:不能局部定义自定义类型(不含匿名类型)
今天在进行代码测试时发现,尝试在一个方法中定义一个委托,注意是定义一个委托,而不是声明一个委托变量,在编写的时候没有报错,VS也能智能提示,但在编译时却报语法不完整,缺少方括号,但实际查询并没有缺少, ...
- 搭建CnetOS6.5x64最小系统及在线yum源的配置
CentOS系统作为红帽系列的一款linux系统,因为其免费.开源,在中小企业中得到了广泛应用,生产上为了更好的利用资源,都采用最小系统安装,因为一个图形界面都会占去系统资源的30%到40%,生产上一 ...
- 自己封装的JS分页功能[用于搭配后台使用]
* 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...
- 【转】 Key/Value之王Memcached初探:三、Memcached解决Session的分布式存储场景的应用
一.高可用的Session服务器场景简介 1.1 应用服务器的无状态特性 应用层服务器(这里一般指Web服务器)处理网站应用的业务逻辑,应用的一个最显著的特点是:应用的无状态性. PS:提到无状态特性 ...
- 实现多表关联来方便你的SELECT查询功能
这次来学习一下多表关联.比如在数据中创建下面几张表,你可以从主键PRIMARY KEY与外键FOREIGN KEY来看到这几张表它们之间的关系. 场所表[dbo].[SixS_Location]: 主 ...
- java反射的基础学习代码
java反射的学习,好多东西不太理解,主要分析了constructor,method,field,数组和调用main函数等反射的多个方面小例子. 主要的练习类 package javaAdvanced ...
- C#编程总结(三)线程同步
C#编程总结(三)线程同步 在应用程序中使用多个线程的一个好处是每个线程都可以异步执行.对于 Windows 应用程序,耗时的任务可以在后台执行,而使应用程序窗口和控件保持响应.对于服务器应用程序,多 ...
- "Hello World!" for the NetBeans IDE
"Hello World!" for the NetBeans IDE It's time to write your first application! These detai ...