美文网首页
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中有趣的尺寸,宽高技巧

    ex 相对于小写字母x的高度 ch 相对于数字 0 的宽度 利用宽度 ch 刚好是一个字母的宽度实现 打字效果(...

  • Web基础之CSS(二)

    CSS 单位尺寸: 颜色: 尺寸属性: width/height:宽高 overflow:当内容溢出元素框时如何处...

  • CSS 改变滚动条样式 web前端

    css 改变scroll样式 /*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scr...

  • css+js改变滚动条

    CSS3或CSS+JS实现改变滚动条样式(兼容所有浏览器) /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸...

  • 纯CSS实现未知尺寸的图片在容器中水平和垂直居中

    使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中 CSS HTML

  • background-size

    background-size为css3新特性,用于规定背景图像的尺寸。 length:宽高。background...

  • Canvas-基础

    坐标系 css中的宽高不是画布的大小,当设置了css宽高,画布会随之缩放如果你的canvas的宽高是100,100...

  • iPhone屏幕尺寸、分辨率及适配(转)

    iPhone尺寸规格 2. 单位inch(英吋) 3.iPhone手机宽高 上表中的宽高(width/height...

  • img标签等比缩放撑开

    css的background可以按照原尺寸等比缩放撑满容器,期望img标签也能实现 解决:img的父容器给个宽高,...

  • 蝉 · 香囊

    设计尺寸:8(最宽)×11(高) 完成尺寸:7(最宽)×9(高) 特殊工具:可乐Clover57-877(or穿绳...

网友评论

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

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