如何设定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宽度的方法了。希望大家继续关注我们的网站!