css中变换为行内款式的处理计划方案(css

日期:2021-01-20 类型:科技新闻 

关键词:商城网站建设,微商好助手,微商引流,电商网站模板,微信商家小程序

聊聊情景

  • 推送电子邮件
  • 在第3方网站中嵌入HTML
  • 从别的编写器复制编写好的文章内容公布到手机微信、今天今日头条等自新闻媒体

在以上情景应用行内款式的适配性要高许多,还可以维持原款式不会改变

处理计划方案

  • juice
  • inline-css

这两种计划方案作用和 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)

結果

<div style="width: 90%; height: 500px;">
<h1>检测Juice</h1>
</div>

ps:下面看下CSS - 行内块元素(inline-block)、标识显示信息方式变换 display

行内块元素(inline-block)
内行内元素中有几个独特的标识——<img />、<input />、<td>,能够对它们设定宽高和对齐特性,一些材料将会会称它们为行内块元素。

行内块元素的特性:
(1)和邻近行内元素(行内块)在1行上,可是之间会有时间白间隙。
(2)默认设置宽度便是它自身內容的宽度。
(3)高宽比,行高、外边距和内边距都可以以操纵。

标识显示信息方式变换 display
块改行内:display:inline;

行内转块:display:block;

块、行内元素变换为行内块: display: inline-block;

总结

到此这篇有关css中变换为行内款式的处理计划方案(css-inline)的文章内容就详细介绍到这了,更多有关css行内款式內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!