display : -webkit-box-inline 的理解
发现：
最近在做移动端的东西，说起移动端弹性盒子布局真是无往不利，用起来特别爽，我也是偶尔间发现的这个属性并且它的用法，在网上基本查不到这个属性的资料（个人看法）。如果没有听说过（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 * {
3 padding:0;
4 margin: 0;
5 }
6 .content{
7 background-color:#ddd;
8 }
9
10 .content1{
11 background-color: #0f0;
12 }
13
14 .content2{
15 background-color: #0000ff;
16 }
17
18 .content{
19 display: -webkit-box;
20 height: 300px;
21 }
22
23 .content{
24 -webkit-box-orient: horizontal;
25 }
26
27 .content .content2,
28 .content .content1{
29 -webkit-box-flex: 1;
30 }
31
32 .content .content1{
33 width: 40px;
34 }
35
36 </style>
37 <body>
38 <div class="content">
39 <div class="content1">固定的盒子</div>
40 <div class="content2">产品的名称<br/>产品的介绍</div>
41 </div>
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
拥有以下特性：
- 拥有display:inline-block的特性：将对象昂呈递为内联对象，但是对象的内容作为块对象呈递，旁边的内联对象会被呈递在同一行内，允许空格。 我的粗俗解释 - 盒子初始化时只能够容纳子元素的容积大小，并且可以改变盒子本身大小。
- 拥有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 * {
9 padding:0;
10 margin: 0;
11 }
12 .content{
13 background-color:#ddd;
14 }
15
16 .content1{
17 background-color: #0f0;
18 }
19
20 .content2{
21 background-color: #0000ff;
22 }
23
24 .content,
25 .content .content2{
26 display: -webkit-box;
27 display: -moz-box;
28 display: box;
29 }
30
31 .content .content2,
32 .content .content1{
33 -webkit-box-align: center;
34 -moz-box-align: center;
35 box-align: center;
36 -webkit-box-pack: center;
37 -moz-box-pack: center;
38 box-pack: center;
39 }
40
41 .content {
42 height: 300px;
43 }
44
45 .content{
46 -webkit-box-orient: horizontal;
47 -moz-box-orient: horizontal;
48 box-orient: horizontal;
49 }
50
51 .content .content2,
52 .content .content1{
53 -webkit-box-flex: 1;
54 -moz-box-flex:1;
55 box-flex:1;
56 }
57
58 .content .content1{
59 width: 300px;
60 height: 100%;
61 display: -webkit-inline-box;
62 }
63
64 .content .content1 img{
65 width:100%;
66 }
67
68 </style>
69 </head>
70 <body>
71 <div class="content">
72 <div class="content1"><img src="3.jpg.680.510.jpg"></div>
73 <div class="content2">产品的名称<br/>产品的介绍</div>
74 </div>
75 </body>
76 </html>
display : -webkit-box-inline 的理解的更多相关文章
- 区别CSS中display：box；inline；none以及HTML中 <frame> 标签<table> 标签的 frame 属性
区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...
- display:block、inline、inline-block的区别及应用案例
A.display:block就是将元素显示为块级元素. block元素的特点是: 1.总是在新行上开始: 2.高度,行高以及顶和底边距都可控制: 3.宽度缺省是它的容器的100%,除非设定一个宽度; ...
- CSS3 display：flex和display：box有什么区别
父级元素有display:box;属性之后.他的子元素里面加上box-flex属性.可以让子元素按照父元素的宽度进行一定比例的分占空间. 如: html: <article> < ...
- display：block;inline;inline-block大总结
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- bounding box的简单理解
1. 小吐槽 OverFeat是我看的第一篇深度学习目标检测paper,因为它是第一次用深度学习来做定位.目标检测问题.可是,很难懂...那个bounding box写得也太简单了吧.虽然,很努力地想 ...
- 2016/2/25 1， margin auto 垂直方向测试 无效 2，margin重叠 3，哪些是块状哪些是内联 4，display：block inline 导航栏把内联转块状最常见+ 扩展
1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;} 竖直方向 ...
- css display block 和 inline
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- 【css】display：flex和display：box有什么区别
说法一: 注意:前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本.后者是2009年的语法,已经过时,是需要加上对应前缀的.所以兼容性的代码,大致如下displa ...
- 关于display的box和flex布局
关于二者的区别于联系,在知乎上看到有人这么回答的 flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本. box是2009年的语法,已经过时,是需要加上对应前缀的. 另外 ...
- css3中display和box小结
display:table用处: 1.创建登高列 2.实现大小不确定元素的垂直居中 3.容器内子项目数目未知,子项目平均分配容器的水平空间 float必须指定其宽度才行,不确定的话就用display: ...
随机推荐
- 面向对象之集合ArrayList
using System; using System.Collections; using System.Collections.Generic; using System.Linq; using S ...
- yii框架常用url地址
调用YII框架中 jquery:Yii::app()->clientScript->registerCoreScript('jquery'); framework/web/j ...
- Ten Tips for Writing CS Papers, Part 1
Ten Tips for Writing CS Papers, Part 1 As a non-native English speaker I can relate to the challenge ...
- Protocol Buffer技术详解(Java实例)
Protocol Buffer技术详解(Java实例) 该篇Blog和上一篇(C++实例)基本相同,只是面向于我们团队中的Java工程师,毕竟我们项目的前端部分是基于Android开发的,而且我们研发 ...
- 关于JS判断图片是否加载完成且获取图片宽度的方法
做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处 ...
- SQL存储过程概念剖析
一.SQL存储过程的概念,优点及语法 定义:将常用的或很复杂的工作,预先用SQL语句写好并用一个指定的名称存储起来, 那么以后要叫数据库提供与已定义好的存储过程的功能相同的服务时,只需调用execut ...
- U盘10分钟安装linux系统
说来可能不信,10分钟包括创建U盘启动盘,用U盘启动,安装,不联网,不更新,不安装语言包,等装好系统再更新. Windows系统硬盘分区 如果你用的是Windows系统,现有的硬盘没有未分配的空间,需 ...
- iOS多线程介绍
一.线程概述 有些程序是一条直线,起点到终点:有些程序是一个圆,不断循环,直到将它切断.直线的如简单的Hello World,运行打印完,它的生命周期便结束了,像昙花一现那样:圆如操作系统,一直运行直 ...
- java如何去调用C++的方法详解
这是一个调用c++ jni 的列子 首先写一个GoodLuck 类,里面包含native本地方法,这是用作C/C++实现的.也就是用C/c++实现java的native 方法.public class ...
- 如何修改ubuntu系统的电脑名（主机名）
在按照ubuntu系统时,会提示你给电脑填写一个名字,可能当时你没有想好,就随便填写了一个,可是以后就又有新的想法,想重新更换一个名字,该怎么办呢? 其实很简单.按照下面的步骤即可. 进去后,修改完, ...