您可以使用下面描述的与大小相关的属性来控制元素大小。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