在码农港湾
做一个实实在在的内行人

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,浏览器会找出元素的宽度和高度。

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

例子

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

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
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;
}
</style>
</head>
<body>
  <div>
    <img id="first" src="http://www.www.w3cschool.cn/style/download.png" alt="small  banana">
    <img id="second" src="http://www.www.w3cschool.cn/style/download.png" alt="small  banana">
  </div>
</body>
</html>

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

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

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

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

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

例2

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

<html>
<head>
<style type="text/css">
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;
}


</style>
</head>
<body>
  <p>This is a test. This is a test.</p>
  <img src="http://www.www.w3cschool.cn/style/download.png" id="x-aspect-1" />
</body>
</html>

box-sizing

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

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

其值可以是以下之一:

  • content-box
  • padding-box
  • border-box
  • margin-box

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

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
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;
}
</style>
</head>
<body>
  <div>
    <img id="first" src="http://www.www.w3cschool.cn/style/download.png" alt="small  banana">
    <img id="second" src="http://www.www.w3cschool.cn/style/download.png" alt="small  banana">
  </div>
</body>
</html>

最小和最大尺寸

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

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

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
img {
  background: lightgray;
  border: 4px solid black;
  margin: 2px;
  box-sizing: border-box;
  min-width: 100px;
  width: 50%;
  max-width: 200px;
}
</style>
</head>
<body>
  <img src="http://www.www.w3cschool.cn/style/download.png" alt="small  banana">

</body>
</html>

相关属性

属性 描述 CSS
height 设置元素的高度 1
max-height 设置最大高度 2
max-width 设置最大宽度 2
min-height 设置最小高度 2
min-width 设置最小宽度 2
width 设置元素的宽度 1

码农刷题必备工具 VS 码农进阶必读书籍

IT面试宝典宝典書城