> 웹 프론트엔드 > HTML 튜토리얼 > 4.css度量单位_html/css_WEB-ITnose

4.css度量单位_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:17:23
원래의
1417명이 탐색했습니다.

  在 CSS 长度设置中,我们经常需要使用到度量单位,即以什么样的单位设计我们的字 体或边框长度。而在 CSS 中长度单位又分为绝对长度和相对长度。

  绝对长度指的是现实世界的度量单位,CSS 支持五种绝对长度单位。

绝对长度单位

单位标识符 说明
in 英寸
cm 厘米
mm 毫米
pt
pc pica

 

 

  相对长度指的是依托其他类型的单位,也是五种。

相对长度单位

 

单位标识符 说明
em 与元素字号挂钩
ex 与元素字体的“x 高度”挂钩
rem 与根元素的字号挂钩
px 像素,与分辨率挂钩
% 相对另一值的百分比

 

 

  下面我们使用一些常用的单位作为演示,而不做演示的基本用不到了。

  1.em 相对单位

p {    margin: 0;     padding: 0;     background: silver;     font-size: 15px;     height: 2em;} 
로그인 후 복사

  解释:em 是相对单位,与字号大小挂钩,会根据字体大小改变自己的大小,灵活性很高。

  2.px 相对单位,绝对特性

p {    margin: 0;     padding: 0;    background: silver;    font-size: 15px;     height: 55px;} 
로그인 후 복사

  解释:虽然 px 也是相对单位,但由于和分辨率挂钩,导致他其实就变成一个绝对单位了,自然灵活性没有 em 高,但是使用难度较低,且大量的开发者习惯性使用它。

  3.%百分比

p {    margin: 0;    padding: 0;    background: silver;    font-size: 200%;     width: 50%;} 
로그인 후 복사

  解释:长度比较好理解,就是挂钩它所在区块的宽度。而 font-size 则是继承到的原始大小的百分比。

 

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿