CSS中的长度单位,宽度自适
来源:互联网 发布:js全栈开发教程 编辑:程序博客网 时间:2024/05/22 15:15
CSS 单位
作者:Chinaxiang 来源:互联网 2015-12-01 23:36
CSS中的长度单位有很多,觉得有必要整理备忘。
概览
CSS中的长度单位有很多,觉得有必要整理备忘。
网上介绍的也比较多和全,详见参考资料。
单位大体分为两大类:
绝对单位 ,不会因为其他元素的尺寸变化而变化。
相对单位 ,没有一个固定的度量值,而是由其他元素尺寸来决定的相对值。
px
Absolute像素 (计算机屏幕上的一个点),1px = 1/96in
pt
AbsolutePoints, 1pt = 1/72in
pc
AbsolutePicas, 1pc = 12pt
in
AbsoluteInches, 1in = 96px = 2.54cm
cm
AbsoluteCentimeters, 1cm = 96/2.54px
mm
AbsoluteMillimeters, 1mm = 1/10cm
q
AbsoluteQuarter-millimeters, 1q = 1/4mm
%
Relative相对于父元素的宽度或字体大小em
Relative相对于父元素的字体大小rem
Relative(即root em) 相对于html标签的字体大小ex
Relative当前字体环境中 x
字母的高度ch
Relative当前字体环境中 0
数字的高度vw
Relative1% 视口(浏览器可视区域)的宽度vh
Relative1% 视口(浏览器可视区域)的高度vmin
Relative1% 视口(浏览器可视区域)的宽度和高度中较小的尺寸vmax
Relative1% 视口(浏览器可视区域)的宽度和高度中较大的尺寸由于绝对单位是固定值,没什么要介绍的,下面主要介绍相对单位。
%
相对于父元素的相同属性的大小。这个其实谈不上单位,但它毕竟可以作为长度单位来使,所以在此列出。
如果用来设置字体,则相对的就是父元素的字体大小。
大多数浏览器中<html>
和<body>
标签中的默认字体尺寸是100%
.
html {font-size: 100%;}body {font-size: 100%;}
100% = 1em = 16px = 12pt
如果用来设置宽和高等非字体尺寸,则以百分比为单位的长度值是基于具有相同属性的父元素的长度值。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <style type="text/css"> div.parent { margin:150px; width: 200px; height: 200px; border: 1px solid blue; } div.child { width: 50%; height: 50%; border: 1px dashed black; } </style></head><body> <div class="parent"> <div class="child"></div> </div></body></html>
再啰嗦一点关于父元素的问题:何为父元素,相对定位(relative
),绝对定位(absolute
),浮动(float
),固定(fixed
)中如何找寻父元素?
由于HTML是树形结构,标签套标签,一般情况下的父子关系很明朗。
<div class="parent"> <div class="child"></div></div>
相对定位元素,它的父元素符合标签嵌套。
绝对定位元素,它的父元素是离它最近的定位元素(绝对定位,相对定位,固定,但不包括浮动)或者视窗尺寸(没找到定位元素时)。
浮动元素,它的父元素也符合标签嵌套。
固定元素(特殊的绝对定位),它的父元素是视窗(浏览器默认用来展示内容的区域的尺寸,不是html
或body
的尺寸)。
注意一下绝对定位就行了,其他的相对简单。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <style type="text/css"> html { width:1000px; } body { width:800px; } #box { width:50%; height:300px; position: absolute; margin-left: 200px; border: 1px solid red; } #can { position:absolute; top:100px; left:100px; width:50%; height:50%; border:1px solid black; } </style> </head> <body> <div id="box"> <div id="can"></div> </div> </body> </html>
box
宽度为视窗的一半,can
的宽高是 box
的宽高的一半。
将 can
设置为 position: fixed;
则其父元素将不再是 box
而是浏览器视窗。
can
的宽高是视窗宽高的一半。
浮动元素的父元素跟普通元素的父元素是一样的。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <style type="text/css"> html { width:1000px; } body { width:800px; } #box { width:50%; height:300px; position: absolute; margin-left: 200px; border: 1px solid red; } #can { float:left; width:50%; height:50%; border:1px solid black; } </style> </head> <body> <div id="box"> <div id="can"></div> </div> </body> </html>
注意: padding
、 margin
如果设置了百分比,上,下,左,右 用的都是父元素宽度 的值为标准去计算。
em
和 rem
两者都是基于字体尺寸的,区别在于 em
是相对于当前父元素的字体大小为标准,而 rem
是相对于 html
元素的字体大小为标准。
举个例子你就明白了。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <style type="text/css"> html { font-size: 30px; } body { font-size: 14px; } div.em { font-size: 1.2em; } div.rem { font-size: 1.2rem; } </style></head><body> <div class="em"> Test <!-- 14 * 1.2 = 16.8px --> <div class="em"> Test <!-- 16.8 * 1.2 = 20.16px --> <div class="em"> Test <!-- 20.16 * 1.2 = 24.192px --> </div> </div> </div> <div class="rem"> Test <!-- 30 * 1.2 = 36px --> <div class="rem"> Test <!-- 30 * 1.2 = 36px --> <div class="rem"> Test <!-- 30 * 1.2 = 36px --> </div> </div> </div></body></html>
ex
和 ch
ex
和ch
单位,依赖于当前字体font-family
和字体大小 font-size
。 ex
指当前字体环境中小写字母x
的高度,ch
指当前字体环境中数字 0
的宽度。
IE9+ 和现代浏览器都已经支持。
vw
和 vh
响应式网页设计技术很大程度上依赖于比例规则。然而,CSS比例不总是每个问题的最佳解决方案。如果想使用显示窗口的宽度或高度而不是父元素的宽度将会怎么样?这正是vh
和vw
单位所提供的。
vh
等于视窗高度的 1/100
.例如,如果浏览器的高是 900px
, 1vh
求得的值为 9px
。同理,如果显示窗口宽度为750px
, 1vw
求得的值为 7.5px
。
IE10+ 和现代浏览器都支持这两个单位。
vmin
和 vmax
这两个单位是针对vw和vh
vmin
是vw
和vh
中比较 小 的值
vmax
是vw
和vh
中比较 大 的值
.box { height: 100vmin; width: 100vmin;}
.box { height: 100vmax; width: 100vmax;}
IE10+ 和现代浏览器都已经支持 vmin
webkit浏览器之前不支持vmax
,现在已经支持,所有现代浏览器已经支持,但是IE不支持 vmax
.
总结
尺寸单位虽然说不是很难的内容,但能够做到精准理解和熟练使用也是极其难得的,也许随着CSS的发展会有更多有用的单位引进。
对单位斤斤计较是一个优秀CSS使用者应该具备的品质,赶紧去挑选合适的单位去开发你的NB产品吧。
下面的代码用来检测您的浏览器是否支持常用单位:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <style type="text/css"> body { padding: 20px; } div { background: #99ff99; padding: 5px; margin-bottom: 10px; white-space: nowrap; width: 0; } div:after { content: " (supported)"; } div.fail { width: 100% !important; background: #ff6666 !important; } div.fail:after { content: " (NOT supported)"; } </style> </head> <body><div id="percentage">50% - percentage</div><div id="pixel">400px - pixels (device pixels)</div><div id="em">20em - relative unit</div><div id="rem">20rem - root em</div><div id="vw">15vw - viewport width</div><div id="vh">60vh - viewport height</div><div id="vmin">60vmin - smaller of vw or vh</div><div id="vmax">60vmax - larger of vw or vh</div><div id="inch">4in - inches</div><div id="cm">20cm - centimeters</div><div id="mm">200mm - millimeters</div><div id="pt">120pt - points</div><div id="pc">40pc - picas</div><div id="ex">60ex - x-height</div><div id="ch">60ch - based on width of zero (0) character</div><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script><script>// 给指定元素设置宽度var percentage = $("#percentage").css("width", "50%");// 如果宽度值为0,即不支持,为此元素添加fail类if (percentage.width() == 0) percentage.addClass("fail");var pixel = $("#pixel").css("width", "400px");if (pixel.width() == 0) pixel.addClass("fail");var em = $("#em").css("width", "20em");if (em.width() == 0) em.addClass("fail");var rem = $("#rem").css("width", "20rem");if (rem.width() == 0) rem.addClass("fail");var vw = $("#vw").css("width", "15vw");if (vw.width() == 0) vw.addClass("fail");var vh = $("#vh").css("width", "60vh");if (vh.width() == 0) vh.addClass("fail");var vmin = $("#vmin").css("width", "60vmin");if (vmin.width() == 0) vmin.addClass("fail");var vmax = $("#vmax").css("width", "60vmax");if (vmax.width() == 0) vmax.addClass("fail");var inch = $("#inch").css("width", "4in");if (inch.width() == 0) inch.addClass("fail");var cm = $("#cm").css("width", "20cm");if (cm.width() == 0) cm.addClass("fail");var mm = $("#mm").css("width", "200mm");if (mm.width() == 0) mm.addClass("fail");var pt = $("#pt").css("width", "120pt");if (pt.width() == 0) pt.addClass("fail");var pc = $("#pc").css("width", "40pc");if (pc.width() == 0) pc.addClass("fail");var ex = $("#ex").css("width", "60ex");if (ex.width() == 0) ex.addClass("fail");var ch = $("#ch").css("width", "60ch");if (ch.width() == 0) ch.addClass("fail");</script></body> </html>
- CSS中的长度单位,宽度自适
- CSS中的长度单位
- CSS中的单位一览 包括宽度尺寸单位 颜色单位 角度单位 频率单位
- CSS中的单位一览 包括宽度尺寸单位 颜色单位 角度单位 频率单位
- 彻底了解css中的长度单位
- 转载:<理解css中的长度单位>
- CSS 4.2 样式-文本补充,css中的长度单位
- CSS的长度单位适配方案
- 常用CSS长度单位
- 常用CSS长度单位
- CSS长度单位参考
- CSS的长度单位
- CSS 长度单位
- CSS长度单位
- 前端开发中的CSS的长度单位em、px、ex、%
- css 中的几种长度单位:px em rem
- 计算机中的长度单位
- Android中的长度单位
- 聚合数据网站
- “数据结构与算法”有点难
- 完美解决 input密码提示功能
- C语言实现的环形队列
- LeetCode 152 Maximum Product Subarray
- CSS中的长度单位,宽度自适
- android Media Route Provider
- ARM+linux系统移植3G拨号上网收发短信(三)
- Maven学习总结(五)——聚合与继承
- 火狐浏览器打不开的修复方法和原因
- C++类禁止copy构造函数和copy assign操作符
- vs2008静态编译Qt4.8.6
- win10+vs2013+cuda7.5环境搭建
- Maven学习总结(六)——Maven与Eclipse整合