核弹头小游戏
无需下载点击即玩

回到顶部

当前位置: 核弹头首页 > 游戏教程 > 正文

如何设定html5宽度呢

来源:www.h5uc.com    作者:集   时间:2016-07-11

width可应用于内联元素之外的所有元素。

下面我们给大家介绍一下设定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宽度的方法了。希望大家继续关注我们的网站!

核弹头小游戏网发布此文仅为传递信息,不代表认同其观点或者证实其描述!

游戏老司机 更多

小编推荐 更多

热门动态 更多

最新资讯 更多