代码换行符_换行符对模板字符串的影响

先贴出CSS代码:

再看原始的HTML代码片段:

 
追加
按钮一 按钮二 按钮三

得到样式:

1cbf6fb3eb816697e11149e648af392b.png

图一

以图一得到的按钮一、按钮二、按钮三的间距作为标准。点击追加按钮执行方法:

appendButton() {        let innerHtml =         `         
换行追加
按钮一 按钮二 按钮三
不换行追加
按钮一按钮二按钮三
`; ; //向show-buttond追加 this.elements.insertAdjacentHTML('beforeend',innerHtml);}

得到的效果图:

dbb752c183ef8ee3ce97932a6e8cee55.png

图二

可以很清晰的看见不换行追加得到的三个按钮间距明显小于上面两行按钮的间距。看到这里应该可以很清楚的认识到换行符对button按钮的间距产生了影响。究竟是什么原因导致间距不一致?要解决这个问题就需要到浏览器控制台查看元素的详细信息(在chrome浏览器很难发现问题出在哪里,推荐使用Firefox查看)。当打开Firefox控制台时:

b9d280cedd1df76afc7962aed0f57cea.png

图三

看这张图也就明白了为什么Button按钮间距不一致了。

若有错误欢迎指正

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页