這篇文章主要介紹了CSS寬度、高度屬性怎么設(shè)置的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇CSS寬度、高度屬性怎么設(shè)置文章都會有所收獲,下面我們一起來看看吧。
成都創(chuàng)新互聯(lián)公司長期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù),團隊從業(yè)經(jīng)驗10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為寧都企業(yè)提供專業(yè)的網(wǎng)站設(shè)計、成都網(wǎng)站制作,寧都網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
height和width屬性用于設(shè)置元素的高度和寬度。
height和width屬性不包括內(nèi)邊距、邊框或外邊距。它設(shè)置的是元素內(nèi)邊距、邊框以及外邊距內(nèi)的區(qū)域的高度或?qū)挾取?/p>
CSS 高度和寬度值
height
和 width
屬性可設(shè)置如下值:
auto
- 默認(rèn)。瀏覽器計算高度和寬度。
length
- 以 px、cm 等定義高度/寬度。
%
- 以包含塊的百分比定義高度/寬度。
initial
- 將高度/寬度設(shè)置為默認(rèn)值。
inherit
- 從其父值繼承高度/寬度。
實例如下:
設(shè)置
設(shè)置元素的高度和寬度
這個 div 元素的高度為 200 像素,寬度為 50%:
輸出結(jié)果:
記住,height 和 width 屬性不包括內(nèi)邊距、邊框或外邊距!它們設(shè)置的是元素的內(nèi)邊距、邊框和外邊距內(nèi)的區(qū)域的高度/寬度!
max-width 屬性用于設(shè)置元素的最大寬度。
可以用長度值(例如 px、cm 等)或包含塊的百分比(%)來指定 max-width(最大寬度),也可以將其設(shè)置為 none(默認(rèn)值。意味著沒有最大寬度)。
當(dāng)瀏覽器窗口小于元素的寬度(500px)時,會發(fā)生之前那個
在這種情況下,使用 max-width 能夠改善瀏覽器對小窗口的處理。
提示:將瀏覽器窗口拖動到小于500px的寬度,以查看兩個 div 之間的區(qū)別!
注釋:max-width 屬性的值將覆蓋 width(寬度)。
示例如下:
設(shè)置元素的最大寬度
這個 div 元素的高度為 100 像素,最大寬度為 500 像素:
請調(diào)整瀏覽器窗口來查看效果。
輸出結(jié)果:
關(guān)于“CSS寬度、高度屬性怎么設(shè)置”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“CSS寬度、高度屬性怎么設(shè)置”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。