首页 > Web开发 > 详细

css 单位

时间:2018-11-22 15:48:20      阅读:197      评论:0      收藏:0      [点我收藏+]

CSS 有几个不同的单位用于表示长度。

一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。

长度有一个数字和单位组成如 10px, 2em, 等。

数字与单位之间不能出现空格。如果长度值为 0,则可以省略单位。

对于一些 CSS 属性,长度可以是负数。

有两种类型的长度单位:相对和绝对。

技术分享图片

技术分享图片

  以上为菜鸟教程版权所有!

 

 

绝对单位

px: Pixel 像素
pt: Points 磅
pc: Picas 派卡
in: Inches 英寸
mm: Millimeter 毫米
cm: Centimeter 厘米
q: Quarter millimeters 1/4毫米

相对单位

%: 百分比
em: Element meter 根据文档字体计算尺寸
rem: Root element meter 根据根文档( body/html )字体计算尺寸
ex: 文档字符“x”的高度
ch: 文档数字“0”的的宽度
vh: View height 可视范围高度
vw: View width 可视范围宽度
vmin: View min 可视范围的宽度或高度中较小的那个尺寸
vmax: View max 可视范围的宽度或高度中较大的那个尺寸

css计算属性:

calc: 四则运算

实例:h1 {    width: calc(100% - 10px + 2rem) }

vmin / vmax 可视范围的宽度或高度中较小/较大的那个尺寸

假设需要让一个元素始终在屏幕上可见:.box {  height: 100vmin; width: 100vmin;}

技术分享图片

 

 

如果需要让这个元素始终铺满整个视口的可见区域:.box { height: 100vmax; width: 100vmax;}

技术分享图片

 

 em、rem 是实际生产中我们最常用到的单位,可以使用其配合媒体查询改变 body 字体大小来实现响应式的设计,vh、vw、vmin、vmax也可以很方便地帮助我们控制响应尺寸,但实际的可控性可能不如前者,具体按照我们的业务需求去实践吧!

 

css 单位

原文:https://www.cnblogs.com/dekui/p/10001372.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!