像素（px）
说到修改网页时要用到的“像素”（px），大家千万别小瞧，这可是个大有用处的东西。其实，它就是我们在电脑屏幕上看到的那些点点，无论要精确微调还是把握元素大小，都离不开它。比如，下面这段代码，就能让div元素的宽度设置成200像素了：
css .div { width: 200px; }div { width: 200px; }说到网页设计，我们多数人习惯用像素定义大小，虽然看起来整齐利落，但是如果你的客户用了高清大屏幕设备，这些小像素就可能影响他们的视觉感受！
百分比（%）
其实百分比（%）就是看爸妈多高来预测咱们能长多高~超级实用！比如说，把每种元素的宽和高呀什么的设成相同的数值，然后等爸妈变大或变小时这些数值也会跟着变动。举个栗子假如给一个div设定成了50%，那么就是说:
width: 50%;
要用百分比调大小，就能让页面“随心所欲”！不过，别忘了给父元素多留点位子不然百分比就会乱码了~
div { width: 50%; }em单位
这个ema也就是用字号计算的，明白？就是说它和文本大小有关。比如说，你设置成16像素的字体，那ema不也就跟着是16像素。想把这段话说大到正文字体的1.2倍？简单得很，改下代码就解决！
p{
font-size:1.2em;
说到这个Em（字体）单位，挺神奇的地方就是它能自动调整字号大小。不过得提醒你别在太复杂的东西里再用了，免得出问题！
p { font-size: 1.2em; }rem单位
你知道REM单位是干嘛用的么？简单说，和EM单位有些不一样，REM不受级别的限制，比如咱们要把字体调成2rem，只要这样操作就行了：
h1 {
font-size: 2rem;
REM单位扫清了ReSPONSE布局障碍，调整字体大小都没问题。只是要注意，有些老电脑恐怕还不支持这个。
h1 { font-size: 2rem; }vw和vh
vw和vh就是表示屏幕大小的百分数。咱们搞响应式设计的话得会用！比如想让某个东西变得稍微大点儿，那就在它的属性格式里面加上“width:50vmin; height:50vmin”这样子的规则就可以。再跟你说一下，1vw大概占到整个屏幕宽度的1%，而1vh也正好是屏幕高度的1%~挺实用的？
width: 50vw;
height: 30vh;
vw和vh这两个小伙伴能帮助你根据不同屏幕去调整元素大小，无论什么屏幕都没啥问题。但是得注意，用多了可能会使页面看起来有些混乱，所以千万别乱用哈!
总结
div { width: 50vw; height: 50vh; }知道吗，网页设计中有各种奇怪的布局单元样式，每种都有各自的特点。所以开始搭建之前，一定要先明白自己到底需要什么，然后再找合适的工具！比如想让元素位置精确点的话，像素单位就挺好使的;但如果想弄个响应式布局，那百分比啦 em 啦 rem或vw/vh这类的也行。
学了这 CSS 布局的东西，加上实际动手操练一番，做个炫酷、反应快又个性十足的网页就不再那么难了！
掌握了这些小技巧，相信大家会更得心应手地使用CSS布局单位，网页设计也可以越来越完美！
评论0