最新消息:文章中包含代码时,请遵守代码高亮规范!

inline-block与float浮动的区别【原创】

HTML+CSS 陈, 梦娟 843浏览 0评论

在给网页布局的时候有多种方法,采用float,display,position.其中inline-block也可以实现网页布局,这里就说一下float和inline-block布局的差异。

通常情况下小编是喜欢inline-block。而float浮动布局还要清楚浮动,有些麻烦。

一 float浮动布局

  1. <div class=“main”>
  2.         <div class=“slide” style=“background: red;”></div>
  3.         <div class=“slide” style=“background: green;”></div>
  4.         <div class=“clear”></div>
  5.     </div>
  1. .slide{
  2.             width100px;
  3.             height100px;
  4.             floatleft;
  5.         }
  6.         .clear{
  7.             clearboth;
  8.         }

效果图如图1-1所示

图1-1

大家注意看一下两个元素的中间没有空隙,没有给浮动元素添加多余的外边距。

二 inline-block布局

  1. <div class=“main”>
  2.         <div class=“slide” style=“background: red;”></div>
  3.         <div class=“slide” style=“background: green;”></div>
  4.     </div>

 

  1. .slide{
  2.             width100px;
  3.             height100px;
  4.             display: inline-block;
  5.         }

效果图如1-2所示

图1-2

和图1-1对比一下,两个元素的中间多了几个像素的空隙,每个浏览器的效果不一样,谷歌是4个像素,别的大概是3个像素,(没有仔细量过)。出现这样的情况是很影响页面的布局的,为了进行合理的布局,达到完美的效果,清除几个像素之差只要给父容器添加属性font-size:0;就ok了。

修改之后的css

  1. .main{
  2.     font-size0;
  3.    }
  4.     .slide{
  5.         width100px;
  6.         height100px;
  7.         display: inline-block;
  8.         font-size20px;
  9.     }

效果图如图1-3所示

图1-3

注意,要在子元素的里面再次给字体设置大小,不然会继承父元素的字体大小,不能正常显示。

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/23036.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者blue的打赏,我们会更加努力!    如果您想成为作者,请点我

发表我的评论
取消评论

表情