实习第一天,导师让我写个页面,按照往常的习惯,让几个div排列在一行就使用了float:left,方便是方便。但是导师说尽量不要使用浮动,让我去思考一下怎么不用浮动让块级元素放置一行。
于是查到了除了使用浮动还有一种方法,就是把子元素都设置为display:inline-block,这样也能完美实现,但是有个缺点有间隙问题。
间隙为4像素,这个问题产生的原因是换行引起的,因为我们写标签时通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符,而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。
去除空隙的方法:
对父元素添加,{font-size:0},即将字体大小设为0,那么那个空白符也变成0px,从而消除空隙。
接下来写一下浮动和inline-block的区别:
1.对元素设置display:inline-block ,元素不会脱离文本流,而float就会使得元素脱离文本流,且还有父元素高度坍塌的效果,所以使用浮动就得会清除浮动。
这里介绍一下清除浮动的三种方法:
①给父级元素设置高度
②给父级设置overflow:hidden
③ 在所有浮动的子元素后加个div设置clear:both
2.浮动的局限性在于,若要元素排满一行,换行后还要整齐排列,就要子元素的高度一致才行,而inline-block就不会。
总结:
a.对于横向排列东西来说,更倾向与使用inline-block来布局,因为这样清晰,也不用再像浮动那样清除浮动,害怕布局混乱等等。
b.对于浮动布局就用于需要文字环绕的时候,毕竟这才是浮动真正的用武之地,水平排列的是就交给inline-block了。