CSS中width和height屬性的應用

這篇文章給大家分享的是CSS中width和height屬性的應用。小編覺得挺實用的，因此分享給大家學習。如下資料是關于width和height屬性的內容。

width 是定義元素內容區的寬度；
height是定義元素在內容區的高度.

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

絕對單位

1. 像素px(pixels)，在web上，像素px是典型的度量單位，這也是我們最常用的單位。像其他一些單位最終，都會被按照像素處理
2. 英寸in(inches)              1in = 2.54cm = 96px；

1. 厘米cm(centimeters)      1cm = 10mm = 96px/2.54 = 37.8px
2. 毫米mm(millimeters)   1mm = 0.1cm = 3.78px
3. 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對于有一些基礎的小伙伴來說，沒有什么太多可講的，也就是在使用的過程中根據不同的項目環境選擇不同的單位去使用，也不能說使用哪種最好，只能說是相對比較好，也是在每個人的使用習慣上，怎么寫出最簡潔的樣式，還是要靠你們自己去總結。

關于width和height屬性就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。