你可能没注意的CSS单位 BY:色拉油啊油
扶今追昔
CSS中的单位我们经常用到px
、pt
、em
、百分比
,px和pt不用多说
em
em是相对单位,参考物是父元素的font-size
,具有继承的特点
如果字体大小是16px(浏览器的默认值),那么 1em = 16px
这样使用换算很复杂,尤其是和px对应,大家总结出了经验
body {
font-size: 62.5%;
}
这样之后 1em = 10px
在布局等使用的时候好换算了很多
百分比
百分比也是很常见的用法,看似简单其实有些初学者可能注意不到的知识
相对于谁
首先要明确百分比是相对于谁,宽泛的讲是父元素,但是并不是十分准确
- 对于普通定位元素就是我们理解的父元素
- 对于
position: absolute;
的元素是相对于已定位的父元素(offset parent) - 对于
position: fixed;
的元素是相对于 ViewPort
viewport:可视窗口,也就是浏览器的window那么大
意外
- padding、margin 如果设置了百分比,会发现左右和预期一样,用的父元素宽度的百分比,但是用的也是 ** 宽度 ** 百分比,而不是想象中的高度的百分比
- 后代元素继承的是百分比 计算后的值 ,而不是原百分比,这个对于
line-height
的时候经常会遇到坑,还有这样的面试题问你line-height
设置为120%
和1.2
的区别
CSS3开启新时代
rem
em是个很不错的单位,但是有个问题就是可能会带来混乱,因为em依赖于父元素的字体大小,各个元素父元素的字体尺寸不一定一样,会带来布局上很大的不确定性
rem
font size of the root element
rem相对于根元素html
(网页),这样使用起来就安全了很多
html {font-size: 62.5%; /10 ÷ 16 × 100% = 62.5%/}
body {font-size: 1.4rem; /1.4 × 10px = 14px /}
h1 { font-size: 2.4rem; /2.4 × 10px = 24px/}
IE9+ 和现代浏览器都已经支持了
vw和vh
vw
Viewport宽度, ** 1vw ** 等于viewport宽度的1%vh
Viewport高度, ** 1vh ** 等于viewport高的的1%
vw和vh会随着viewport变化自动变化,再也不用js控制全屏神马的了
甚至有些人丧心病狂的字体大小都用vw和vh控制,来达到字体和viewport大小同步的效果
IE10+ 和现代浏览器都支持这两个单位
vmin和vmax
这两个单位是针对vw和vh
vmin
vw和vh中比较 ** 小 ** 的值vmax
vw和vh中比较 ** 大 ** 的值
这两个属性也会随着viewport变化
IE10+ 和现代浏览器都已经支持vmin
webkit浏览器之前不支持vmax,现在已经支持,所有现代浏览器已经支持,但是IE ** 全部 ** 不支持vmax
ch和ex
这两个单位时根据 ** 当前font-family
** 的相对单位
ch
字符0
的宽度ex
小写字符x
的高度
当font-family
改变的时候这两个单位的值也会变化,不同字体表现的样式不一样
IE9+ 和现代浏览器都已经支持
浏览器兼容性
写的时候介绍了一些,大神写了测试页面可以帮我们直观的看到
http://s.codepen.io/chriscoyier/fullgrid/CiwFD?type=embed&safe=true
参考
7 CSS Units You Might Not Know About
CSS的长度单位
你可能不知道的7个CSS单位
转载于:https://www.cnblogs.com/gongzhujiademao/articles/4221587.html
你可能没注意的CSS单位 BY:色拉油啊油相关推荐
- 你可能没注意的CSS单位
扶今追昔 CSS中的单位我们经常用到px.pt.em.百分比,px和pt不用多说 em em是相对单位,参考物是父元素的font-size,具有继承的特点 如果字体大小是16px(浏览器的默认值),那 ...
- CSS单位 px pt em和rem 之间的区别
CSS中可以定义大小的单位有四种px,pt,em,rem,而px可以说在网页开发中最常见的单位了.不过现在如今的大多数网站已经开始用rem这个单位了.那么这四个单位有什么区别呢? px|pt|em|r ...
- 七个你可能不了解的CSS单位
七个你可能不了解的CSS单位 我们很容易无法摆脱的使用我们所熟悉的CSS技术,当新的问题出现,这样会使我们处于不利的地位. 随着Web继续的发展,对新的解决方案的需求也会继续增大.因此,作为网页设计师 ...
- 前端css单位小结:vh、vw、百分比、rem、px、计算属性calc
写在前面: 本文作为本人学习总结之用,同时分享给大家~ 个人前端博客网站:zhangqiang.hk.cn 欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步! 前端c ...
- 弄清楚CSS单位px、em、rem、vh、vw、vmin、vmax的应用场景
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em ...
- CSS单位分析及CSS颜色表示法、颜色表(调色板)
CSS单位主要分析em.rem.fr这三个较难理解的单位吧,平常的px.%.cm那些就不谈了嘛. px在不同场景之下为同样的值,我们把它称作绝对单位,而em和rem受外部因素的影响下而改变,因此称作相 ...
- 学习网页制作中如何在正确选取和使用 CSS 单位
在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...
- weex css单位,weex 踩坑
1. 用weex实现页面跳转? 1.1 使用vue-router position: fixed/sticky 的元素,在切换页面后不会消失 image.png 1.2 使用navigator 作为跳 ...
- CSS单位之战:EM与。 REMs ...打架! ?
by ZAYDEK 由ZAYDEK tl; dr不要*只是*使用px (tl;dr don't *just* use px) CSS单位之战:EM与. REMs ...打架! ? (CSS Unit ...
最新文章
- Datawhale 内推 | 头条、百度、网易、滴滴、联想、商汤、平安科技等
- python matplotlib散点图-python的matplotlib散点图
- Ubuntu中安装Pycharm
- 网络怎么排错?手把手教你
- BeautifulSoup children descendants对比
- 数论练习1 ( 曹冲养猪 + [POJ 2891]Strange Way to Express Integers + 乘法逆元【带证明】)
- macos brew zookeeper,安装后zookeeper启动失败?
- designer pyqt5 界面切换_PyQt5快速上手基础篇3-设置窗口标题和图标
- 数组的几个重要方法以及如何清空数组
- python3.5和python3.6关于json模块的区别
- c语言编程下雪,C语言怎么 实现 下雪效果
- 考勤机信息同步不到服务器,考勤机实时同步功能上线啦
- Python numpy.ones函数方法的使用
- windows下的gitbub使用入门
- 【正点原子I.MX6U-MINI应用篇】6、嵌入式Linux在LCD屏幕上显示字符
- 机智云AIoT开发平台,物联网开发和运营从未如此简单
- 常用网络ip地址有哪些
- mysql 5.7修改密码
- 多目标蚁群算法路径规划(四)------多目标约束过程常规流程框架
- ISO 8601 标准时间格式
热门文章
- Git工作模式_繁星漫天_新浪博客
- 数据分析师需要重点学习什么技能?
- Scrapy爬虫实践之搜索并获取前程无忧职位信息(基础篇)
- html页面滚动条监听事件,滚动条的scroll事件
- wifi连接速率 linux,Deepin linux 操作系统提高 WiFi 速度
- php 跳转qq群代码_Q群自动签到php+java实现
- 矩形波如何傅立叶展开_SolidWorks三维钣金展开放样实例教程
- SDL mac(event) 入门1 - 显示图像
- WordPress 元老 Alex King 逝世
- 射频卡机井灌溉控制器特点