%
百分比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
厘
有两种类型的长度单位：相对和绝对
px就是pixel（像素）的缩写，绝对单位，相对长度单位，相对于屏幕分辨率。
em是相对单位 ，参考物是 父元素 的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。
rem是CSS3新增的一个相对单位 ，但相对的只是HTML根元素 font-size。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
rem在移动端应用可参考淘宝的页面 http://m.taobao.com 或者苏宁的页面 https://m.suning.com/
不是每个地方都要用rem，rem只适用于固定尺寸
页面基准750pxhtml font-size值的计算：
前端行业做移动端会普遍默认用rem或em,是因为可以通过js控制根元素(或者用@media)来达到适配各种分辨率的字体大小的效果
% 百分比，相对长度单位，相对于父元素的百分比值
相对单位参考如下
使用相对尺寸单位计量，则在调整页面的布局的时候，不需要遍历所有的内部DOM结构，重新设置内部子元素的尺寸大小。如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置。
vm、vh、vmin、vmax是一种视窗单位，也是相对单位 。主要用于页面视口大小布局，相对于rem在页面布局上更加方便简单。它相对的不是父节点或者页面的根节点。而是由视窗（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， 很容易实现与同屏幕等高的框。
书写手机网页时，必须约束视口宽度（320-420左右）： <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" /> width=device-width 约束视口 initial-scale=1.0 初始视口倍数是1倍 minimum-scale=1.0 最小允许视口宽度是1倍 maximum-scale=1.0 最大允许视口宽度是1倍 user-scalable=no不允许用户缩放视口 书写移动端网页，没有版心，必须用百分比布局。百分比布局也叫流式布局。 一、百分比布局 width:宽度的百分比是相对于父盒子width内容宽的比。没有父盒子就是相对于浏览器的宽。 height:高度的百分比是相对于父盒子height内容高的比。 padding,margin.:padding和margin不管任何方向百分比都是相对于父盒子width内容宽的比。 border：不能书写百分数 子盒子如果绝对定位，width百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）； height百分比参考的是距离最近，且有定位的父盒子的height（算上padding.）； padding,margin百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）； 例：div{ width: 50%overflow: hidden} p{ width: 50%height: 100pxfloat: leftbackground-color: pink} p:last-child{ background-color: green}二、box-sizing:border-box css2中的盒模型是外扩的。 css3的box-sizing：盒模型内减。（在width、height基础上再书写padding或者border，是在原有宽高上进行内减。） 例： 内减盒模型：书写的width、height就是盒子真正占有的宽和高。 讲真，内减盒模型简直不能再更好用了！！尤其是要自己各种测算的时候！ 三、弹性盒 display的属性值：block ,inline,inline-block,none -webkit-box:弹性盒容器。 例： 书写：3个P，宽度比是1:2:3。（X+2X+3X=100%） 抽象公式： 四、固比固模型 固比固模型：第一部分和第三部分宽度是固定值，第二部分宽度是剩余部分的宽度。 例：1和3部分宽度是120px，2自动撑开。 1、利用浮动 2、绝对定位（推荐） 3、弹性盒 五、max-width 和 min-width 移动端网页宽度必须使用百分比，但是网页的最小宽度或者是最大宽度只能书写像素px。不能用百分数。 例：
