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

  • 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% 相对于定位基准元素计算

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,081评论 0 1
  • 复习完CSS后总结一下,首先看一下CSS的一个体系结构图: 大体上分为这八个部分,参考一下vivijind的css...
    苏敏阅读 615评论 0 3
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,788评论 0 2
  • 愿十年后我提着老酒,愿十年后你还是老友
    海伦公主阅读 151评论 0 0