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 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...
随机推荐
- 基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化
在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...
- [git]撤销的相关命令:reset、revert、checkout
基本概念 工作区 暂存区 本地版本仓库 远程版本仓库 如果不清晰上面的四个概念,请查看廖老师的git教程 这里我多说几句:最开始我使用git的时候,我并不明白我为什么写完代码要用git的一些列指令把我 ...
- 【Android】Android Camera原始帧格式转换 —— 获取Camera图像(一)
概述: 做过Android Camera图像采集和处理的朋友们应该都知道,Android手机相机采集的原始帧(RawFrame)默认是横屏格式的,而官方API有没有提供一个设置Camera采集图像的 ...
- 【Java基础】通用程序设计
Num1:for-each循环优先于传统的for循环 java1.5版本发布之前的做法: for(int i=0;i<a.length;i++){ doSomething(a[i]); } ja ...
- 开启事务时mybatis返回主键id
先说一下没有注解的 先给出实体类: public class City { private int city_id; private String city_name; public int getC ...
- Mybatis学习错误之:重复加载mapper.xml
学习mybatis的时候,突然遇到测试出错.测试mapper代理失败,现在钻研少了,不喜欢看未知的错误了,立即改正.错误打印说mapper.xml已经注册,仔细查看SQLMapConfig.xml发现 ...
- 基于caffe的艺术迁移学习 style-transfer-windows+caffe
这个是在去年微博里面非常流行的,在git_hub上的代码是https://github.com/fzliu/style-transfer 比如这是梵高的画 这是你自己的照片 然后你想生成这样 怎么实现 ...
- 矢量Chart图表嵌入HTML5网络拓扑图的应用
使用 HT for Web (以下简称 HT)开发HTML5网络拓扑图的开发者有 Chart 需求的项目的时候,感觉很痛苦,HT 集成的 Chart 组件中,并不包含有坐标,在展现方面不是很直观,但是 ...
- C#对图片文件的压缩、裁剪操作初探
在做项目时,对图片的处理,以前都采用在上传时,限制其大小的方式,这样带来诸多不便.毕竟网站运维人员不一定会对图片做处理,经常超出大小限制,即使会使用图片处理软件的,也由于个人水平方面原因,处理效果差强 ...
- 【UWP】批量修改图标尺寸
UWP开发中项目用到的图标资源非常多,通常每一种图标都有几种不同的尺寸,一般来说,我的项目所有Package.appxmanifest用到的图标就有40个,通常这些图标都是一样的,只是尺寸大小不一而已 ...