如何設定html5高度？

想通過設置元素的高度來為其設定尺寸，或者包裹它、拉伸它。下面我們給大家介紹一下設定html5高度吧!

CSS為此提供了height屬性。本節屬於對尺寸、包裹和拉伸設計模式的入門。此設計模式是為了對比6種不同盒類型(內聯、內聯塊狀、塊狀、表格、絕對定位和浮動)應用height的不同方式。這種對比會使我們更方便的選擇出最佳的高度、元素、顯示組合，從而創建出你想要的布局。

height對所有元素類型都起作用，除了內聯元素。height在不同類型、定位、浮動方式的元素上表現各不相同。height與width是完全獨立的。height:auto是默認設置。

height:auto

height:auto豎直包裹著以下幾種盒模型：內聯、內聯塊狀、塊狀、浮動、表格和絕對定位(當top和bottom都設置為auto的時候)。

height:auto豎直拉伸絕對定位盒模型，僅當top和bottom都設置了一個值(例如0)的時候。這是豎直拉伸盒模型的最好方法，因為height:100%會有一些局限性，但是這僅僅對絕對定位盒模型有效。

height:+VALVE

可為元素的height賦予px、em、百分比或其他單位的尺寸。當可視畫面比預想的大或小的時候，固定高度的元素可能對用戶就不那麼友好了。百分比的靈活度會更大一些，因為它們能隨可視畫面的大小而調整。

height:100%

height:100%會把元素的高度設置成與父元素一樣，但是不像auto,height:100%擁有一些局限。浏覽器不會自動調整高度以保持元素的拉伸狀態。元素的垂直外邊距、邊框或者內邊距能夠擴展它的高度，甚至可超越父元素的高度。

模式

SELECTOR { height:+VALUE; }

適用范圍

height可應用於內聯元素之外的所有元素。

提示

浏覽器會忽視靜態內聯元素的height,因為font和font-size決定了它的文本寬度，從而決定了元素的高度。

用height:100%可拉伸表格，它的運行方式與垂直拉伸絕對定位元素大同小異。當你為表格設置了邊框或者內邊距後，表格的外盒便不會增大了，而且它也不會溢出它的父元素。這是因為邊框和內邊距都位於表格的內部，並且不能溢出它的外盒。另一方面，表格的外邊距會對表格重新定位，這可能會導致溢出父元素。

以上就是我們給大家介紹的設定html5高度的方法了。希望大家繼續關注我們的網站!