float與inline-block的一些應用場景的區別

阿新 • • 發佈：2018-01-24

round float meta span radi ear ner 質量分享

技術分享圖片

上圖是一個container,我們需要這3個盒子在這裏面水平居中，並在同一排顯示，這時，設置3個div為浮動，或者display:inline-block都可以實現。

使用inline-block實現，當三個盒子一樣高時，與float實現沒有差別，但當其中一個盒子高的時候：表現為盒子底部對齊，頂部不對齊。

技術分享圖片

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style 
>
       *{
           margin:0;
           padding:0;

       }
       .container{
           width:1200px;
           margin:0 auto;
           border:1px solid #393939;
           text-align: center;
       }
        .box{
            display: inline-block;
            width:200px;
            background-color 
: #c61732;
            margin:30px;
        }
       .btn{
           display:inline-block;
           font-size: 1.8rem;
           padding:24px 40px;
           border-radius: 6px;
           color: #fff;
           background-color: #c61732;
       }

    </style>
</head>
<body>
< 
div class="container">
    <div class="box">
        <p>掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
        </p>
    </div>
    <div class="box">
        <p>掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
        </p>
    </div>
    <div class="box">
        <p>掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
        </p>
    </div>
    <a class="btn" href="javascript;">ETIAM POSUEREAUGUE</a>
</div>
</body>
</html>

當使用浮動來實現時，當一個盒子高度變高時：你會發現，盒子是頂部對齊，下部不對齊。下面的btn按鈕之所以會跑上來，是因為浮動的特性，inline，inline-block元素會環繞著浮動元素。

技術分享圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       *{
           margin:0;
           padding:0;
       }
       /*清除浮動*/
       .clearfix:after{content:""; display: block; clear: both;}
       .clearfix{zoom: 1;}
       .container{
           width:1200px;
           margin:0 auto;
           border:1px solid #393939;
           text-align: center;
       }
        .box{
            float:left;
            width:200px;
            background-color: #c61732;
            margin:30px;
        }
       .btn{
           display:inline-block;
           font-size: 1.8rem;
           padding:24px 40px;
           border-radius: 6px;
           color: #fff;
           background-color: #c61732;
       }

    </style>
</head>
<body>
<div class="container clearfix">

    <div class="box">
        <p>掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js

        </p>
    </div>
    <div class="box">
        <p>掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
        </p>
    </div>
    <div class="box">
        <p>掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
            掘金是一個高質量的技術社區，從 CSS 到 Vue.js
        </p>
    </div>
    <a class="btn" href="javascript;">ETIAM POSUEREAUGUE</a>
</div>
</body>
</html>

float與inline-block的一些應用場景的區別

round float meta span radi ear ner 質量分享上圖是一個container,我們需要這3個盒子在這裏面水平居中，並在同一排顯示，這時，設置3個div為浮動，或者display:inline-block都可以實現。使用inline-bl

inline 與inline-block到底有什麼區別

之前對inline與inline-block一直感覺比較容易混淆他們之間的特性，特別是在看到這個圖的時候，這是對“box2”設定為{display:inline-block;} 那麼什麼是inline呢，根據字面意思，它是在一條線上的，那麼內聯就是這些元素是排成一條線的；那inlin

浮動（float）與inline-block的區別

結論：兩者主要區別在於當標籤的【高度不一致】時，體現出的差異如果高度不一致的情況下，想讓他們按順序排列就可以選擇inline-block在浮動時，若第一個元素的高度大於第二個元素的高度，第三個元素浮動時，會與第二元素並排在一列中，這樣不能出現有序排列了。在inline-blo

詳解CSS display:inline-block的應用（轉）

點擊 header 使用 -a title blank 擁有美妝底部閱讀目錄基礎知識 inline-block的問題 inline-block的應用總結本文詳細描述了display:inline-block的基礎知識，產生的問題和解決方法以及其常見的應

區塊鏈的一些應用場景

區塊鏈技術自概念誕生起，就充滿了爭議，擁躉者認為，區塊鏈技術將改變人與人之間的關係，它將要顛覆一切；懷疑者認為，區塊鏈複雜低效，難以起到革命性的作用。無論觀點如何未來如何，目前區塊鏈應用還處於早期階段，在今日湧現的區塊鏈早期應用，有哪些你最看好？金融百度金融車貸ABS 國內首個以區

也許你知道css中的display與visibility,但是你可能會忽略display: flex--伸縮容器與display: block的關係和區別

複習display與visibility display: none;–元素的摧毀(元素消失) display: block;–元素的重建(設定為塊級元素,元素出現) visibility: hidden;–元素的隱藏(佔有元素原有位置,實質則是不透明度 opacity為0的改變)

樂觀鎖與悲觀鎖的應用場景

鎖（ locking ）業務邏輯的實現過程中，往往需要保證資料訪問的排他性。如在金融系統的日終結算處理中，我們希望針對某個 cut-off 時間點的資料進行處理，而不希望在結算進行過程中（可能是幾秒種，也可能是幾個小時），資料再發生變化。此時，我

AngularJs與ReactJS優劣及應用場景分析

優點 AngularJS是一套完整的框架，angular有自帶的資料繫結、render渲染、angularUI庫,過濾器,directive(模板),服務q(defer),http，inject(依賴注入),factory,provider……，等等一系列

float和inline-block的細節

在我們平時工作中，經常會遇到把一些塊狀元素在一行排列顯示，這時候我們通常會用到float,或許會用inline-block等等，那麼他們有什麼共性和區別？適用在什麼場景？共性：①inline-block: 是把一個元素的display設定為塊狀內聯元素，意思就是說，讓一個元素

display的inline-block替代float的一些場景

底部 block代碼效果圖 lin ref pan css代碼 scrip -s 一、橫向菜單 inline-block是不換行的塊級元素，對於使用ul-li結構的網頁頂部橫向導航菜單非常有用。如果不使用inline-block屬性，只能使用float來浮動每個li元素

display:inline-block與float:left的區別

display與float是我們常用的佈局方式。像display:inline-block;與float:left是我們將元素水平排列的方式。像水平導航欄就可以用這兩種方式去實現。那這兩種實現方式有什麼區別呢？ 1.display: inline-block;會產生留白，需要將父元素的f

float屬性和inline-block的區別(轉)

修飾 ref 邊距頂部有一個問題 spa 對齊之間 HTML的元素有多種display屬性，比較常見的有display:none; display:block; display:inline和display:inline-block;等有些HTML元素自然地帶有d

傳輸層TCP和UDP的區別分析與應用場景

郵件建立連接模型傳遞數據網絡通訊 num 進行 send 個數轉載：http://blog.csdn.net/u013777351/article/details/49226101 基本概念： 1：面向報文面向報文的傳輸方式是應用層交給UDP多長的報文，U

float、absolute、inline-block三者區別

sso body from F12 doctype tle clip 方法 == 0.前言 float屬性在css2中是一個熱門的屬性，被廣泛應用於布局之中，同時由於不當使用float帶來的問題也非常多，本文結合自己對float的理解以及實際項目中碰到float的相關問題，

float 與 display：inline-block

就是 neu mil inline line back AC spa 問題 float： 1.會導致高度塌陷 <style type="text/css"> li{ float:left; height:200px;

mySql 下查詢 find_in_set 與 like 的區別與應用場景, symfony 如何使用find_in_set()

在專案中遇到了產品的分類，類別較多並且可以多選，此種情況的查詢 like 並不適用，查詢後使用 find_in_set()，對like 與find_in_set()做了淺顯的研究。查詢type為1的資料，簡略表如下： id type

String、StringBuffer與StringBuilder的區別及應用場景

1 String、StringBuffer與StringBuilder區別（1）區別 String內容不可變，StringBuffer和StringBuilder內容可變； StringBuilder非執行緒安全（單執行緒使用），String與StringBuffer執行緒安全（多執

block,inline-block區別 float

display:block block元素會獨佔一行，多個block元素會各自新起一行。預設情況下，block元素寬度自動填滿其父元素寬度。 block元素可以設定width,height屬性。塊級元素即使設定了寬度,仍然是獨佔一行。

MySQL資料庫中 InnoDB 與 MyISAM的區別及其應用場景

InnoDB 與 MyISAM 都是MySQL資料庫的引擎。 1.他們的區別分為五點： (1).事務處理： MyISAM是非事務安全型的，而InnoDB是事務安全型的（支援事務處理等） (2).鎖機制不同: MyISAM是

NIo、Bio、aio、的原理及區別與應用場景

在高效能的IO體系設計中，有幾個名詞概念常常會使我們感到迷惑不解。具體如下：序號問題 1 什麼是同步？ 2 什麼是非同步？ 3 什麼是阻塞？ 4 什麼是非阻塞？ 5 什麼是同步阻塞？ 6 什麼是同步非阻

float與inline-block的一些應用場景的區別

相關推薦