1.解释一下display的几个常用的属性值,inline , block, inline-block
图一: 两个图可以看出,display:inline-block后块级元素能够在同一行显示,有人这说不就像浮动一样吗。没错,display:inline-block的效果几乎和浮动一样,但也有不同,接下来讲一下inline-block和浮动的比较。 2.inline-block布局 vs 浮动布局 a.不同之处:对元素设置display:inline-block ,元素不会脱离文本流,而float就会使得元素脱离文本流,且还有父元素高度坍塌的效果 b.相同之处:能在某程度上达到一样的效果 我们先来看看这两种布局: >>乍一看两个都能做到几乎相同的效果,(仔细看看display:inline-block中有间隙问题,这个留到下面再讲) c.浮动布局不太好的地方:参差不齐的现象,我们看一个效果: 3.inline-block存在的小问题: a.上面可以看到用了display:inline-block后,存在间隙问题,间隙为4像素,这个问题产生的原因是换行引起的,因为我们写标签时通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符,而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。 b.去除空隙的方法: c.浏览器兼容性:ie6/7是不兼容 display:inline-block的所以要额外处理一下: 4.总结: display:inline-block的布局方式和浮动的布局方式,究竟使用哪个,我觉得应该根据实际情况来决定的: 作者:Ry-yuan 如需转载请标明出处,本文地址:http://www.cnblogs.com/Ry-yuan/p/6848197.html 欢迎访问我的博客:http:// |
|
来自: instl > 《html-css》