欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間：2019-12-09 16:00:58   作者：LINGLONG   我要評論
這篇文章主要介紹了詳解css中inline-block的最小寬度值，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

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

文章的開始

書中舉了一個凹凸的例子，但是并沒有詳細的講解，下面我對這段代碼詳細解釋一下。

代碼操作

<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">我愛mother</span>
        <span class="tu">不愛你</span>
        <span>我愛你</span>
    </div>
</body>

結果演示

代碼解讀

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

1.首先通過display轉換成行內塊元素。然后寬度設置為0讓span元素能夠擁有最小寬度值。

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

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

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

標簽分類

塊級元素

<address>   定義地址
<caption>   定義表格標題
<dd>    定義列表中定義條目
<div>   定義文檔中的分區(qū)或節(jié)
<dl>    定義列表
<dt>    定義列表中的項目
<fieldset>  定義一個框架集
<form>  創(chuàng)建 HTML 表單
<h1>    定義最大的標題
<h2>    定義副標題
<h3>    定義標題
<h4>    定義標題
<h5>    定義標題
<h6>    定義最小的標題
<hr>    創(chuàng)建一條水平線
<legend>    元素為 fieldset 元素定義標題
<li>    標簽定義列表項目
<noframes>  為那些不支持框架的瀏覽器顯示文本，于 frameset 元素內部
<noscript>  定義在腳本未被執(zhí)行時的替代內容
<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>   向網(wǎng)頁中嵌入一幅圖像
<input> 輸入框
<kbd>   定義鍵盤文本
<label> 標簽為 input 元素定義標注（標記）
<q> 定義短的引用
<samp>  定義樣本文本
<select>    創(chuàng)建單選或多選菜單
<small> 呈現(xiàn)小號字體效果
<span>  組合文檔中的行內元素//本例子當中用到了span
<strong>    語氣更強的強調的內容
<sub>   定義下標文本
<sup>   定義上標文本
<textarea>  多行的文本輸入控件
<tt>    打字機或者等寬的文本效果
<var>   定義變量

行內塊元素

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

文章的末尾

總結為一句話，就是行內塊元素的width==0的時候，元素里面的內容有一個最小的寬度值。大家也可以動手試一試，有什么問題歡迎評論區(qū)留言，一起學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論