css中轉(zhuǎn)換為行內(nèi)樣式的示例

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

場景

• 發(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)元素中有幾個(gè)特殊的標(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)注億速云行業(yè)資訊頻道！