這篇文章給大家分享的是CSS中width和height屬性的應(yīng)用。小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)。如下資料是關(guān)于width和height屬性的內(nèi)容。

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比蘇尼特左網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式蘇尼特左網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋蘇尼特左地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。

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

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

絕對單位

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. 點(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；
   專門建立的學(xué)習(xí)Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié)，互相交流學(xué)習(xí)，不停更新最新的教程和學(xué)習(xí)技巧（從零基礎(chǔ)開始到WEB前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）
   這些單位基本不怎么用，大家知道一下就可以了。

相對單位：%  vw、vh、vmin和vmax  ，除了百分比，后面的幾個都是css3的單位，但是出來時間也挺久了。

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

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

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

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

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

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

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

下來我們在來了解一下：

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

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

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

響應(yīng)式的網(wǎng)站則會需要用到css的媒體media來寫不同屏幕的樣式，一般會根據(jù)市場的主流產(chǎn)品來確定幾個臨界值：下面是常用的一些臨界點(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>
專門建立的學(xué)習(xí)Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié)，互相交流學(xué)習(xí)，不停更新最新的教程和學(xué)習(xí)技巧（從零基礎(chǔ)開始到WEB前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）

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

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

分享標(biāo)題：CSS中width和height屬性的應(yīng)用
鏈接URL：http://chinadenli.net/article24/ipcpje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站制作、外貿(mào)建站、靜態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)