淘先锋技术网

首页 1 2 3 4 5 6 7

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