HTML/CSS/Box Model/height — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Версия 12:21, 26 мая 2010
Содержание
- 1 height:100% stretches an element to the height of its parent.
- 2 height: 150px
- 3 Height and overflow
- 4 height:auto is the default
- 5 height sets the height of an element"s inner box.
- 6 Box Model
- 6.1 height sets the height of the element.
- 6.2 height: size an element by assigning pixels, ems, a percentage
- 6.3 Percentages are more flexible because they can scale to the viewport.
- 6.4 width: 100% and height: 100%
- 6.5 width: 200px and height: auto
- 6.6 width: auto and height: 200px
- 6.7 width, height: percentage
height:100% stretches an element to the height of its parent.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .container{
width: 800px; height: 800px; background: pink;
}
- .box {
float: right; overflow: auto; visibility: visible; width: auto; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .small {
float: left; right: 200px; height: 100%; background: yellow;
} </style> </head> <body>
this is a test. this is a test. this is a test.
</body> </html>
</source>
height: 150px
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title></title> <style type="text/css"> p { border: thin solid black; text-align: justify; width: 150px; height: 150px; } </style> </head> <body>
This is a test. This is a test.
</body> </html> </source>
Height and overflow
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>height</title> <style rel="stylesheet" type="text/css">
div#wrapper {
border: 1px solid pink; background: gold; width: 130px;
} div#box {
margin: 5px; border: 5px solid red; background: yellow; padding: 5px; height: 100px;
} div#inner {
background: white; text-align: justify;
}
</style> </head> <body>
p
p
p
p
p
p
p
p
p
p
vp
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
p
</body>
</html>
</source>
height:auto is the default
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title></title> <style type="text/css"> p { border: thin solid black; width: auto; height: auto; } </style> </head> <body>
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
</body> </html> </source>
height sets the height of an element"s inner box.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">
- .box {
display: static; overflow: visible; visibility: visible; width: 160px; height: 150px; background-color: #ccc;
} </style> </head> <body>
Box Model
</body> </html>
</source>
height sets the height of the element.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">
- .container {
position: relative; background: black;
}
- .box {
position: absolute; width: 300px; left: auto; right: 10px; height: 100px; background: red;
}
- .before {
z-index: 2; width: 100px; height: 400px; left: 400px; background: yellow;
} </style> </head> <body>
</body> </html>
</source>
height: size an element by assigning pixels, ems, a percentage
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .container{
width: 800px; height: 800px; background: pink;
}
- .box {
float: right; overflow: auto; visibility: visible; width: auto; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .small {
float: left; right: 200px; height: 50%; background: yellow;
} </style> </head> <body>
this is a test. this is a test. this is a test.
</body> </html>
</source>
Percentages are more flexible because they can scale to the viewport.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .container{
width: 800px; height: 800px; background: pink;
}
- .box {
float: right; overflow: auto; visibility: visible; width: auto; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .small {
float: left; right: 200px; height: 50%; background: yellow;
} </style> </head> <body>
this is a test. this is a test. this is a test.
</body> </html>
</source>
width: 100% and height: 100%
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>percentage measurement</title> <style rel="stylesheet" type="text/css">
div {
font: 12px sans-serif; border: 1px solid lightblue; background: pink; width: 100%; height: 100%; padding: 5px;
}
</style> </head> <body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum tellus orci, dignissim ut, consequat in, consectetuer et, nibh. Donec luctus ante a neque convallis ultricies. Curabitur ac lorem. Etiam adipiscing, nisi id eleifend feugiat, dui lorem tempus lacus, at rutrum lectus ligula quis diam.
</body>
</html>
</source>
width: 200px and height: auto
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>auto width and height</title> <style rel="stylesheet" type="text/css">
img#x-aspect-1 {
border: 1px solid black; margin: 5px; width: 200px; height: auto;
}
</style> </head> <body>
<img src="http://www.wbex.ru/style/logo.png" id="x-aspect-1" />
</body>
</html>
</source>
width: auto and height: 200px
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>auto width and height</title> <style rel="stylesheet" type="text/css">
img#y-aspect-1 {
border: 1px solid black; margin: 5px; width: auto; height: 200px;
}
</style> </head> <body>
<img src="http://www.wbex.ru/style/logo.png" id="y-aspect-1" />
</body>
</html>
</source>
width, height: percentage
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title></title> <style type="text/css"> p { width: 100%; height: 100%; margin: 10px; padding: 10px; border: 1px solid black; background: lightgray; } </style> </head> <body>
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
</body> </html> </source>