web前端入門(mén)到實(shí)戰(zhàn)：CSS屬性width和height

width 是定義元素內(nèi)容區(qū)的寬度；
height是定義元素在內(nèi)容區(qū)的高度.

在內(nèi)容區(qū)外面可以增加內(nèi)邊距（padding）、邊框（border）和外邊距（margin），這樣的話(huà)就成了我們常說(shuō)的盒子模型，后期內(nèi)容中會(huì)給大家講到這些， 在行內(nèi)非替換元素會(huì)忽略width這個(gè)屬性，也就是我們不定義這個(gè)元素的時(shí)候，默認(rèn)值為auto，由內(nèi)容將其撐開(kāi)。

絕對(duì)單位

1. 像素px(pixels)，在web上，像素px是典型的度量單位，這也是我們最常用的單位。像其他一些單位最終，都會(huì)被按照像素處理
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. 點(diǎn)pt(points)，1pt = 1/72in = =0.0139in = 1/722.54cm = 1/7296px = 1.33px；
   7. 派卡pc(picas)，1pc = 12pt = 1/6in = 1/6*96px = 16px；
   專(zhuān)門(mén)建立的學(xué)習(xí)Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié)，互相交流學(xué)習(xí)，不停更新最新的教程和學(xué)習(xí)技巧（從零基礎(chǔ)開(kāi)始到WEB前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開(kāi)發(fā)學(xué)習(xí)路線(xiàn)以及規(guī)劃）
   這些單位基本不怎么用，大家知道一下就可以了。

相對(duì)單位：% vw、vh、vmin和vmax ，除了百分比，后面的幾個(gè)都是css3的單位，但是出來(lái)時(shí)間也挺久了。

百分比的話(huà)在這里就不多說(shuō)了，就是平均把屏幕分成一百份， 一份就是百分之一，你自己可以寫(xiě)一個(gè)50%寬的div，拖拉窗口試試看變化。

vw：視窗寬度的百分比 視窗呢指的是瀏覽器可視區(qū)域的寬高
vh：視窗高度的百分比
vmin：當(dāng)前較小的vw和vh
vmax：當(dāng)前較大的vw和vh

比如往往vh大于vw，當(dāng)vh大于vw的時(shí)候那么vmin就是隨他倆中比較小的也就是等于vw，vmax則等于比較大的那個(gè)vh。

與百分比相比， % 是相對(duì)于父元素的大小設(shè)定的比率，vw 是視窗大小決定的。 其實(shí)這些視窗單位與%使用基本類(lèi)似，優(yōu)勢(shì)在于能夠直接獲取高度，而用%在沒(méi)有設(shè)置body高度的情況下，是無(wú)法正確獲得可視區(qū)域的高度的，所以這是挺不錯(cuò)的優(yōu)勢(shì)。

不僅僅width和height可以使用這vw，vh，font也可以使用，這兩個(gè)屬性是什么呢，先說(shuō)VW，我們把視窗寬度平均分成100份，也就是width= 100vw 就是當(dāng)前屏幕寬度，是跟著屏幕寬度變化而變化的，10vw 就是十分之一的視窗寬度，這個(gè)單位呢不同于百分比，百分比是相對(duì)于父元素的；VH則是根據(jù)高度，在這里就不再贅述了，其實(shí)呢width使用百分比完全可以設(shè)置了，但是往往網(wǎng)站中會(huì)遇到圖片高度需要統(tǒng)一固定，如果寬度使用的百分比的話(huà)高度使用百分比是不生效的，而px這類(lèi)的絕對(duì)單位常常會(huì)出現(xiàn)圖片變形的問(wèn)題，所以這時(shí)候,可以使用這兩個(gè)單位，，比如需要一個(gè)正方形的圖片，那么可以設(shè)置成 img 的 width = 10 vw ；height 10vw；或者換成vh也是可以的。但是實(shí)際開(kāi)發(fā)中pc端常常會(huì)考慮兼容性問(wèn)題，Pc端和移動(dòng)端還是有一定區(qū)別的，vw，vh這兩個(gè)單位不是所有瀏覽器都支持的，但是移動(dòng)端兼容基本是沒(méi)有任何問(wèn)題的，出去非常老android4.4一下的系統(tǒng)，如圖兼容性紅色為不兼容，綠色為兼容：2013-2-19 Firefox 19發(fā)布，支持vw

上圖來(lái)看兼容性沒(méi)有問(wèn)題的，因?yàn)?IE6 8 已經(jīng)被拋棄了，至于安卓的4.1和4.3也是比較老的系統(tǒng)了

Css3單位中還有 em，rem，可是基于vw開(kāi)發(fā)布局比基于rem不知道要高明到哪里去了。Rem用它來(lái)布局，就相當(dāng)于用font size 來(lái)設(shè)置 width size，中間你要轉(zhuǎn)一道，所以在后期節(jié)目中降到font屬性的時(shí)候會(huì)具體來(lái)說(shuō)rem。

下來(lái)我們?cè)趤?lái)了解一下：

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

最大寬度屬性(max-width)用來(lái)定義寬度顯示的最大值，即寬度在0~max-width之間，如果單獨(dú)定義了min-width，那么寬度在min-width ~ auto之間，

當(dāng)拖動(dòng)瀏覽器邊框使其顯示范圍大于最大寬度的時(shí)候，元素顯示最大寬度值定義的寬度。最小寬度屬性(min-width)用來(lái)定義寬度顯示的最小值，當(dāng)拖動(dòng)瀏覽器邊框使其顯示范圍小于最小寬度的時(shí)候，元素顯示最小寬度值定義的寬度，在最小寬度屬性中，可以使用三種屬性值，分別為auto值、長(zhǎng)度值和百分比值。 使用場(chǎng)景有很多，還需要大家在實(shí)際的項(xiàng)目中體會(huì)。有問(wèn)題可以留言。

響應(yīng)式的網(wǎng)站則會(huì)需要用到css的媒體media來(lái)寫(xiě)不同屏幕的樣式，一般會(huì)根據(jù)市場(chǎng)的主流產(chǎn)品來(lái)確定幾個(gè)臨界值：下面是常用的一些臨界點(diǎn)

@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>
專(zhuān)門(mén)建立的學(xué)習(xí)Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié)，互相交流學(xué)習(xí)，不停更新最新的教程和學(xué)習(xí)技巧（從零基礎(chǔ)開(kāi)始到WEB前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開(kāi)發(fā)學(xué)習(xí)路線(xiàn)以及規(guī)劃）

width和height對(duì)于有一些基礎(chǔ)的小伙伴來(lái)說(shuō)，沒(méi)有什么太多可講的，也就是在使用的過(guò)程中根據(jù)不同的項(xiàng)目環(huán)境選擇不同的單位去使用，也不能說(shuō)使用哪種最好，只能說(shuō)是相對(duì)比較好，也是在每個(gè)人的使用習(xí)慣上，怎么寫(xiě)出最簡(jiǎn)潔的樣式，還是要靠你們自己去總結(jié)