所有这些属性的默认值是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..cn/style/download.png" alt="small banana">
<img id="second" src="http://www.www..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％。
以下代码显示如何将宽度和高度设置为自动。
<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..cn/style/download.png" id="x-aspect-1" />
</body>
</html>box-sizing属性更改大小属性适用的元素框。
默认情况下，计算并应用元素的内容框的高度和宽度。或者例如，如果元素的height属性设置为100px，则屏幕上的实际高度将为100像素，加上顶部和底部填充，边框和边距值。
其值可以是以下之一：
以下代码显示如何设置元素的大小。
<!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..cn/style/download.png" alt="small banana">
<img id="second" src="http://www.www..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..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 |
响应式 Web 设计 - Viewport什么是 Viewport? viewport 是用户网页的可视区域。viewport 翻译为中文可以叫做"视区"。手机浏览器...
图片的居中显示 css 有很多方法，但在很多情况下有的方法无效，这是件很头疼的事情，比如一般设置图片属性text-align:center...
CSS 字体 CSS字体属性定义字体，加粗，大小，文字样式。serif 和 sans-serif 字体之间的区别在计算机屏幕上，sans-serif 字体被...
有很多刚刚接触 CSS 的新手有时会遇到 CSS 加载失败这个问题，但测试时，网页上没有显示该样式的问题，这就说明 CSS 加载失败了...
