css中轉(zhuǎn)換為行內(nèi)樣式的示例-創(chuàng)新互聯(lián)

小編給大家分享一下css中轉(zhuǎn)換為行內(nèi)樣式的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)神池免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

場景

• 發(fā)送郵件

• 在第三方網(wǎng)站中嵌入HTML

• 從其他編輯器拷貝編輯好的文章發(fā)布到微信、今日頭條等自媒體

在以上場景使用行內(nèi)樣式的兼容性要高很多，也可以保持原樣式不變

解決方案

• juice

• inline-css

這兩種方案功能和Api 非常相似,這里就以juice 為例

安裝

npm i juice --save

使用

import juice from 'juice'
const html = `
<div class="test"><h2>測試Juice</h2></div>
<style>
div{
    width: 90%;
    height: 500px;
}
</style>
const result = juice(html)
console.log(result)

結(jié)果

<div style="width: 90%; height: 500px;">
<h2>測試Juice</h2>
</div>

ps：下面看下CSS - 行內(nèi)塊元素（inline-block）、標(biāo)簽顯示模式轉(zhuǎn)換 display

行內(nèi)塊元素（inline-block）
在行內(nèi)元素中有幾個特殊的標(biāo)簽&mdash;&mdash;<img />、<input />、<td>，可以對它們設(shè)置寬高和對齊屬性，有些資料可能會稱它們?yōu)樾袃?nèi)塊元素。

行內(nèi)塊元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會有空白縫隙。
（2）默認(rèn)寬度就是它本身內(nèi)容的寬度。
（3）高度，行高、外邊距以及內(nèi)邊距都可以控制。

標(biāo)簽顯示模式轉(zhuǎn)換 display
塊轉(zhuǎn)行內(nèi)：display:inline;

行內(nèi)轉(zhuǎn)塊：display:block;

塊、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊：display: inline-block;

以上是“css中轉(zhuǎn)換為行內(nèi)樣式的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：css中轉(zhuǎn)換為行內(nèi)樣式的示例-創(chuàng)新互聯(lián)
文章位置：http://www.jbt999.com/article18/eoodp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、靜態(tài)網(wǎng)站、用戶體驗(yàn)、網(wǎng)站排名、自適應(yīng)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)