下面我们给大家介绍一下html5尺寸吧!希望大家可以在这里学习!

HTML

设定尺寸

定位的祖父元素

没有定位的父元素

设定尺寸的浮动元素

设定尺寸的静态元素

.selectTdClass{background-color:#edf5fa !important}table.noBorderTable td,table.noBorderTable th,table.noBorderTable caption{border:1px dashed #ddd !important}table{margin-bottom:10px;border-collapse:collapse;display:table;}td,th{padding: 5px 10px;border: 1px solid #DDD;}caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}th{border-top:1px solid #BBB;background-color:#F7F7F7;}table tr.firstRow th{border-top-width:2px;}.ue-table-interlace-color-single{ background-color: #fcfcfc; } .ue-table-interlace-color-double{ background-color: #f7faff; }td p{margin:0;padding:0;}

设定尺寸的表格

CSS

*.z { padding:5px; border:5px solid black; }

#float { width:150px; height:50px; }

#static { width:150px; height:50px; }

#table { width:150px; height:50px; }

#abs { width:150px; height:50px; }

#star { width:26px; height:26px; }

/* 隐去了不必要的规则 */

问题

想为元素的高和/或宽设定一个尺寸或者比例(是相对于它容器的高与宽的比例)。

解决方案

为你选择的类和ID赋予以下样式。

n  使用height为元素的高设定一个值或者相对于容器高的百分比。

n  使用width为元素的宽设定一个值或者相对于容器宽的百分比。

n  width与height是独立设置的。换句话说，你可以单独设置高，单独设置宽，或者两者都设置。

n  如果你不想固定高或宽，可以把width或height设成auto.auto是宽和高的默认值。

模式

SELECTOR { width:+VALUE; height:+VALUE; }

适用范围

此模式可应用于静态内联元素之外的所有元素。

解释

带有尺寸的元素必须把width和height设成一个值或百分比。100%通常用于拉伸一个元素，但是其他的百分比通常令元素的尺寸小于或大于它的容器。

height和width用于定义元素的内盒。围绕着内盒的是内边距。内边距外是边框。边框外是外边距。外边距的外围才是外盒。内边距、边框和内边距都会影响外盒的大小，但是不能影响由height和width所确定的内盒大小。负的外边距会导致邻近元素的重叠，但是不能影响它的height和width.

表格是一个例外，因为它的height和width定义的是表格边框外的尺寸。这导致表格所定义的高和宽是包括了边框和内边距的。这就是为什么例子中的表格要小于其他元素。

如果浮动元素设定了尺寸，它会改变排列的顺序。width会改变浮动内容的左右边界，影响相邻内容和浮动元素的定位。height会把邻近浮动元素挤下去或拉上来。

当静态块状元素被设定尺寸后，它会改变排列的顺序。height会把下一个块状元素挤下去或拉上来。height会增加或减小父元素的高度(除非父元素已被设定了尺寸)。width会改变内容排列的左右边界。

当绝对定位元素被设定尺寸后，它不会改变原始排列的顺序，也不会改变其他元素的位置。宽度和高度中的百分比是相对于离它定位最近的祖先的宽度和高度。

当为一个可替代元素(例如图片)设定尺寸后，浏览器会把它调整到设定的值。如果想用其原来的尺寸，要把height和width设置为auto.

以上就是我们给大家介绍的html5尺寸的内容了。希望大家继续个在我们的网站!