谷歌浏览器调试面板盒模型总展示当前这个块的各部分的像素值, 这很方便
像素
- 什么是像素(Pixel)?
- 在前端开发中视口的水平方向和垂直方向是由很多小方格组成的, 一个小方格就是一个像素
- 例如div尺寸是100 x 100, 那么水平方向就占用100个小方格, 垂直方向就占用100个小方格
- 像素特点
- 不会随着视口大小的变化而变化, 像素是一个固定的单位(绝对单位) (其实也没有很绝对啦, 1080p 的屏幕从 6 寸到 27 寸都是有的) (绝对也不绝对可还行)
百分比 (重要)
-
什么是百分比?
- 百分比是前端开发中的一个动态单位, 永远都是以当前元素的父元素作为参考进行计算
- 例如父元素宽高都是200px, 设置子元素宽高是50%, 那么子元素宽高就是100px
-
百分比特点
-
子元素宽度是参考父元素宽度计算的
-
子元素高度是参考父元素高度计算的
-
子元素 padding 无论是水平还是垂直方向都是参考父元素==宽==度计算的
-
子元素 margin 无论是水平还是垂直方向都是参考父元素==宽==度计算的
-
==不能==用百分比设置元素的 border
结论: 百分比是一个动态的单位, 会随着父元素宽高的变化而变化(相对单位)
-
em
嚯, 查了半天, 老外也不确定 em 为什么是 em, 也不知道是怎么演化来的, 只知道就是 “相对于字体大小的单位”
-
什么是 em?
- em是前端开发中的一个动态单位, 是一个相对于元素字体大小的单位
- 例如 font-size: 12px; 那么 1em 就等于 12px
-
em 特点 (找字体大小是就近原则)
-
当前元素设置了字体大小, 那么就相对于当前元素的字体大小
-
当前元素没有设置字体大小, 那么就相当于第一个设置字体大小的祖先元素的字体大小
-
如果当前元素和所有祖先元素都没有设置大小, 那么就相当于浏览器默认的字体大小
结论: em 是一个动态的单位, 会随着参考元素字体大小的变化而变化(相对单位)
-
rem (重要)
rem 是 root-em 的缩写
-
什么是 rem?
- rem 就是 root em, 和 em 是前端开发中的一个动态单位,
- rem 和 em 的区别在于, rem 是一个相对于==根==元素字体大小的单位
- 例如 根元素(html) font-size: 12px; ,那么 1em 就等于 12px
-
rem特点
-
除了根元素以外, 其它祖先元素的字体大小不会影响 rem 尺寸
-
如果根元素设置了字体大小, 那么就相对于根元素的字体大小
-
如果根元素没有设置字体大小, 那么就相对于浏览器默认的字体大小
结论: rem是一个动态的单位, 会随着根元素字体大小的变化而变化(相对单位)
-
vwvh
- 什么是 vw(Viewport Width) 和 vh(Viewport Height)?
- vw 和 vh 是前端开发中的一个动态单位, 是一个相对于网页视口的单位
- 系统会将视口的宽度和高度分为 ==100份==, 1vw 就占用视口宽度的百分之一, 1vh 就占用视口高度的百分之一
- vw 和 vh 和百分比不同的是, 百分比永远都是以父元素作为参考 而 vw 和 vh 永远都是以视口作为参考 结论: vw/vh是一个动态的单位, 会随着视口大小的变化而变化(相对单位)
- 什么是vmin和vmax?
- vmin: vw 和 vh 中较小的那个
- vmax: vw 和 vh 中较大的那个 使用场景: 保证移动开发中屏幕旋转之后元素尺寸相对不变 (短的还是短的, 长的还是长的)
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!