css中inline-block的最小寬度值

時間 2019-12-08

標籤 css inline block 最小寬度欄目 CSS 简体版

原文原文鏈接

前言

最近晚上會抽出一點時間看《css世界》這本書，這本書講的頗有趣，讓我知道css並不是幾個屬性樣式這麼簡單。昨天看到width在行內塊元素中，若是設置其寬度爲0，該元素標籤裏面的內容存在着一個最小的寬度，最小的寬度根據中文字符和英文字符又有所區別，中文字符是以每一個漢字來分割，英文字符是以英文單詞來分割。css

文章的開始

書中舉了一個凹凸的例子，可是並無詳細的講解，下面我對這段代碼詳細解釋一下。瀏覽器

代碼操做

<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;
            /* 規定元素的字體系列 */
            font-family: Consolas, Monaco, monospace;
        }
        .ao:before{
            content: "love你love";
        }
        .tu{
            /* 文本方向從又到左，爲了反向 */
            direction: rtl;
        }
        .tu:before{
            content: "我love你"
        }
    </style>
</head>
<body>
    <div>
        <span class="ao">我愛mother</span>
        <span class="tu">不愛你</span>
        <span>我愛你</span>
    </div>
</body>
複製代碼

結果演示

代碼解讀

兩個span標籤來展現凹凸的效果。span標籤是行內元素，若是對三種樣式不是很熟悉我在文章的後面都有說明。bash

1.首先經過display轉換成行內塊元素。而後寬度設置爲0讓span元素可以擁有最小寬度值。框架

2.對兩個僞元素使用公共的僞元素before，僞元素不一樣的內容會不一樣的換行外邊框樣式爲紅色而且規定字體樣式。爲何要用僞元素，不用僞元素直接進行設置不行嗎？我帶着這個疑問又試了一次，發現不用僞元素的時候文字是凹凸顯示，可是邊框不是，並且文字之間還會疊加和重合。這個緣由尚未想明白，你們能夠看看討論一下。學習

direction: rtl;是爲了讓文本方向從右到左，凸出來的部分正好對準凹進去的口子。字體

3.後面的我愛mother，不愛你會按照行內塊元素的最下寬度值在before元素內容以後顯示。spa

標籤分類

塊級元素

<address>   定義地址
<caption>   定義表格標題
<dd>    定義列表中定義條目
<div>   定義文檔中的分區或節
<dl>    定義列表
<dt>    定義列表中的項目
<fieldset>  定義一個框架集
<form>  建立 HTML 表單
<h1>    定義最大的標題
<h2>    定義副標題
<h3>    定義標題
<h4>    定義標題
<h5>    定義標題
<h6>    定義最小的標題
<hr>    建立一條水平線
<legend>    元素爲 fieldset 元素定義標題
<li>    標籤訂義列表項目
<noframes>  爲那些不支持框架的瀏覽器顯示文本，於 frameset 元素內部
<noscript>  定義在腳本未被執行時的替代內容
<ol>    定義有序列表
<ul>    定義無序列表
<p> 標籤訂義段落
<pre>   定義預格式化的文本
<table> 標籤訂義 HTML 表格
<tbody> 標籤表格主體（正文）
<td>    表格中的標準單元格
<tfoot> 定義表格的頁腳（腳註或表注）
<th>    定義表頭單元格
<thead> 標籤訂義表格的表頭
<tr>    定義表格中的行

複製代碼

行內元素

<a> 標籤可定義錨
<abbr>  表示一個縮寫形式
<acronym>   定義只取首字母縮寫
<b> 字體加粗
<bdo>   可覆蓋默認的文本方向
<big>   大號字體加粗
<br>    換行
<cite>  引用進行定義
<code>  定義計算機代碼文本
<dfn>   定義一個定義項目
<em>    定義爲強調的內容
<i> 斜體文本效果
<img>   向網頁中嵌入一幅圖像
<input> 輸入框
<kbd>   定義鍵盤文本
<label> 標籤爲 input 元素定義標註（標記）
<q> 定義短的引用
<samp>  定義樣本文本
<select>    建立單選或多選菜單
<small> 呈現小號字體效果
<span>  組合文檔中的行內元素//本例子當中用到了span
<strong>    語氣更強的強調的內容
<sub>   定義下標文本
<sup>   定義上標文本
<textarea>  多行的文本輸入控件
<tt>    打字機或者等寬的文本效果
<var>   定義變量

複製代碼

行內塊元素

<button>    按鈕
<del>   定義文檔中已被刪除的文本
<iframe>    建立包含另一個文檔的內聯框架（即行內框架）
<ins>   標籤訂義已經被插入文檔中的文本
<map>   客戶端圖像映射（即熱區）
<object>    object對象
<script>    客戶端腳本

複製代碼