web前端入門到實戰：CSS屬性width和height

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/722.54cm = 1/7296px = 1.33px；
   7. 派卡pc(picas)，1pc = 12pt = 1/6in = 1/6*96px = 16px；
   專門創建的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享學習方法和須要注意的小細節，互相交流學習，不停更新最新的教程和學習技巧（從零基礎開始到WEB前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）
   這些單位基本不怎麼用，你們知道一下就能夠了。

相對單位：% 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>
專門創建的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學習方法和須要注意的小細節，互相交流學習，不停更新最新的教程和學習技巧（從零基礎開始到WEB前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）

width和height對於有一些基礎的小夥伴來講，沒有什麼太多可講的，也就是在使用的過程當中根據不一樣的項目環境選擇不一樣的單位去使用，也不能說使用哪一種最好，只能說是相對比較好，也是在每一個人的使用習慣上，怎麼寫出最簡潔的樣式，仍是要靠大家本身去總結