display : -webkit-box-inline 的理解

时间 2019-11-13

标签 display webkit box inline 理解栏目 CSS 繁體版

原文原文链接

发现：css

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

概念：web

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

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

实例：flex

咱们先上一段代码：spa

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 就能够了么，用的着你这样唧唧歪歪！”scala

缘由code

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

这时候试着将 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>