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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。