詳解css中inline-block的最小寬度值

發(fā)布時(shí)間：2019-12-09 16:00:58 作者：LINGLONG

這篇文章主要介紹了詳解css中inline-block的最小寬度值，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

最近晚上會(huì)抽出一點(diǎn)時(shí)間看《css世界》這本書(shū)，這本書(shū)講的很有趣，讓我知道css并非幾個(gè)屬性樣式這么簡(jiǎn)單。昨天看到width在行內(nèi)塊元素中，如果設(shè)置其寬度為0，該元素標(biāo)簽里面的內(nèi)容存在著一個(gè)最小的寬度，最小的寬度根據(jù)中文字符和英文字符又有所區(qū)別，中文字符是以每個(gè)漢字來(lái)分割，英文字符是以英文單詞來(lái)分割。

文章的開(kāi)始

書(shū)中舉了一個(gè)凹凸的例子，但是并沒(méi)有詳細(xì)的講解，下面我對(duì)這段代碼詳細(xì)解釋一下。

代碼操作

<style>
        .ao ,.tu{
            display: inline-block;
            width: 0;
            font-size: 14px;
            line-height: 18px;
            margin: 35px;
            color: skyblue;
        }
        .ao:before,
        .tu:before{
            /* 邊框外的樣式，起到突出的作用，outline-color/style/width */
            outline: 2px solid #cd0000;
            /* 規(guī)定元素的字體系列 */
            font-family: Consolas, Monaco, monospace;
        }
        .ao:before{
            content: "love你love";
        }
        .tu{
            /* 文本方向從又到左，為了反向 */
            direction: rtl;
        }
        .tu:before{
            content: "我love你"
        }
    </style>
</head>
<body>
    <div>
        <span class="ao">我愛(ài)mother</span>
        <span class="tu">不愛(ài)你</span>
        <span>我愛(ài)你</span>
    </div>
</body>

結(jié)果演示

代碼解讀

兩個(gè)span標(biāo)簽來(lái)展示凹凸的效果。span標(biāo)簽是行內(nèi)元素，如果對(duì)三種樣式不是很熟悉我在文章的后面都有說(shuō)明。

1.首先通過(guò)display轉(zhuǎn)換成行內(nèi)塊元素。然后寬度設(shè)置為0讓span元素能夠擁有最小寬度值。

2.對(duì)兩個(gè)偽元素使用公共的偽元素before，偽元素不同的內(nèi)容會(huì)不同的換行外邊框樣式為紅色并且規(guī)定字體樣式。
為什么要用偽元素，不用偽元素直接進(jìn)行設(shè)置不行嗎？我?guī)е@個(gè)疑問(wèn)又試了一次，發(fā)現(xiàn)不用偽元素的時(shí)候文字是凹凸顯示，但是邊框不是，而且文字之間還會(huì)疊加和重合。這個(gè)原因還沒(méi)有想明白，大家可以看看討論一下。

direction: rtl;是為了讓文本方向從右到左，凸出來(lái)的部分正好對(duì)準(zhǔn)凹進(jìn)去的口子。

3.后面的我愛(ài)mother，不愛(ài)你會(huì)按照行內(nèi)塊元素的最下寬度值在before元素內(nèi)容之后顯示。

標(biāo)簽分類(lèi)

塊級(jí)元素

<address>   定義地址
<caption>   定義表格標(biāo)題
<dd>    定義列表中定義條目
<div>   定義文檔中的分區(qū)或節(jié)
<dl>    定義列表
<dt>    定義列表中的項(xiàng)目
<fieldset> 定義一個(gè)框架集
<form> 創(chuàng)建 HTML 表單
<h1>    定義最大的標(biāo)題
<h2>    定義副標(biāo)題
<h3>    定義標(biāo)題
<h4>    定義標(biāo)題
<h5>    定義標(biāo)題
<h6>    定義最小的標(biāo)題
<hr>    創(chuàng)建一條水平線
<legend>    元素為 fieldset 元素定義標(biāo)題
<li>    標(biāo)簽定義列表項(xiàng)目
<noframes> 為那些不支持框架的瀏覽器顯示文本，于 frameset 元素內(nèi)部
<noscript> 定義在腳本未被執(zhí)行時(shí)的替代內(nèi)容
<ol>    定義有序列表
<ul>    定義無(wú)序列表
<p> 標(biāo)簽定義段落
<pre>   定義預(yù)格式化的文本
<table> 標(biāo)簽定義 HTML 表格
<tbody> 標(biāo)簽表格主體（正文）
<td>    表格中的標(biāo)準(zhǔn)單元格
<tfoot> 定義表格的頁(yè)腳（腳注或表注）
<th>    定義表頭單元格
<thead> 標(biāo)簽定義表格的表頭
<tr>    定義表格中的行

行內(nèi)元素

<a> 標(biāo)簽可定義錨
<abbr> 表示一個(gè)縮寫(xiě)形式
<acronym>   定義只取首字母縮寫(xiě)
<b> 字體加粗
<bdo>   可覆蓋默認(rèn)的文本方向
<big>   大號(hào)字體加粗
<br>    換行
<cite> 引用進(jìn)行定義
<code> 定義計(jì)算機(jī)代碼文本
<dfn>   定義一個(gè)定義項(xiàng)目
<em>    定義為強(qiáng)調(diào)的內(nèi)容
<i> 斜體文本效果
<img>   向網(wǎng)頁(yè)中嵌入一幅圖像
<input> 輸入框
<kbd>   定義鍵盤(pán)文本
<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）
<q> 定義短的引用
<samp> 定義樣本文本
<select>    創(chuàng)建單選或多選菜單
<small> 呈現(xiàn)小號(hào)字體效果
<span> 組合文檔中的行內(nèi)元素//本例子當(dāng)中用到了span
<strong>    語(yǔ)氣更強(qiáng)的強(qiáng)調(diào)的內(nèi)容
<sub>   定義下標(biāo)文本
<sup>   定義上標(biāo)文本
<textarea> 多行的文本輸入控件
<tt>    打字機(jī)或者等寬的文本效果
<var>   定義變量

行內(nèi)塊元素

<button>    按鈕
<del>   定義文檔中已被刪除的文本
<iframe>    創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）
<ins>   標(biāo)簽定義已經(jīng)被插入文檔中的文本
<map>   客戶(hù)端圖像映射（即熱區(qū)）
<object>    object對(duì)象
<script>    客戶(hù)端腳本

文章的末尾

總結(jié)為一句話，就是行內(nèi)塊元素的width==0的時(shí)候，元素里面的內(nèi)容有一個(gè)最小的寬度值。大家也可以動(dòng)手試一試，有什么問(wèn)題歡迎評(píng)論區(qū)留言，一起學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。