HTML/CSS/Box Model/Inline Elements — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Версия 12:21, 26 мая 2010
Содержание
- 1 Block-level elements
- 2 Block-Level Elements
- 3 Inline Elements
- 3.1 Italicized
- 3.2 Bold
- 3.3 Monospace
- 3.4 Underlined
- 3.5 Vertical-aligned
- 3.6 Middle Aligned INLINE
- 3.7 Middle Offset INLINE
- 3.8 On an inline-block element, a positive value in margin-top expands the height of the line and a negative value shrinks it.
- 3.9 Shrinkwrapped Absolute right aligned
- 3.10 Shrinkwrapped inline block by setting both width and height to auto
- 3.11 Stretched Absolute in relative positioned parent
Block-level elements
<source lang="html4strict">
<?xml version="1.0" ?> <!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>Block and Inline Elements</title> </head> <body>
Block-Level Elements
Block-level elements The
<h1>
and <p>
.
</body>
</html>
</source>
CSS provides the following properties for styling inline boxes:
<source lang="html4strict">
display:inline; visibility, line-height, margin, padding, border, background,
</source>
float inline block becomes block of multiline inline 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> <head> <title></title> <style type="text/css"> div { margin: 10px; background: gold; height: 100px; } span#floated { background: pink; margin: 10px; padding: 10px; border: 1px solid black; float: left; width: 100px; } span#normal { background: red; border: 1px solid black; padding: 20px; margin: 20px; } </style> </head> <body>
This span is floated left. The text of this span is beside the floated span. The text of this span is beside the floated span. The text of this span is beside the floated span. The text of this span is beside the floated span. The text of this span is beside the floated span. The text of this span is beside the floated span. The text of this span is beside the floated span. This is extra text.
</body> </html> </source>
float inline elements becomes block
<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"> div { margin: 10px; background: red; height: 100px; } span#floated { background: pink; margin: 10px; padding: 10px; border: 1px solid black; float: left; width: 100px; } span#normal { background: gold; border: 1px solid black; margin: 100px; width: 1000px; } </style> </head> <body>
This span is floated left. The text of this span is beside the floated span. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text.
</body> </html> </source>
float inline with block inline padding
<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"> div { margin: 10px; background:red; height: 100px; } span#floated { background: pink; margin: 10px; padding: 10px; border: 1px solid black; float: left; width: 100px; } span#normal { background: gold; border: 1px solid black; margin: 100px; width: 1000px; padding: 50px; } </style> </head> <body>
This span is floated left. The text of this span is beside the floated span. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text. This is extra text.
</body> </html> </source>
Inline 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: inline; visibility: visible; line-height: 100px; margin: 0 100px; padding: 20px 120px; border-top: 5px solid gray; border-bottom: 5px solid black; border-left: 5px solid gray; border-right: 5px solid black;
} </style> </head> <body>
BEFORE this is a test. AFTER
</body> </html>
</source>
inline element is floated
<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>float</title> <style rel="stylesheet" type="text/css">
span#inline {
float: left; background: khaki; border: 1px solid gold; padding: 5px; margin: 5px;
}
</style> </head> <body>
block-level element with shrink-to-fit sizing.
</body>
</html>
</source>
Inline Elements list
<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> </head> <body>
Inline Elements
Italicized
<em>
emphasized
<cite>
citation
<var>
computer variable
<dfn>
definition
Bold
<strong>
strongly emphasized
Monospace
<code>
computer code
<kbd>
key press
<samp>
sample computer output
Underlined
<a>
<a href="#">a</a>
<acronym>
<acronym title="a" >acronym</acronym>
<abbr>
abbreviation
Vertical-aligned
<sup>
superscript1
<sub>
subscript1
</body>
</html>
</source>
Middle Aligned INLINE
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" media="Screen">
- .grandContainer {
position: relative; height: 300px; width: 700px; border: 2px solid black; background: yellow;
}
- .extrastyle {
width: 120px; padding: 5px; text-align: center; border: 1px dotted black; background: red; position: relative; border: 5px solid black; background-color: gold; left: 0;
}
- myStyle {
height: 100px; top: 0; margin-top: auto; bottom: 0; margin-bottom: auto; position: absolute; line-height: 100px; margin-left: 40px; background: pink;
} </style> </head> <body>
</body> </html>
</source>
Middle Offset INLINE
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" media="Screen">
- .grandContainer {
position: relative; height: 300px; width: 700px; border: 2px solid black; background: red;
}
- .ex1 {
width: 120px; padding: 5px; text-align: center; border: 1px dotted black; background: yellow; position: relative; border: 5px solid black; background-color: gold; left: 0; background: gold;
}
- myStyle {
height: 100px; top: 60px; margin-top: auto; bottom: -60px; margin-bottom: auto; position: absolute; line-height: 100px; margin-left: 40px; background: pink;
} </style> </head> <body>
</body> </html>
</source>
On an inline-block element, a positive value in margin-top expands the height of the line and a negative value shrinks it.
<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 {
position: absolute; margin-top: 10%; background: yellow;
} </style> </head> <body>
<img class="small" src="http://www.wbex.ru/style/logo.png" alt="star"/>
</body> </html>
</source>
Shrinkwrapped Absolute right aligned
<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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" title="text/css">
- .grandContainer {
position: relative; height: 295px; width: 600px; border: 2px solid black; background: red;
}
- .parent {
margin: 10px; padding: 10px; padding-top: 0; border: 1px solid black; background: purple;
}
- .example {
padding: 5px; border: 5px solid black;
}
- myStyle {
position: absolute; text-align: right; top: 0; margin-top: 200px; width: auto; left: auto; margin-left: auto; right: 0; margin-right: 0; background-color: gold;
} </style> </head> <body>
Shrinkwrapped Absolute
</body> </html>
</source>
Shrinkwrapped inline block by setting both width and height to 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"> <head> <title></title> <style type="text/css">
- inline {
width: auto; height: auto; background: yellow;
}
</style> </head> <body>
Shrinkwrapped Static Inline
</body> </html>
</source>
Stretched Absolute in relative positioned 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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" title="text/css">
- .grandContainer {
position: relative; height: 295px; width: 600px; border: 2px solid black; background: red;
}
- .parent {
margin: 10px; padding: 10px; padding-top: 0; border: 1px solid black; background: purple;
}
- .example {
padding: 5px; border: 5px solid black;
}
- myStyle {
position: absolute; text-align: right; top: 0; margin-top: 245px; width: auto; left: 0; margin-left: 0; right: 0; margin-right: 0; background-color: gold;
} </style> </head> <body>
Stretched Absolute
</body> </html>
</source>