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

2017-10-24  本文已影响0人  谢梦扬_

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

实用的实体单位

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

上一篇下一篇

猜你喜欢

热点阅读