In the process of web page creation, we may need to set the height, width, spacing, etc. of elements, which requires us to use some Dimension attributes.
1. height attribute
The height attribute can set the height of an element high.
Inheritance: No
Possible values
##Value
Description
auto Default. The browser will calculate the actual height.
length Use px, cm and other units to define the height.
% Based on the percentage height of the block-level object that contains it.
2. line-height attribute
line-height attribute can Set the distance between lines.
Note: Negative values are not allowed.
Inheritance: Yes
Possible values
##Value
Description
normal Default. Set reasonable line spacing.
number Set a number that will be multiplied by the current font size to set the line spacing.
length Set a fixed line spacing.
% Percent line spacing based on the current font size.
3. max-height attribute
The max-height attribute can set the maximum height of an element.
Inheritance: No
Possible values
##Value
Description
none Default. The definition places no limit on the maximum height allowed for an element.
length defines the maximum height of the element.
% Defines the maximum height as a percentage of the block-level object that contains it.
4. The max-width attribute
max-width can define the maximum width of an element.
Inheritance: No
Possible values
##Value
Description
none Default. The definition places no limit on the maximum width of the element.
length defines the maximum width of the element.
% Defines the maximum width based on the percentage of the block-level object that contains it.
5. min-height attribute
The min-height attribute can set the minimum height of the element.
Inheritance: No
Possible values
Value
Description
length defines the minimum height of the element. The default value is 0.
% Defines the minimum height based on the percentage of the block-level object that contains it.
6. min-width attribute
The min-width attribute can set the minimum width of an element.
Inheritance: No
Possible values
Value #length defines the minimum width value of the element. Default: Depends on browser. % Defines the minimum width based on the percentage of the block-level object that contains it.
7. width attribute
The width attribute can set the width of an element.
Inheritance: No
Possible values
Value
Description
auto Default . The browser can calculate the actual width.
% Defines the width as a percentage based on the width of the parent element. length Use px, cm and other units to define the width.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
</style>
</head>
<body>
<img class="normal" src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" width="95" height="84" /><br>
<img class="big" src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" width="120" height="90" />
<p class="ex">这是一段句子的高和宽是 100px.</p>
</body>
</html>##Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
p
{
max-height:10px;
background-color:yellow;
}
</style>
</head>
<body>
<p>北京时间周四凌晨两点公布的美联储9月纪要显示，如美国经济持续走强，几位有投票权的决策者认为利率应该“很快”会上升。
美联储在会议纪要中指出“几位委员们认为，如若经济进展如预期般展开，那么较快提高联邦基金利率将是合适的”。</p>
</body>
</html>
Next Section