发现：

最近在做移动端的东西，说起移动端弹性盒子布局真是无往不利，用起来特别爽，我也是偶尔间发现的这个属性并且它的用法，在网上基本查不到这个属性的资料（个人看法）。如果没有听说过（display:box）的朋友建议去别人家的博客看看CSS3就可以直接command+w了，由字看意，是不是能联想到  display:inline 这个属性，不知道的可以看看我的上一篇随笔, 之所有在前面加上-webkit-是因为太多人吧inline-box理解成内联盒子,-webkit是webkit内核的浏览器对于css新属性的实验性质支持。

概念：

display:box | inline-box 叫做伸缩布局盒模型，这个属性是最早的版本，但移动端支持的不错，最新标准时display:flex | inline-flex

我们首先可以这么想 display:inline-box 是一个具有 display:inline特性的并且也具有 display:box 特性的一个组合体，它只能显示盒子内大小的东西并且可以使用display:box的一系列属性。

实例：

我们先上一段代码：

  1.  
  2.  1  <style>
  3.  2         * {
  4.  3             padding:0;
  5.  4             margin: 0;
  6.  5         }
  7.  6         .content{
  8.  7             background-color:#ddd;
  9.  8         }
  10.  9 
  11. 10         .content1{
  12. 11             background-color: #0f0;
  13. 12         }
  14. 13 
  15. 14         .content2{
  16. 15             background-color: #0000ff;
  17. 16         }
  18. 17 
  19. 18         .content{
  20. 19             display: -webkit-box;
  21. 20         height: 300px;
  22. 21         }
  23. 22 
  24. 23         .content{
  25. 24             -webkit-box-orient: horizontal;
  26. 25         }
  27. 26 
  28. 27         .content .content2,
  29. 28         .content .content1{
  30. 29             -webkit-box-flex: 1;
  31. 30         }
  32. 31 
  33. 32         .content .content1{
  34. 33             width: 40px;
  35. 34         }
  36. 35 
  37. 36     </style>
  38. 37 <body>
  39. 38     <div class="content">
  40. 39         <div class="content1">固定的盒子</div>
  41. 40         <div class="content2">产品的名称<br/>产品的介绍</div>
  42. 41     </div>
  43. 42 </body>

运行以后细心的朋友会发现，我给content1盒子设置了40px的宽度，但是它没有任何效果，原因是-webkit-box-flex: 1；它补充了左右2个盒子的大小，到这里会有人骂我，"如果想保持这个特性就直接把 content1 加上 display: inline-block 就可以了么，用的着你这样唧唧歪歪！”

原因

但我想说的是如果我想让里面的文字垂直居中呢？ 你说你有办法，我也相信有办法，但是如果里面的内容是一张图片呢？如果我们想让图片垂直居中，但同时不想让图片变形呢？是不是费点劲？肯定会有这样的需求“左边图片，右边上面是产品标题，下面是产品介绍” 这里我们第一联想到的就是盒子的pack和align，里面的元素基本上都会垂直居中，于是我们将content1 改成-webkit-box 并且加上box-pack:center; box-align:center;属性 这个时候我们发现里面的内容确实垂直居中了但是宽度还是没有变化。

这时候试着将 content1的盒子改成 -webkit-inline-box  我们会惊喜的发现：

1.盒子的大小变成40px了

2.盒子内的文字也垂直居中了

3.带有inline特点的盒子 竟然能够改变大小

这时候我们重新总结一下，能够改变自身大小而且初始化大小只有盒子内容积的第一印象肯定是 inline-block ，这时候我不由的惊叹了这么好用的特性竟然没发现很多人在用！我这里我再总结一下。

display : -webkit-inline-box

拥有以下特性：

  1. 拥有display:inline-block的特性：将对象昂呈递为内联对象，但是对象的内容作为块对象呈递，旁边的内联对象会被呈递在同一行内，允许空格。 我的粗俗解释 - 盒子初始化时只能够容纳子元素的容积大小，并且可以改变盒子本身大小。
  2. 拥有display:box 特性，能够使用CSS3其内特性

个人觉得运用的合理的话这个属性特别好用。

最终示例代码：

  1.  
  2.  1 <!DOCTYPE html>
  3.  2 <html>
  4.  3 <head lang="en">
  5.  4     <meta charset="UTF-8">
  6.  5     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  7.  6     <title></title>
  8.  7     <style>
  9.  8         * {
  10.  9             padding:0;
  11. 10             margin: 0;
  12. 11         }
  13. 12         .content{
  14. 13             background-color:#ddd;
  15. 14         }
  16. 15 
  17. 16         .content1{
  18. 17             background-color: #0f0;
  19. 18         }
  20. 19 
  21. 20         .content2{
  22. 21             background-color: #0000ff;
  23. 22         }
  24. 23 
  25. 24         .content,
  26. 25         .content .content2{
  27. 26             display: -webkit-box;
  28. 27             display: -moz-box;
  29. 28             display: box;
  30. 29         }
  31. 30 
  32. 31         .content .content2,
  33. 32         .content .content1{
  34. 33             -webkit-box-align: center;
  35. 34             -moz-box-align: center;
  36. 35             box-align: center;
  37. 36             -webkit-box-pack: center;
  38. 37             -moz-box-pack: center;
  39. 38             box-pack: center;
  40. 39         }
  41. 40 
  42. 41         .content {
  43. 42             height: 300px;
  44. 43         }
  45. 44 
  46. 45         .content{
  47. 46             -webkit-box-orient: horizontal;
  48. 47             -moz-box-orient: horizontal;
  49. 48             box-orient: horizontal;
  50. 49         }
  51. 50 
  52. 51         .content .content2,
  53. 52         .content .content1{
  54. 53             -webkit-box-flex: 1;
  55. 54             -moz-box-flex:1;
  56. 55             box-flex:1;
  57. 56         }
  58. 57 
  59. 58         .content .content1{
  60. 59             width: 300px;
  61. 60             height: 100%;
  62. 61             display: -webkit-inline-box;
  63. 62         }
  64. 63 
  65. 64         .content .content1 img{
  66. 65             width:100%;
  67. 66         }
  68. 67 
  69. 68     </style>
  70. 69 </head>
  71. 70 <body>
  72. 71     <div class="content">
  73. 72         <div class="content1"><img src="3.jpg.680.510.jpg"></div>
  74. 73         <div class="content2">产品的名称<br/>产品的介绍</div>
  75. 74     </div>
  76. 75 </body>
  77. 76 </html>

display : -webkit-box-inline 的理解的更多相关文章

  1. 区别CSS中display：box；inline；none以及HTML中 <frame> 标签<table> 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  2. display:block、inline、inline-block的区别及应用案例

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

  3. CSS3 display：flex和display：box有什么区别

    父级元素有display:box;属性之后.他的子元素里面加上box-flex属性.可以让子元素按照父元素的宽度进行一定比例的分占空间. 如: html: <article>   < ...

  4. display：block;inline;inline-block大总结

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. bounding box的简单理解

    1. 小吐槽 OverFeat是我看的第一篇深度学习目标检测paper,因为它是第一次用深度学习来做定位.目标检测问题.可是,很难懂...那个bounding box写得也太简单了吧.虽然,很努力地想 ...

  6. 2016/2/25 1， margin auto 垂直方向测试 无效 2，margin重叠 3，哪些是块状哪些是内联 4，display：block inline 导航栏把内联转块状最常见+ 扩展

    1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向 ...

  7. css display block 和 inline

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  8. 【css】display：flex和display：box有什么区别

    说法一: 注意:前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本.后者是2009年的语法,已经过时,是需要加上对应前缀的.所以兼容性的代码,大致如下displa ...

  9. 关于display的box和flex布局

    关于二者的区别于联系,在知乎上看到有人这么回答的 flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本. box是2009年的语法,已经过时,是需要加上对应前缀的. 另外 ...

  10. css3中display和box小结

    display:table用处: 1.创建登高列 2.实现大小不确定元素的垂直居中 3.容器内子项目数目未知,子项目平均分配容器的水平空间 float必须指定其宽度才行,不确定的话就用display: ...

随机推荐

  1. linux磁盘空间清理

    由于当初安装系统设计不合理,有些分区的过小,以及网络通讯故障等造成日志文件速度增长等其他原因都可以表现为磁盘空间满,造成无法读写磁盘,应用程序无法执行等.下面就给你支几招(以/home空间满为例): ...

  2. insert 多个values

    INSERT INTO `user_mail_attach` VALUES(, , , , , ), (, , , , , ); 这种比写多条insert语句效率高

  3. 解决：[INS-20802] Oracle Net Configuration Assistant failed

    在linux 中安装Oracle 11G 的时辰呈现 [INS-20802] Oracle Net Configuration Assistant failed 是oracle数据库的鼓掌,须要补丁p ...

  4. Openresty 与 Tengine

    Openresty 与 Tengine Openresty和Tengine基于 Nginx 的两个衍生版本,某种意义上他们都和淘宝有关系,前者是前淘宝工程师agentzh主导开发的,后者是淘宝的一个开 ...

  5. IIS短文件名泄露漏洞危害及防范方法

    危害级别:轻微 IIS短文件名泄露漏洞 WASC Threat Classification 描述: Microsoft IIS在实现上存在文件枚举漏洞,攻击者可利用此漏洞枚举网络服务器根目录中的文件 ...

  6. mysql is marked as crashed and should be repaired错误

    1.mysql数据存放路径默认为/var/lib/mysql/目录 2.用myisamchk命令修复数据表,如: myisamchk -c -r talbe.MYI

  7. SQL Server中的联合主键、聚集索引、非聚集索引、mysql 联合索引

    我们都知道在一个表中当需要2列以上才能确定记录的唯一性的时候,就需要用到联合主键,当建立联合主键以后,在查询数据的时候性能就会有很大的提升,不过并不是对联合主键的任何列单独查询的时候性能都会提升,但我 ...

  8. heap和stack有什么区别

    1.heap是堆,stack是栈. 2.stack的空间由操作系统自动分配和释放,heap的空间是手动申请和释放的,heap常用new关键字来分配. 3.stack空间有限,heap的空间是很大的自由 ...

  9. HTML5中的Range对象的研究

    一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = docu ...

  10. iOS设备屏幕像素总览

    本文永久地址为http://www.cnblogs.com/ChenYilong/p/4011728.html ,转载请注明出处.   本文永久地址为http://www.cnblogs.com/Ch ...