CSS屬性width和height有什么作用

本篇內容介紹了“CSS屬性width和height有什么作用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

　　cssheight單位

　　絕對單位

　　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。

　　cssheight屬性

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

　　不僅僅width和height可以使用這vw，vh，font也可以使用，這兩個屬性是什么呢，先說VW，我們把視窗寬度平均分成100份，也就是width=100vw就是當前屏幕寬度，是跟著屏幕寬度變化而變化的，10vw就是十分之一的視窗寬度，這個單位呢不同于百分比，百分比是相對于父元素的；VH則是根據高度，在這里就不再贅述了，其實呢width使用百分比完全可以設置了。

“CSS屬性width和height有什么作用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！