css中vw和%有什么区别吗?

%单位

%(百分比)是一个相对长度单位,相对于包含块(containing block)的高宽或字体大小来取值。

关于包含块(containing block)的概念,不能简单地理解成是父元素。

  • 如果是静态定位和相对定位,包含块一般就是其父元素。

  • 如果是绝对定位的元素,包含块应该是离它最近的 position为非static属性的祖先元素。

  • 如果是固定定位的元素,它的包含块是视口(viewport)。

vw单位

vw、vh、vmin、vmax是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。

具体描述如下:

  • vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)

  • vh:视窗高度的百分比

  • vmin:取当前Vw和Vh中较小的那一个值

  • vmax:取当前Vw和Vh中较大的那一个值

vh和vw相对于视口的高度和宽度, 1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度 比如:浏览器高度900px,宽度为750px, 1 vh = 900px/100 = 9 px,1vw = 750px/100 = 7.5 px, 很容易实现与同屏幕等高的框。

calc + vm 计算宽度

width: 800px; 
width: -moz-calc(100vm - (2 * 10)px);
width: -webkit-calc(100vm -(2 * 10)px);
width: calc(100vm - (2 * 10)px);

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css中vw和%有什么区别吗?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏