в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:16:42Z

1 версия

Новая страница

==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>
<h1>Block-Level Elements</h1>
<p><strong>Block-level elements</strong> The
<code><h1></code> and <code><p></code>.</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>
<div>
<span id="floated">
This span is floated left.
</span>
<span id="normal">
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.
</span>
This is extra text.
</div>
</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>
<div>
<span id="floated">
This span is floated left.
</span>
<span id="normal">
The text of this span is beside the floated span.
</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.
</div>
</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>
<div>
<span id="floated">
This span is floated left.
</span>
<span id="normal">
The text of this span is beside the floated span.
</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.
</div>
</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>
<div class="container">
<span class="default">BEFORE</span>
<span class="box">this is a test. </span>
<span class="default">AFTER</span>
</div>
</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>
<p>
<span id="inline">
block-level element with shrink-to-fit sizing.
</span>
</p>
</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>
<h1>Inline Elements</h1>
<h2>Italicized</h2>
<code><em> </code> <em>emphasized</em> <br />
<code><cite> </code> <cite>citation</cite> <br />
<code><var> </code> <var>computer variable</var> <br />
<code><dfn> </code> <dfn>definition</dfn> <br />
<h2>Bold</h2>
<code><strong> </code> <strong>strongly emphasized</strong> <br />
<h2>Monospace</h2>
<code><code> </code> <code>computer code</code> <br />
<code><kbd> </code> <kbd>key press</kbd> <br />
<code><samp> </code> <samp>sample computer output</samp> <br />
<h2>Underlined</h2>
<code><a> </code> <a href="#">a</a> <br />
<code><acronym> </code> <acronym title="a" >acronym</acronym> <br />
<code><abbr> </code> <abbr title="a" >abbreviation</abbr> <br />
<h2>Vertical-aligned</h2>
<code><sup> </code> superscript<sup>1</sup> <br />
<code><sub> </code> subscript<sub>1</sub> <br />
</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>
<div class="grandContainer">
<div id="myStyle" class="extrastyle">INLINE</div>
</div>

</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>
<div class="grandContainer">
<div id="myStyle" class="ex1">INLINE</div>
</div>
</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>
<div class="container">
<img class="small" src="http://www.wbex.ru/style/logo.png" alt="star"/>
</div>
</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>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<span id="myStyle" class="example">Shrinkwrapped Absolute</span>
</div>
</div>
</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>
<span id="inline">Shrinkwrapped Static Inline</span><br />
</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>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<span id="myStyle" class="example">Stretched Absolute</span>
</div>
</div>
</body>
</html>
</source>

← Предыдущая	Версия 09:21, 26 мая 2010
(нет различий)

HTML/CSS/Box Model/Inline Elements - История изменений

в 09:21, 26 мая 2010

Admin: 1 версия