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

Материал из Web эксперт
Перейти к: навигация, поиск
м (1 версия)
 
(нет различий)

Версия 12:21, 26 мая 2010

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;

}

  1. 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>

INLINE

</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;

}

  1. 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>

INLINE

</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;

}

  1. 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>

Positioned Grandparent
Non-positioned Parent 
   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">

  1. 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;

}

  1. 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>

Positioned Grandparent
Non-positioned Parent 
   Stretched Absolute

</body> </html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/Inline_Elements&oldid=5270»