CSS中“像素”和“%”有什么区别?

html-css010

CSS中“像素”和“%”有什么区别?,第1张

CSS中“像素”和“%”同为CSS相对长度单位,区别是

%

百分比Percentage;px

像素Pixels

个人比较偏向px,因为px能够精确地表示元素在屏幕中的位置和大小,网页主要是为了屏幕显示,而不是为了打印等其它需要的。

方法

CSS中“像素”和“%”同为CSS相对长度单位,区别是

%

百分比Percentage;px

像素Pixels

个人比较偏向px,因为px能够精确地表示元素在屏幕中的位置和大小,网页主要是为了屏幕显示,而不是为了打印等其它需要的。

1.CSS相对长度单位(relative

length

unit)

CSS相对长度单位中的相对二字,表明了其长度单位会随着它的参考值的变化而变化,不是固定的。

以下是CSS相对长度单位列表:

CSS相对长度单位

说明

%

百分比Percentage

em

元素的字体高度The

height

of

the

element's

font

ex

字母x的高度The

height

of

the

letter

"x"

px

像素Pixels

2.CSS绝对长度单位(absolute

length

unit)

绝对长度单位是一个固定的值。比如我们常用的有mm,就是毫米的意思。

以下是CSS绝对长度单位列表:

CSS绝对长度单位

说明

in

英寸Inches

(1

英寸

=

2.54

厘米)

cm

规范中注明

外边距margin

的百分比值参照其包含块的宽度进行计算。

举个栗子——父盒子width:1000px;height:800px;,,子元素margin:10%;

那么其margin换算成px就是

1000px

×

10%=100px。

css里面px和%的问题,即单位转换问题,前端页面排版,做自适应常常会遇到,这里以640px的手机端常用宽度为例,一般手机端建议宽度用百分比,高度用rem单位,web端建议用px和em:

1.如果一个导航有横向5个图标,那么640px的宽度,每个容器平均下来则为128px,转换成百分比则为25%(640px则为100%),百分比方便计算,自适应。

.nav{width:20%}或.nav{width:128px}

2.如果是320px的五个图标,则20%的宽度需要设置为64px。

.nav{width:20%}或.nav{width:64px}