CSS size properties
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
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: YesPossible values
##Value ? ? ? ? ? ? ?
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.
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
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: NoPossible valuesDescription
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: NoPossible valuesValue ????????????????????????????????????????????????????????????????????????????????#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 ? ? ? ? ? ? Descriptionauto ?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>實(shí)例</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>實(shí)例</title>
<style type="text/css">
p
{
max-height:10px;
background-color:yellow;
}
</style>
</head>
<body>
<p>北京時間周四凌晨兩點(diǎn)公布的美聯(lián)儲9月紀(jì)要顯示，如美國經(jīng)濟(jì)持續(xù)走強(qiáng)，幾位有投票權(quán)的決策者認(rèn)為利率應(yīng)該“很快”會上升。
美聯(lián)儲在會議紀(jì)要中指出“幾位委員們認(rèn)為，如若經(jīng)濟(jì)進(jìn)展如預(yù)期般展開，那么較快提高聯(lián)邦基金利率將是合適的”。</p>
</body>
</html>
