HTML/CSS/Box Model/display

Материал из Web эксперт
Версия от 11:16, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

display: inline-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 xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">

  • .inline-box {
 display: inline-block;
 overflow: visible;
 visibility: visible;
 width: 275px;
 height: 52px;
 margin: 10px 100px;
 padding: 10px 10px;

} </style> </head> <body>

BEFORE Inline element displayed as an inline block. AFTER

</body> </html> 

</source>


display:list-item to render as list item

   <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"> dfn { 

 display: list-item;
 list-style-type: square;

} </style> </head> <body>

dfn display:list-itemdfn

</body> </html> 

</source>


Div toggler with Javascript

   <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>Div toggler</title>
   <script type="text/javascript">

function swap(targetId){ 

 if (document.getElementById){
       target = document.getElementById(targetId);
           if (target.style.display == "none"){
               target.style.display = "";
           } else {
               target.style.display = "none";
           }
       }

} 

   </script>
   <style type="text/css" media="Screen">

body { 

 font: 12px Verdana;

}

  1. hiddenDiv {
 background-color: #aaaaaa;
 width: 200px;

} </style> </head> <body> 

       <a href="#" title="Toggle section" onclick="swap("hiddenDiv");return false;">Toggle div!</a>

</body> </html> 

</source>


Rendered as a table with rows and cells

   <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"> div,span { 

 border: 1px solid black;
 padding: 5px;

}

  • .tabled {
 display: table;
 border-collapse: collapse;

}

  • .rowed {
 display: table-row;

}

  • .celled {
 display: table-cell;

} </style> </head> <body>

division
division


    
   span 
   span

</body> </html> 

</source>


use display:block to render an element as a 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 xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> em { 

 display: block;

} </style> </head> <body>

em display:block em

</body> </html> 

</source>


use display:inline-block to render an inline element as a block nested in a line.

   <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"> strong { 

 display: inline-block;
 width: 250px;

} </style> </head> <body> strong
display:inline-block

</body> </html> 

</source>


use display:inline to render an element inline.

   <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"> p,ol,li,table { 

 display: inline;

} </style> </head> <body> display:inline

p

p

p

  1. li
  2. li
  3. li
td td
td td

</body> </html> 

</source>


use display:none to prevent an element from being rendered.

   <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"> img { 

 display: none;

} </style> </head> <body>


<img src="http://www.wbex.ru/style/logo.png" alt="star" /> display:none

</body> </html> 

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