display:inline-block的使用方法

發(fā)布時(shí)間：2020-09-26 11:18:33 來源：億速云閱讀：212 作者：小新欄目：web開發(fā)

小編給大家分享一下display:inline-block的使用方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

首先我們應(yīng)該知道inline-block元素的含義

display:inline-block不設(shè)置寬度時(shí)，內(nèi)容撐開寬度；不會(huì)獨(dú)占一行，支持寬高，代碼換行被解析成空格，總而言之，inline-block包含了行內(nèi)元素和塊內(nèi)元素的特點(diǎn)，即設(shè)置了inline-block屬性的元素既擁有了block元素可以設(shè)置width和height的特性，又保持了inline元素不換行的特性。

知道了inline-block的含義后，我們接著就來看一看inline-block該怎么用?

inline-block元素的用法：

一切需要行內(nèi)排列并且可設(shè)置大小的需求就可以用inline-block來實(shí)現(xiàn)；比如我們可以利用inline-block進(jìn)行布局，下面我們就來看看具體的示例，我們可以用inline-block元素來實(shí)現(xiàn)導(dǎo)航欄，代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 30%;
            background: lightblue;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        a{
            color:#fff;
            text-decoration: none;
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            background: orange;
        }
    </style>
</head>
<body>
    <div>
        <a href="">首頁</a>
        <a href="">視頻</a>
        <a href="">工具</a>
        <a href="">登錄</a>
    </div>
</body>
</html>

inline-block元素實(shí)現(xiàn)效果如下：

display:inline-block的使用方法

上述效果我們可以看到每個(gè)鏈接之間都會(huì)有一個(gè)空隙，這個(gè)空隙是怎么出現(xiàn)的呢？這個(gè)空隙其實(shí)是由換行符、制表符（tab）、空格等字符引起的，要想將這個(gè)空隙去掉我們有一下幾種方法：

方法一：把所有的代碼都寫到一行，便不會(huì)產(chǎn)生空隙了；但是這種方法代碼過多時(shí)會(huì)顯得很亂，所以代碼多時(shí)并不推薦。

方法二：在父元素的css中設(shè)置word-spacing負(fù)值

方法三：對(duì)父元素添加，{font-size:0}，即將字體大小設(shè)為0，那么那個(gè)空白符也變成0px，從而消除空隙。

以上是display:inline-block的使用方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

display:inline-block的使用方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽