css之display:inline-block布局

1.解释一下display的几个常用的属性值,inline , block, inline-block

  • inline(行内元素):
    1. 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行.
    2. 不能更改元素的height,width的值,大小由内容撑开.
    3. 可以使用padding上下左右都有效,margin只有left和right产生边距效果,但是top和bottom就不行.
  • block(块级元素):
    1. 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度.
    2. 能够改变元素的height,width的值. 
    3. 可以设置padding,margin的各个属性值,top,left,bottom,right都能够产生边距效果.
  • inline-block(融合行内于块级):
    1. 结合了inline与block的一些特点,结合了上述inline的第1个特点和block的第2,3个特点.
    2. 用通俗的话讲,就是不独占一行的块级元素。如图:

图一:

图二:

两个图可以看出,display:inline-block后块级元素能够在同一行显示,有人这说不就像浮动一样吗。没错,display:inline-block的效果几乎和浮动一样,但也有不同,接下来讲一下inline-block和浮动的比较。

2.inline-block布局 vs 浮动布局

    a.不同之处:对元素设置display:inline-block ,元素不会脱离文本流,而float就会使得元素脱离文本流,且还有父元素高度坍塌的效果

    b.相同之处:能在某程度上达到一样的效果

  我们先来看看这两种布局:
图一:display:inline-block

图二:对两个孩子使用float:left,我在上一篇浮动布局讲过,这是父元素会高度坍塌,所以要闭合浮动,对box使用overflow:hidden,效果如下:

>>乍一看两个都能做到几乎相同的效果,(仔细看看display:inline-block中有间隙问题,这个留到下面再讲)

  c.浮动布局不太好的地方:参差不齐的现象,我们看一个效果:
图三:

图四:

>>从图3,4可以看出浮动的局限性在于,若要元素排满一行,换行后还要整齐排列,就要子元素的高度一致才行,不然就会出现图三的效果,而inline-block就不会。

3.inline-block存在的小问题:

  a.上面可以看到用了display:inline-block后,存在间隙问题,间隙为4像素,这个问题产生的原因是换行引起的,因为我们写标签时通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符,而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

  b.去除空隙的方法:
  1.对父元素添加,{font-size:0},即将字体大小设为0,那么那个空白符也变成0px,从而消除空隙
  现在这种方法已经可以兼容各种浏览器,以前chrome浏览器是不兼容的
图一:

  c.浏览器兼容性:ie6/7是不兼容 display:inline-block的所以要额外处理一下:
  在ie6/7下:
  对于行内元素直接使用{dislplay:inline-block;}
  对于块级元素:需添加{display:inline;zoom:1;}

4.总结:

  display:inline-block的布局方式和浮动的布局方式,究竟使用哪个,我觉得应该根据实际情况来决定的:
  a.对于横向排列东西来说,我更倾向与使用inline-block来布局,因为这样清晰,也不用再像浮动那样清除浮动,害怕布局混乱等等。
  b.对于浮动布局就用于需要文字环绕的时候,毕竟这才是浮动真正的用武之地,水平排列的是就交给inline-block了。

作者:Ry-yuan

如需转载请标明出处,本文地址:http://www.cnblogs.com/Ry-yuan/p/6848197.html

欢迎访问我的博客:http://ry-yuan.me

>>css布局系列到此告一段落。

CSS之使用display:inline-block来布局的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. CSS中的display属性(none,block,inline,inline-block,inherit)

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  3. CSS——display(Block none inline等)属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

  4. [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  5. CSS 基础 例子 display属性:block、inline和inline-block的区别

    HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...

  6. 大话css之display的Block未解之谜(一)

    用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 b ...

  7. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  8. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  9. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  10. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

随机推荐

  1. 新的编辑工具IDE

    因为最近一段时间前端都是用EXTJS开发,之前用vs2012来编辑extjs,感觉缺少智能感应,很不方便.后来发现一款工具Visual Studio Code,非常棒. VS Code是免费,轻量,跨 ...

  2. Linux内存管理 (6)vmalloc

    专题:Linux内存管理专题 关键词:vmalloc.页对齐.虚拟地址连续.物理不连续 至此,已经介绍了集中内核中内存分配函数,在开始简单做个对比总结Linux中常用内存分配函数的异同点,然后重点介绍 ...

  3. 一、TensorFlow初探

    目录 计算模型 数据模型 运行模型 TensorFlow及神经网络 import tensorflow as tf a = tf.constant([1.0, 2.0], name='a', dtyp ...

  4. 【原创】IDEA一定要改的八条配置

    引言 坦白说,我很少写这种操作类型的文章.因为这种文章没啥新意,大家操作步骤肯定是一样的.然而,我答应了我的同事小阳,给她出一篇!毕竟人家打算从Eclipse转IDEA了,于是以示鼓励,写一篇给她! ...

  5. 在OSGI容器Equinox中嵌入HttpServer

    原文地址:https://liugang594.iteye.com/blog/1328050 简单介绍一下如何在一个osgi的bundle中内嵌使用http服务 一.基础 首先看看在OSGI中怎么启动 ...

  6. Entity Framework Core系列之DbContext

    前言: EF Core DbContext表示与数据库的会话,并提供与数据库通信的API,具有以下功能: 数据库连接 数据操作,如查询和持久化 更改追踪 模型构建 数据映射 对象缓存 事务管理 数据库 ...

  7. idea注册码到期,破解idea

    http://idea.lanyus.com/    

  8. CodeVs 1615 数据备份

    题目:数据备份 链接:Here 题意:有n个点在一条线上,每次连线可以连接两个点(每个点只能被连一次),要求找出m个连线,他们的和最小(连线权值就是两点距离),输出最小的和.给出n.m和每个点的坐标. ...

  9. JUC (java.util.concurrent)

    1.什么是线程?什么是进程? 2.多线程的状态? public enum State { //6种状态 NEW, RUNNABLE, //可运行 BLOCKED, //阻塞 WAITING, //等待 ...

  10. [模板] 动态树/LCT

    简介 LCT是一种数据结构, 可以维护树的动态加边, 删边, 维护链上信息(满足结合律), 单次操作时间复杂度 \(O(\log n)\).(不会证) 思想类似树链剖分, 因为splay可以换根, 用 ...