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 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...
随机推荐
- [转载]TFS源代码管理8大注意事项
目录 1. 使用TFS进行源代码管理 2. 如果代码没放在源代码管理软件里,等于它不存在 3. 要早提交,常提交,并且不要觉得麻烦 4. 提交前要检查你更改了什么 5. 写提交信息时一定要认真 6. ...
- selenium-webdriver(python) (十四) -- webdriver原理
之前看乙醇视频中提到,selenium 的ruby 实现有一个小后门,在代码中加上$DEBUG=1 ,再运行脚本的过程中,就可以看到客户端请求的信息与服务器端返回的数据:觉得这个功能很强大,可以帮助理 ...
- AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...
- idea快捷键总结
使用好快捷键会快很多,这里我慢慢添加我用习惯的快捷键.参考 1.alt+enter 这个几乎万能,有错误提示的时候将光标移动到错误处,然后alt+enter,会给出建议方案:写完一个表达式后,alt+ ...
- SQL Server安全(9/11):透明数据加密(Transparent Data Encryption)
在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...
- php的memcache和memcached扩展区别
老生长谈的问题了.我这里就整理一下. memcache的文档在:http://pecl.php.net/package/memcache memcached的文档在:http://pecl.php.n ...
- 兼容各浏览器的iframe - onlaod事件
上次工作中,在使用 Iframe+FormSubmit进行无刷新提交时,如果后台返回的数据有延迟,或者浏览器对Iframe内容的更改过慢的话,会遇到onload响应在Iframe内容改变之前触发,这也 ...
- a[href$=".pdf"]解释
看过书上的解释,其中$的意思其实是ends with的意思,解释起来就是说选择所有链接指向PDF文件的链接标签,当然还可以是其他类型的文件(.mp4,.doc,.mp4): 当然,这个需要你的浏览器支 ...
- ASP.NET MVC在布局页上使用模型(model)
看到这标题有点怪,一般情况之下,我们很容易在视图与部分视图中使用模型(model),但是如果想在布局页_Layout.cshtml页中使用模型(model),按照普通方式也许没有达到预期的效果,在实现 ...
- android布局属性详解
RelativeLayout用到的一些重要的属性: 第一类:属性值为true或false android:layout_centerHrizontal 水平居中 android:layout_cen ...