该不该用inline-block取代float? inline和float的区别?
该不该用inline-block取代float?
让块级元素 水平排列的通常方式是float, 但是float可能会带来很多意外的问题
可以考虑用inline-block, 既能实现同样的效果, 但是还能避免 float 的问题:
行内块元素(inline-block elements)在内部他的表现类似block元素,比如他拥有block元素的width height,padding,border与margin,而外部的排列方式有类似行内元素,即水平排列,而不是像块级元素一样从上到下排列
块级元素(block elements),来源于CSS盒子模型。块级元素包含width height,padding,border与margin,他们的排列方式是从上到下排列。 行内元素,排列方式是水平排列。
inline和float在理论上的区别?
虽然设置浮动跟设置inline-block有些特征类似,但两者的区别还是非常明显的:
1. 文档流(Document flow):浮动元素会脱离文档流,并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然,周围元素不会环绕这个元素,你也不可能通过清除inline-block就让一个元素跑到下面去。
2. 水平位置(Horizontal position):很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上,均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display:inline-block,则对父元素设置一些定位属性会影响到子元素。(这还是因为浮动元素脱离文档流的关系)。
3. 垂直对齐(Vertical alignment):inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线,但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。
4.空白(Whitespace):inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了,当你对这些元素设置inline-block时,这些元素之间就会出现空白。而浮动元素会忽略空白节点,互相紧贴
IE6和IE7:Ie67对此属性部分支持。如果你要兼容这些浏览器,必须解决这个问题。这不是个大问题,但值得留意一下。
如果你考虑了上面这些东东,你可以了解到,inline-block元素跟元素设置浮动后的表现差别并不是很大。对盒子设置浮动后,同样会水平排列。虽然他们实现的原理不同,但内部表现为块级元素,水平排列这种需求,浮动跟inline-block都适合实现。
解决空白问题
你现在估计已经跃跃欲试了,不过估计不想让那些空白出现。这里有一些方法来去掉空白:
1. 删除html中的空白:不要让元素之间换行,这可能比较蛋疼,但也是一种方法,特别是你元素不多的时候。
2. 使用负边距:你可以用负边距来补齐空白。(使用负边距的一个重要 理由就是: 为了位置上的调整, 使得负边距能够补齐空白)... 但你需要调整font-size,因为空白的宽度与这个属性有关系。我认为是0.25em,但我不确定。如果有人知道可以留言告诉我。
3. 给父元素设置font-size:0:不管空白多大,由于空白跟font-size的关系,设置这个属性即可把空白的宽度设置为0.在实际使用的时候,你还需要给子元素重新设置font-size。
什么时候使用inline-block,什么时候使用float?
什么时候使用,取决于你的设计稿跟解决方法。如果你需要文字环绕容器,那浮动是不二选择。如果你需要居中对齐元素,inline-block是个好选择。
最终,这可以归结为float跟inline-block的两种属性作用后的区别,你需要对其作出选择。
1.**使用inline-block:当你需要控制元素的垂直对齐跟水平排列时,使用inline-block。// 要控制对齐问题时, 请使用 inline-block! **
2. 使用浮动:<font color='blue'>当你需要让元素环绕某一个元素时</font>,或者需要支持旧版本ie,或者<font color='blue'>不想处理inline-block带来的空白问题时</font>,使用浮动。
该不该用inline-block取代float? inline和float的区别?的更多相关文章
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- [CSS3] CSS Display Property: Block, Inline-Block, and Inline
Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...
- 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元素的特点是: 总是在 ...
- 关于block元素和inline元素
呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- html css float left与 float right的使用说明
点评: CSS中很多时候会用到浮动来布局,也就是经常见到的float:left或者float:right,简单点来说,前者是左浮动(往左侧向前边的非浮动元素飘,全是飘得元素的话,就按照流式来浮动从左到 ...
- html css float left与 float right的使用说明(转)
点评: CSS中很多时候会用到浮动来布局,也就是经常见到的float:left或者float:right,简单点来说,前者是左浮动(往左侧向前边的非浮动元素飘,全是飘得元素的话,就按照流式来浮动从左到 ...
- c++模板使用出错情况error LNK2019: unresolved external symbol "public: float __thiscall Compare<float>::min(void)" (?min@?$Compare@M@@QAEMXZ) referenced in function _main
将类模板在头文件中定义,类的成员函数在头文件中声明,头文件中只留下接口,函数的实现在另一个.cpp文件中,这样编译出来错误error LNK2019: unresolved external symb ...
- public static float CompareExchange(ref float location1,float value,float comparand)
https://msdn.microsoft.com/en-us/library/k9hz8w9t(v=vs.110).aspx Compares two single-precision float ...
随机推荐
- PLSQL设置显示的字符集及PLSQL的一些自身设置
一.关于PLSQL无法正确显示中文 刚才下载安装了PLSQL Developer 9.0.0.1601 汉化绿色版,执行SQL查询语句,发现显示的数据中只要有中文都会以?表示.经过网上查询得知这是客户 ...
- js-一种去掉数组中重复元素的方法
思路来源于某个同学的博客 function norepeat(arr){ return arr.filter(function(val,index,array) { return array.inde ...
- 【bzoj3218】 a + b Problem
http://www.lydsy.com/JudgeOnline/problem.php?id=3218 (题目链接) 题意 给${n}$个格子涂白或黑色,白则${w_i}$,黑则${b_i}$的好看 ...
- UVa 673 Parentheses Balance
一个匹配左右括号的问题 /*UVa 673 Parentheses Balance*/ #include<iostream> #include<algorithm> #incl ...
- Python统计脚本行数(fileinput)
__author__ = 'metasequoia' # -*- coding: utf-8 -*- import fileinput def Count(): count_num = 0 for l ...
- FZU みねちゃんの修罗场(从一堆出现三次的数中找出出现两次的数)
みねちゃんの修罗场 Time Limit: 5000 mSec Memory Limit: 1024 KB Description みねちゃん是个成绩优秀大学二年级学生,本来是和像自己妹妹一般 ...
- PHP面向对象之朝花夕拾
虽然平时都在用面向对象的思维编程.但是都是基于框架,很多技术细节一段时间不用就会逐渐模糊.拾遗部分:面向对象的三大特称:继承多态封装. 构造方法.__construct() 构造方法.再new的时候 ...
- 优化DP的奇淫技巧
DP是搞OI不可不学的算法.一些丧心病狂的出题人不满足于裸的DP,一定要加上优化才能A掉. 故下面记录一些优化DP的奇淫技巧. OJ 1326 裸的状态方程很好推. f[i]=max(f[j]+sum ...
- 4 构建Mysql+heartbeat+DRBD+LVS集群应用系统系列之Lvs为Mysql-slave做负载均衡
preface Mysql+drbd+heart能够实现Mysql的高可用了,master出现故障的时候能够快速切换.在现在的业务情况下,读操作多,写操作少的情况下,一台DB server明显扛不住, ...
- Docker入门教程(四)Docker Registry
Docker入门教程(四)Docker Registry [编者的话]DockerOne组织翻译了Flux7的Docker入门教程,本文是系列入门教程的第四篇,介绍了Docker Registry,它 ...