欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

浅谈inline-block_html/css_WEB-ITnose

程序员文章站 2022-06-09 14:01:12
...
一、区分block,inline,inline-block

  1、block

  block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。

  block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

  block元素可以设置margin和padding属性。

  2、inline

  inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

  inline元素设置width,height属性无效。

  inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

  3.inline-block

  inline-block 后的元素创建了一个行级的块容器,该元素内部(内容)被格式化成一个块元素,同时元素本身则被格式化成一个行内元素。

  直白一点的意思就是:inline-block 的元素既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align 属性。简而言之:

二、兼容性

  相对于针对手机上高版本-webkit-内核浏览器的流体布局方式flex()以及box()盒模型,inline-block的兼容性可谓有容乃大,但是网上还是有一种说法--ie6和ie7不支持inline-block,真的是这样吗,我们来探索一下。

  在 msdn 微软开发者社区,找到了 IE 从5.5 开始支持 inline-block 的证据:

The inline-block value is supported starting with Internet Explorer 5.5. You can use this value to give an object a layout without specifying the object’s height or width.

  既然这样,我们为什么还会看到这样的一组适配ie6,ie7代码呢:

  display:inline-block;
  *display:inline;
  *zoom:1;

  究其原因发现,在IE下,display:inline-block只是触发了元素的layout。比如将display:inline-block给到div上,只能保证这个div拥有块元素的特征(可以设置宽度和高度),但是还是行布局(产生换行)。接下来要设置display:inline.更改这个div的布局为内联布局(不产生换行)。

三、

  好了,给大家补充了基础知识之后就可以进入今天的正题了

  1、神奇的水平空隙

  元素被inline-block之后,水平方向会产生大小不固定的空隙

  

  如图:五个li之间的间隙就是inline-block产生的神奇现象。

  

  原来默认inline-block元素之间会产生换行符(类似空格之类的空白字符),除非你的html结构

  • 写成这个鬼样子,但是这么写了之后可读性很差,我们当然不会用这么不优雅的方式解决问题,既然是字符,那么font-size:0不就好了,没错,可是并不是所有浏览器都支持font-size:0,怎么办呢?这时候就要请出我们的letter-spacing这个属性了,大部分情况下这个间隙是4px,那么我们只要设置letter-spacing:-4px就好了(关于间隙大小随着字号和字体的变化而不一样以及opera浏览器兼容问题请参考张鑫旭大神的文章http://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA%86%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88%97%E8%A1%A8%E5%B8%83%E5%B1%80/")

      2、实现列表两端自适应布局(摒弃float)

      为什么我会摒弃float?

      首先,对于float,会面临清除浮动,高度坍塌等常见问题,最重要的,会引起重绘和回流等效率问题,也是我摒弃他的最重要原因,所以能用inline-block代替他为什么还坚持使用float呢。

      现在,请出我们的另一个主角--text-align:justify,并且当子元素高度不一致的时候我们可以通过verticle-align来调整垂直方向的位置。

      请记住:列表(或文字)要两端对齐的前提就是内容必须超过一行

      

      看吧,就是这么简单,但是大家也会注意到最后一行的排列问题,放心,我们一个个来解决。

      (1)最后一行也两边排列:

        

    .justify_fix{display:inline-block; width:100%; height:0; overflow:hidden;}

        给html加一个class="justify_fix"的元素就可以了

      (2)最后一行左对齐排列:

    .left_fix{height:0; padding:0; overflow:hidden;}

        html中补上n个class="left_fix"元素

        n的个数就是每行元素的列表个数啦

      好啦,问题解决了,怎么样,inline-block简单好用吧,只要记住和它搭配的这些个属性处理一般的布局应该不成问题。

      第一篇文,各路大神请指教~

  • 相关标签: 浅谈inline-block