发现：

最近在做移动端的东西，说起移动端弹性盒子布局真是无往不利，用起来特别爽，我也是偶尔间发现的这个属性并且它的用法，在网上基本查不到这个属性的资料（个人看法）。如果没有听说过（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  <style>

 2         * {

;

 4             margin: 0;

 5         }

 6         .content{

 7             background-color:#ddd;

 8         }

 9 

         .content1{

             background-color: #0f0;

         }

 

         .content2{

             background-color: #0000ff;

         }

 

         .content{

             display: -webkit-box;

         height: 300px;

         }

 

         .content{

             -webkit-box-orient: horizontal;

         }

 

         .content .content2,

         .content .content1{

             -webkit-box-flex: 1;

         }

 

         .content .content1{

             width: 40px;

         }

 

     </style>

 <body>

     <div class="content">

         <div class="content1">固定的盒子</div>

         <div class="content2">产品的名称<br/>产品的介绍</div>

     </div>

 </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 <!DOCTYPE html>

 2 <html>

 3 <head lang="en">

 4     <meta charset="UTF-8">

 5     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

 6     <title></title>

 7     <style>

 8         * {

;

             margin: 0;

         }

         .content{

             background-color:#ddd;

         }

 

         .content1{

             background-color: #0f0;

         }

 

         .content2{

             background-color: #0000ff;

         }

 

         .content,

         .content .content2{

             display: -webkit-box;

             display: -moz-box;

             display: box;

         }

 

         .content .content2,

         .content .content1{

             -webkit-box-align: center;

             -moz-box-align: center;

             box-align: center;

             -webkit-box-pack: center;

             -moz-box-pack: center;

             box-pack: center;

         }

 

         .content {

             height: 300px;

         }

 

         .content{

             -webkit-box-orient: horizontal;

             -moz-box-orient: horizontal;

             box-orient: horizontal;

         }

 

         .content .content2,

         .content .content1{

             -webkit-box-flex: 1;

 ;

 ;

         }

 

         .content .content1{

             width: 300px;

             height: 100%;

             display: -webkit-inline-box;

         }

 

         .content .content1 img{

             width:100%;

         }

 

     </style>

 </head>

 <body>

     <div class="content">

         <div class="content1"><img src="3.jpg.680.510.jpg"></div>

         <div class="content2">产品的名称<br/>产品的介绍</div>

     </div>

 </body>

 </html>

以上都是在谷歌浏览器上运行的。
经常的总结让我们变得更智慧，让我们在迷茫的时候找到前进的方向！谢谢@P-利-Q的指点！

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

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

  6. css display block 和 inline

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

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

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

  8. 关于display的box和flex布局

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

  9. css3中display和box小结

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

  10. CSS3 display:flex和display:box有什么区别？

    **区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...

随机推荐

  1. 【BZOJ-3196】二逼平衡树 线段树 + Splay （线段树套平衡树）

    3196: Tyvj 1730 二逼平衡树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2271  Solved: 935[Submit][Stat ...

  2. Database(Mysql、Sqlserver) Configuration Security Reinforcement

    目录 . 引言 . Mysql . Sqlserver 1. 引言 黑客获取了数据库的帐号密码之后,就可以通过Database Client登录数据库,利用SQL指令.数据库指令执行组件进行进一步的提 ...

  3. ObjC 利用反射和KVC实现嵌套对象序列化成JSON数据

    原理: 0.创建一个新的可变字典:NSMutableDictionary 1.采用class_copyPropertyList函数遍历对象的属性 2.property_getName获取属性名,val ...

  4. python *args **kwargs

    简单来说,当你传入的参数不能确定是几个的时候会用到 *args和**kwargs,这里星号后边只是个代号,你写成a也可以. 而这两者的区别是 如果是键值对就要用后者,反之前者就可以. 同时还可以用(a ...

  5. python数据类型和字符串（三）

    一.变量 变量声明变量 #!/usr/bin/env python age= gender1='male' gender2='female' 变量作用:保存状态(程序的运行本质是一系列状态的变化,变量 ...

  6. iOS - CALayer相关(CATransform3D)

    一.图层的几何 图层的几何简单通俗,图层的所有几何属性(包括矩阵变换),都可以有隐式和显式动画. 图层几何的属性: 1.position是CGPoint值,她指定图层相对于她图层的位置,该值基于父图层 ...

  7. NOIp Graph 1002 瞎眼记

    又是虚脱的一天啊QAQ,早上习惯性迟到,九点多到学校开始码题,六道题看下来花了将近一个小时,主要纠结于第二题和第六题.到了十点,没再深入思考,开始码题.. 一直到十一点半,写了两道题.然后吃完饭后中午 ...

  8. maven的环境搭建

    maven环境快速搭建 最近,开发中要用到maven,所以对maven进行了简单的学习. .关于maven是什么东东,请参考其它文章. ----------------准备工作------------ ...

  9. NSXMLParser解析本地.xml数据（由于like7xiaoben写的太好了，我从她那里粘贴过来的）

    NSXMLParser解析简要说明 .是sax方法解析 .需要创建NSXMLParser实例 (alloc) 并创建解析器 (initWithData:) 为解析器定义委托 (setDelegate: ...

  10. 适可而止：YAGNI原则

    适可而止:You Ain't Gonna Need It YAGNI原则指的是只需要将应用程序必需的功能包含进来,而不要试图添加任何其他你认为可能需要的功能. 在一个软件项目中,往往80%的时间花费在 ...