HTML/CSS/Box Model/Inline Elements — различия между версиями

Текущая версия на 08:16, 26 мая 2010

Содержание

1 Block-level elements
2 CSS provides the following properties for styling inline boxes:
3 float inline block becomes block of multiline inline box
4 float inline elements becomes block
5 float inline with block inline padding
6 Inline Box
7 inline element is floated
8 Inline Elements list
9 Middle Aligned INLINE
10 Middle Offset INLINE
11 On an inline-block element, a positive value in margin-top expands the height of the line and a negative value shrinks it.
12 Shrinkwrapped Absolute right aligned
13 Shrinkwrapped inline block by setting both width and height to auto
14 Stretched Absolute in relative positioned parent

Block-level elements

 
<?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>&lt;h1&gt;</code> and <code>&lt;p&gt;</code>.</p>
  </body>
</html>

CSS provides the following properties for styling inline boxes:

 
display:inline; 
visibility, 
line-height, 
margin, 
padding, 
border, 
background,

float inline block becomes block of multiline inline box

 
<!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>

float inline elements becomes block

 
<!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>

float inline with block inline padding

 
<!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>

Inline Box

 

<!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>

inline element is floated

 
<!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>

Inline Elements list

 

<!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>&lt;em&gt; </code> <em>emphasized</em> <br /> 
<code>&lt;cite&gt; </code> <cite>citation</cite> <br /> 
<code>&lt;var&gt; </code> <var>computer variable</var> <br /> 
<code>&lt;dfn&gt; </code> <dfn>definition</dfn> <br /> 
<h2>Bold</h2> 
<code>&lt;strong&gt; </code> <strong>strongly emphasized</strong> <br /> 
<h2>Monospace</h2> 
<code>&lt;code&gt; </code> <code>computer code</code> <br /> 
<code>&lt;kbd&gt; </code> <kbd>key press</kbd> <br /> 
<code>&lt;samp&gt; </code> <samp>sample computer output</samp> <br /> 
<h2>Underlined</h2> 
<code>&lt;a&gt; </code> <a href="#">a</a> <br /> 
<code>&lt;acronym&gt; </code> <acronym title="a" >acronym</acronym> <br /> 
<code>&lt;abbr&gt; </code> <abbr title="a" >abbreviation</abbr> <br /> 
<h2>Vertical-aligned</h2> 
<code>&lt;sup&gt; </code> superscript<sup>1</sup> <br /> 
<code>&lt;sub&gt; </code> subscript<sub>1</sub> <br /> 
</body> 
</html>

Middle Aligned INLINE

 
<!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>

Middle Offset INLINE

 

<!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>

On an inline-block element, a positive value in margin-top expands the height of the line and a negative value shrinks it.

 
<!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>

Shrinkwrapped Absolute right aligned

 
<!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>

Shrinkwrapped inline block by setting both width and height to auto

 
<!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>

Stretched Absolute in relative positioned parent

 
<!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>

HTML/CSS/Box Model/Inline Elements — различия между версиями

Текущая версия на 08:16, 26 мая 2010

Содержание

Block-level elements

CSS provides the following properties for styling inline boxes:

float inline block becomes block of multiline inline box

float inline elements becomes block

float inline with block inline padding

Inline Box

inline element is floated

Inline Elements list

Middle Aligned INLINE

Middle Offset INLINE

On an inline-block element, a positive value in margin-top expands the height of the line and a negative value shrinks it.

Shrinkwrapped Absolute right aligned

Shrinkwrapped inline block by setting both width and height to auto

Stretched Absolute in relative positioned parent

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

Текущая версия на 08:16, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Текущая версия на 08:16, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)
(нет различий)