如何設定html5寬度呢？

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

解決方案

CSS為此提供了width屬性。

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

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

width:auto

width:auto水平包裹著以下幾種盒模型：內聯、內聯塊狀、浮動、表格和絕對定位(當left和right都設置為auto的時候)。

width:auto水平拉伸塊狀和絕對定位盒模型(當left和right都設置了一個值，例如0)。

width:+VALVE

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

width:100%

width:100%會把元素的寬度設置為其父元素的寬度，但是不像auto,width:100%擁有一些限制。浏覽器不會自動調整寬度以保持元素被拉伸。元素的水平外邊距、邊框或者內邊距能夠擴展它的寬度，甚至可超越父元素的寬度。

模式

SELECTOR { width:+VALUE; }

適用范圍

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

提示

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

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

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