美文网首页
css中有趣的尺寸,宽高技巧

css中有趣的尺寸,宽高技巧

作者: 谢梦扬_ | 来源:发表于2017-10-24 13:12 被阅读0次
    • ex 相对于小写字母x的高度
    • ch 相对于数字 0 的宽度

    利用宽度 ch 刚好是一个字母的宽度实现 打字效果(宽度等比增长)demo

    • vw 相对于视窗的 宽度:视窗宽度100vw「window.innerWidth」
    • vh 相对于视窗的 高度:视窗高度是 100vh「window.innerHeight」

    实用的实体单位

    & emsp; 相当于 em 的宽度
    & ensp; 相当于 1/2 em 的宽度

    使用场景
    当我们需要给文字增加间隙的时候,可能会使用 last-letter
    ,但是他会使最后一个字符后面也有间距
    所以可以使用

    string.split('').join(' ')
    

    利用 & emsp; 实现的对齐效果 一个 Demo

    padding 百分比

    padding-top、padding-bottom 如果设置为百分比,是相对于父元素的宽度来计算的 实现一个图片按比例缩放demo

    height:100% 和 height:inherit 的异同

    如果 height:inherit 是继承父元素的高度,那么和 height:100% 不是没有什么区别么?
    一般情况他们二者没有区别,区别在于元素为「绝对定位」时
    绝对定位元素的 height:inherit 是相对于父元素计算;而 height:100% 相对于定位基准元素计算

    相关文章

      网友评论

          本文标题:css中有趣的尺寸,宽高技巧

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