所有的主流浏览器都支持display属性,它规定了元素应该生成的框的类型。
display几个常用的属性值:inline,block,inline-block
- inline(行内元素):
- 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行.
- 不能更改元素的height,width的值,大小由内容撑开.
- 可以使用padding上下左右都有效,margin只有left和right产生边距效果,但是top和bottom就不行.
- block(块级元素):
- 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度.
- 能够改变元素的height,width的值.
- 可以设置padding,margin的各个属性值,top,left,bottom,right都能够产生边距效果.
- inline-block(融合行内于块级):
- 结合了inline与block的一些特点,结合了上述inline的第1个特点和block的第2,3个特点.
- 用通俗的话讲,就是不独占一行的块级元素。
display:inline-block后块级元素能够在同一行显示,效果几乎和浮动一样但还稍有不同。
2.inline-block布局 vs 浮动布局
a.不同之处:对元素设置display:inline-block ,元素不会脱离文本流,而float就会使得元素脱离文本流,且还有父元素高度坍塌的效果
b.相同之处:能在某程度上达到一样的效果
我们先来看看这两种布局:
图一:display:inline-block
图二:对两个孩子使用float:left,我在上一篇浮动布局讲过,这是父元素会高度坍塌,所以要闭合浮动,对box使用overflow:hidden,效果如下:
c.浮动布局不太好的地方:参差不齐的现象,我们看一个效果:
图三:
图四:
>>从图3,4可以看出浮动的局限性在于,若要元素排满一行,换行后还要整齐排列,就要子元素的高度一致才行,不然就会出现图三的效果,而inline-block就不会。
用了display:inline-block后,孩子间存在间隙问题,间隙为4px,原因是换行引起的,因为我们写标签时通常会在标签结束服后顺手打回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符,而产生“空白间隙”的真正原因就是这个空白符。
去除间隙的方法:
对父元素添加font-size:0,即将字体大小设为0,那么那个空白符也变成0px,从而消除间隙。
float VS.Inline-block
两者都是很常用的布局方式。
-
如果需要垂直居中,使用inline-block。
-
inline-block有空白字符压缩的问题。
-
使用float,注意要清除浮动。
-
没有特别推荐用哪种,看个人习惯。