CSS之使用display:inline-block来布局

 

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. [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 ...

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

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

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

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

  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 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

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

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

随机推荐

  1. ML.NET技术研究系列1-入门篇

    近期团队在研究机器学习,希望通过机器学习实现补丁发布评估,系统异常检测.业务场景归纳一下: 收集整理数据(发布相关的异常日志.告警数据),标识出补丁发布情况(成功.失败) 选择一个机器学习的Model ...

  2. JavaScript中的match方法和search方法

    search在一个字串对象(string object)中查找关键词字串(规范表达式,regular expression),若匹配(即在目标字串中成功找到关键词)则返回关键词在目标字串中第一次出现的 ...

  3. 更改 Linux 语言为中文

    查看当前系统语言环境:    echo $LANG 查看安了哪些中文语言包    locale -a |grep "zh_CN" 没有输出,说明没有安装,输入下面的命令安装     ...

  4. HDU 6053 ( TrickGCD ) 分块+容斥

    TrickGCD Time Limit: 5000/2500 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total ...

  5. Codeforces Round #462 (Div. 2) D. A Determined Cleanup

    D. A Determined Cleanup time limit per test1 second memory limit per test256 megabytes Problem Descr ...

  6. poj1142 Smith Numbers

    Poj1142 Smith Numbers Smith Numbers Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 13854 ...

  7. HDU2586 How far away ?

    一.描述 很久没写代码了,在之前一直在参与准备ASC比赛和美赛,现在又重新捡起来.目标是两个月后的邀请赛. 这题是树链拋分解决LCA问题的一个模板题. 首先介绍下树链拋分的基本思想. 对于任意一颗树, ...

  8. tomcat8+idea远程调试

    window下 setenv.bat增加 set JPDA_OPTS=-Xrunjdwp:transport=dt_socket,address=8787,server=y,suspend=n lin ...

  9. React基础(Diff算法,属性和状态)

    1.React的背景原理 (1)React Diff算法流程 (2)React虚拟DOM机制 React引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DO ...

  10. luogu1829 [国家集训队]Crash的数字表格

    被 bs 了姿势水平--好好学习数学QAQQAQQAQ ref #include <iostream> #include <cstring> #include <cstd ...