CSS Tips

作者: forks1990 | 来源:发表于2020-10-14 17:01 被阅读0次

根据内容调整字体大小

https://github.com/davatron5000/FitText.js

使用 rem 做字体长度,便于调整

如果所有的字体大小都使用 rem 单位,那么只要修改根元素 (<html>)的字体大小,就能修改整个页面的字体。

<html style="font-size: 14px">

Note: 如果不设置,根字体大小一般为 16px

小心 inline 元素之间的空白

一般来说,html元素直接的空白是被忽略的,但是,inline元素,包括 inline-block ,如果元素之间有空白,会render出一定的空白,
类似英文单词之间的空格。不注意这一点会出现奇观的结果,比如:

<label>
  <input type="checkbox">
  <span>label</span>
</label>

inputspan,都是inline,为了代码美观他们之间有换行和对齐用的空格,浏览器在显示的时候会在添加空白,造成了莫名其妙的布局问题。

解决这种现象,可以从两个方面入手:

  1. 去除添加的换行和空格:
<label>
  <input type="checkbox"><span>label</span>
</label>
  1. 改成其他布局,比如flex,或者把他们改成display: block

在 checkbox 这个使用场景,个人更倾向于第一种方法。

相关文章

  • 一个webAPP项目的完整记录(vue)

    项目初始化 some Tips 引入外部CSS: @import "../css/base.css";引入外部J...

  • 【css】常用样式&骨架屏

    css css Tips css更多写法 tanform动画 矩阵 图片压缩规则 [x] 阿里云压缩规则:?x-o...

  • css tips

    高度不定的情况下,让文字水平居中 在内容宽高不定的情况下,让内容居中

  • css tips

    .box:first-child和.box :first-child的区别 选择一个class为box的元素,要求...

  • CSS Tips

    1.半透明边框border:10px solid hsla(0,0%,100%,.5);background:wh...

  • CSS Tips

    根据内容调整字体大小 https://github.com/davatron5000/FitText.js[htt...

  • CSS Tips

    垂直居中 display: relative如果父类有设置高度可以尝试 (height: 100%也可以) 没有的...

  • 自制html+css+js自适应弹出框

    html 部分 css 部分 JS部分 Tips:引入样式前加入了reset.css进行了样式重置

  • CSS常用tips

    autocomplete="off"表单输入禁用autocomplete

  • tips之css

    CSS3 :not()选择器 自定义超出N行用...代替.ellipsis-row(n){overflow:hid...

网友评论

      本文标题:CSS Tips

      本文链接:https://www.haomeiwen.com/subject/cpuwpktx.html