width 是界说米素内容区的宽度；
height是界说米素在内容区的高度.

在内容区外面可以增添内边距（padding）、边框（border）和外边距（margin），这样的话就成了我们常说的盒子模子，后期内容中会给人人讲到这些， 在行内非替换米素会忽略width这个属性，也就是我们不界说这个米素的时刻，默认值为auto，由内容将其撑开。

绝对单米

1. 像素px(pixels)，在web上，像素px是典型的器量单米，这也是我们最常用的单米。像其他一些单米最终，都会被凭据像素处置
2. 英寸in(inches)              1in = 2.54cm = 96px；
3. 厘米cm(centimeters)      1cm = 10mm = 96px/2.54 = 37.8px
4. 毫米mm(millimeters)   1mm = 0.1cm = 3.78px
5. 1/4毫米q(quarter-millimeters)     1q = 1/4mm = 0.945px
6. 点pt(points)，1pt = 1/72in = =0.0139in = 1/72*2.54cm = 1/72*96px = 1.33px；
7. 派卡pc(picas)，1pc = 12pt = 1/6in = 1/6*96px = 16px；

这些单米基本不怎么用，人人知道一下就可以了。

相对单米：%  vw、vh、vmin和vmax  ，除了百分比，后面的几个都是css3的单米，然则出来时间也挺久了。

百分比的话在这里就不多说了，就是平均把屏幕分成一百份， 一份就是百分之一，你自己可以写一个50%宽的div，拖沓窗口试试看转变。

vw：视窗宽度的百分比   视窗呢指的是浏览器可视区域的宽高
vh：视窗高度的百分比 
vmin：当前较小的vw和vh
vmax：当前较大的vw和vh

好比往往vh大于vw，当vh大于vw的时刻那么vmin就是随他俩中对照小的也就是即是vw，vmax则即是对照大的谁人vh。

与百分比相比， % 是相对于父米素的巨细设定的比率，vw 是视窗巨细决议的。 实在这些视窗单米与%使用基本类似，优势在于能够直接获取高度，而用%在没有设置body高度的情况下，是无法准确获得可视区域的高度的，以是这是挺不错的优势。

不仅仅width和height可以使用这vw，vh，font也可以使用，这两个属性是什么呢，先说VW，我们把视窗宽度平均分成100份，也就是width= 100vw 就是当前屏幕宽度，是随着屏幕宽度转变而转变的，10vw 就是十分之一的视窗宽度，这个单米呢差别于百分比，百分比是相对于父米素的；VH则是凭据高度，在这里就不再赘述了，实在呢width使用百分比完全可以设置了，然则往往网站中会遇到图片高度需要统一牢固，若是宽度使用的百分比的话高度使用百分比是不生效的，而px这类的绝对单米经常会泛起图片变形的问题，以是这时刻,可以使用这两个单米，，好比需要一个正方形的图片，那么可以设置成 img 的 width = 10 vw ；height 10vw；或者换成vh也是可以的。然则现实开发中pc端经常会思量兼容性问题，Pc端和移动端照样有一定区别的，vw，vh这两个单米不是所有浏览器都支持的，然则移动端兼容基本是没有任何问题的，出去异常老android4.4一下的系统，如图兼容性红色为不兼容，绿色为兼容：2013-2-19 Firefox 19公布，支持vw

上图来看兼容性没有问题的，由于 IE6 8 已经被抛弃了，至于安卓的4.1和4.3也是对照老的系统了

Css3单米中另有 em，rem，可是基于vw开公结构比基于rem不知道要高明到哪里去了。Rem用它来结构，就相当于用font size 来设置 width size，中心你要转一道，以是在后期节目中降到font属性的时刻会具体来说rem。

下来我们在来领会一下：

min-width
max-width
min-height
max-height

更大宽度属性(max-width)用来界说宽度显示的更大值，即宽度在0~max-width之间，若是单独界说了min-width，那么宽度在min-width ~ auto之间，

当拖动浏览器边框使其显示局限大于更大宽度的时刻，米素显示更大宽度值界说的宽度。最小宽度属性(min-width)用来界说宽度显示的最小值，当拖动浏览器边框使其显示局限小于最小宽度的时刻，米素显示最小宽度值界说的宽度，在最小宽度属性中，可以使用三种属性值，分别为auto值、长度值和百分比值。    使用场景有许多，还需要人人在现实的项目中体会。有问题可以留言。

响应式的网站则会需要用到css的媒体media来写差别屏幕的样式，一样平常会凭据市场的主流产物来确定几个临界值：下面是常用的一些临界点

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */} 

@media>@media> /*6*/ 

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ } 

 /*6+*/ 

@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ } 

 /*魅族*/ 

@media> /*mate7*/ 

@media> /*4 4s*/ 

@media>

width和height对于有一些基础的小伙伴来说，没有什么太多可讲的，也就是在使用的过程中凭据差别的项目环境选择差别的单米去使用，也不能说使用哪种更好，只能说是相对对照好，也是在每个人的使用习惯上，怎么写出最简练的样式，照样要靠你们自己去总结