溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關怎么在css中實現inline-block的最小寬度值，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
<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標簽是行內元素，如果對三種樣式不是很熟悉我在文章的后面都有說明。
1.首先通過display轉換成行內塊元素。然后寬度設置為0讓span元素能夠擁有最小寬度值。
2.對兩個偽元素使用公共的偽元素before，偽元素不同的內容會不同的換行外邊框樣式為紅色并且規定字體樣式。
為什么要用偽元素，不用偽元素直接進行設置不行嗎？我帶著這個疑問又試了一次，發現不用偽元素的時候文字是凹凸顯示，但是邊框不是，而且文字之間還會疊加和重合。這個原因還沒有想明白，大家可以看看討論一下。
direction: rtl;是為了讓文本方向從右到左，凸出來的部分正好對準凹進去的口子。
3.后面的我愛mother，不愛你會按照行內塊元素的最下寬度值在before元素內容之后顯示。
標簽分類
塊級元素
<address> 定義地址
<caption> 定義表格標題
<dd> 定義列表中定義條目
<div> 定義文檔中的分區或節
<dl> 定義列表
<dt> 定義列表中的項目
<fieldset> 定義一個框架集
<form> 創建 HTML 表單
<h2> 定義最大的標題
<h3> 定義副標題
<h4> 定義標題
<h5> 定義標題
<h6> 定義標題
<h7> 定義最小的標題
<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> 客戶端腳本
css的全稱是Cascading Style Sheets（層疊樣式表），它是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
以上就是怎么在css中實現inline-block的最小寬度值，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
