html最小尺寸,CSS Size尺寸

您可以使用下面描述的与大小相关的属性来控制元素大小。width

height

设置元素的宽度和高度。

Value: auto or length or %

min-width

min-height

设置元素的最小可接受宽度或高度。

Value: auto or length or %

max-width

max-height

设置元素的最大可接受宽度或高度。

Value: auto length %

box-sizing

设置元素框的哪个部分用于大小调整。

Value: content-box or padding-box or border-box or margin-box

所有这些属性的默认值是auto，浏览器会找出元素的宽度和高度。

您可以使用长度或百分比显式指定大小。即使处理高度，百分比值也从包含块的宽度计算。

例子

以下代码显示如何设置元素的大小。

HTML>

div {

width: 75%;

height: 100px;

border: thin solid black;

}

img {

background: lightgray;

border: 4px solid black;

margin: 2px;

height: 50%;

}

#first {

box-sizing: border-box;

width: 50%;

}

#second {

box-sizing: content-box;

}

    

    

在body中有三个元素。div元素包含两个img元素。div元素的宽度设置为75％，是body元素的子元素。

div元素将具有包含块的宽度的75％，这是主体内容框。

如果调整浏览器窗口大小，则将调整body元素的大小，并调整div元素的大小以保留75％的关系。

div元素的高度为100像素。它是一个绝对值，并且不会随着包含块的大小调整而改变。

img元素的宽度是包含块的50％。

例2

以下代码显示如何将宽度和高度设置为自动。

p {

padding: 10px;

margin: 10px;

border: thin solid black;

width: auto;

min-width: 200px;

}

img#x-aspect-1 {

border: 1px solid black;

margin: 5px;

width: 200px;

height: auto;

}

This is a test. This is a test.

  

box-sizing

box-sizing属性更改大小属性适用的元素框。

默认情况下，计算并应用元素的内容框的高度和宽度。或者例如，如果元素的height属性设置为100px，则屏幕上的实际高度将为100像素，加上顶部和底部填充，边框和边距值。

其值可以是以下之一：content-box

padding-box

border-box

margin-box

以下代码显示如何设置元素的大小。

HTML>

div {

width: 75%;

height: 100px;

border: thin solid black;

}

img {

background: lightgray;

border: 4px solid black;

margin: 2px;

height: 50%;

}

#first {

box-sizing: border-box;

width: 50%;

}

#second {

box-sizing: content-box;

}

    

    

最小和最大尺寸

您可以使用min-和max-属性来设置元素大小的限制。

以下代码设置Size的最小和最大范围。

HTML>

img {

background: lightgray;

border: 4px solid black;

margin: 2px;

box-sizing: border-box;

min-width: 100px;

width: 50%;

max-width: 200px;

}

  

相关属性属性描述CSS

height设置元素的高度1

max-height设置最大高度2

max-width设置最大宽度2

min-height设置最小高度2

min-width设置最小宽度2

width设置元素的宽度1