css中轉(zhuǎn)換為行內(nèi)樣式的解決方案(css-inline)
我要評論
聊聊場景
- 發(fā)送郵件
- 在第三方網(wǎng)站中嵌入HTML
- 從其他編輯器拷貝編輯好的文章發(fā)布到微信、今日頭條等自媒體
在以上場景使用行內(nèi)樣式的兼容性要高很多，也可以保持原樣式不變
解決方案
這兩種方案功能和 Api 非常相似,這里就以 juice 為例
安裝
npm i juice --save
使用
import juice from 'juice'
const html = `
<div class="test"><h1>測試Juice</h1></div>
<style>
div{
width: 90%;
height: 500px;
}
</style>
const result = juice(html)
console.log(result)
結(jié)果
<div style="width: 90%; height: 500px;"> <h1>測試Juice</h1> </div>
ps：下面看下CSS - 行內(nèi)塊元素（inline-block）、標(biāo)簽顯示模式轉(zhuǎn)換 display
行內(nèi)塊元素（inline-block）
在行內(nèi)元素中有幾個(gè)特殊的標(biāo)簽——<img />、<input />、<td>，可以對它們設(shè)置寬高和對齊屬性，有些資料可能會(huì)稱它們?yōu)樾袃?nèi)塊元素。
行內(nèi)塊元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會(huì)有空白縫隙。
（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;
總結(jié)
到此這篇關(guān)于css中轉(zhuǎn)換為行內(nèi)樣式的解決方案(css-inline)的文章就介紹到這了,更多相關(guān)css行內(nèi)樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css之display屬性之inline-block布局實(shí)現(xiàn)詳解
今天學(xué)習(xí)css樣式的時(shí)候發(fā)現(xiàn)很多網(wǎng)站都是用css的display:inline-block這個(gè)屬性，這里剛好有篇特別好的解釋，特分享一下2020-03-21
這篇文章主要介紹了詳解css中inline-block的最小寬度值，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起2019-12-09
這篇文章主要介紹了詳解CSS 去掉inline-block元素間隙的幾種方法，這些間隙會(huì)導(dǎo)致一些布局上的問題，需要把間隙去掉。非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-11-13
這篇文章主要介紹了css幾種解決inline-block間隙的方案(整理),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-16詳解CSS中的display:flex||inline-flex屬性
這篇文章主要給大家介紹了CSS中的display:flex和display:inline-flex屬性，文中分別通過兩段實(shí)例代碼給大家介紹了display:flex和display:inline-flex的使用效果，感興趣的2016-12-20css解決display:inline-block;產(chǎn)生的縫隙（間隙）的方法
本篇文章主要介紹了css解決display:inline-block;產(chǎn)生的縫隙（間隙）的方法，具有一定的參考價(jià)值，有需要的可以了解一下。2016-12-14css display inline block 兼容性問題寫法
今天在寫布局的時(shí)候發(fā)現(xiàn)的一個(gè)bug，如果不這樣就達(dá)不到預(yù)期的效果，無法兩行排列，原來ie6、ie7下對display:inline-block不支持，所以需要用到css hack才可以2016-01-10
