http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FBox_Model%2Fdisplay
HTML/CSS/Box Model/display - История изменений
2026-04-04T22:14:52Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Box_Model/display&diff=5262&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/Box_Model/display&diff=5263&oldid=prev
Admin: 1 версия
2010-05-26T08:16:42Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==display: inline-block==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
* .inline-box {<br />
display: inline-block;<br />
overflow: visible;<br />
visibility: visible;<br />
width: 275px;<br />
height: 52px;<br />
margin: 10px 100px;<br />
padding: 10px 10px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1></h1> <br />
<div> <br />
<span>BEFORE</span> <br />
<span class="inline-box">Inline element displayed as an inline block.</span> <br />
<span>AFTER</span> <br />
</div> <br />
</body> <br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==display:list-item to render as list item==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
dfn {<br />
display: list-item;<br />
list-style-type: square;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div class="ul"><dfn>dfn <code>display:list-item</code></dfn><dfn>dfn</dfn></div> <br />
</body> <br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Div toggler with Javascript==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>Div toggler</title><br />
<script type="text/javascript"><br />
function swap(targetId){<br />
if (document.getElementById){<br />
target = document.getElementById(targetId);<br />
if (target.style.display == "none"){<br />
target.style.display = "";<br />
} else {<br />
target.style.display = "none";<br />
}<br />
}<br />
} <br />
</script><br />
<style type="text/css" media="Screen"><br />
body {<br />
font: 12px Verdana;<br />
}<br />
#hiddenDiv {<br />
background-color: #aaaaaa;<br />
width: 200px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<a href="#" title="Toggle section" onclick="swap("hiddenDiv");return false;">Toggle div!</a><br />
</div><br />
<div id="hiddenDiv" style="display: none;"><br />
<p>Hello!</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Rendered as a table with rows and cells==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
div,span {<br />
border: 1px solid black;<br />
padding: 5px;<br />
}<br />
* .tabled {<br />
display: table;<br />
border-collapse: collapse;<br />
}<br />
* .rowed {<br />
display: table-row;<br />
}<br />
* .celled {<br />
display: table-cell;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div class="tabled"> <br />
<div class="rowed"> <br />
<div class="celled">division</div> <br />
<div class="celled">division</div><br />
</div> <br />
<br />
<br />
<span class="rowed"> <br />
<span class="celled">span</span> <br />
<span class="celled">span</span></span><br />
</div> <br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==use display:block to render an element as a block==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
em {<br />
display: block;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<em>em <code>display:block</code></em> <em>em</em> <br /> <br />
<br />
</body> <br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==use display:inline-block to render an inline element as a block nested in a line.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
strong {<br />
display: inline-block;<br />
width: 250px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<strong>strong <br /><code>display:inline-block</code></strong> <br /><br /> <br />
<br />
</body> <br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==use display:inline to render an element inline.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p,ol,li,table {<br />
display: inline;<br />
}<br />
</style><br />
</head><br />
<body><br />
<code>display:inline</code> <br />
<p>p</p> <p>p</p> <p>p</p> <br />
<ol><li>li</li><li>li</li><li>li</li></ol> <br />
<table><br />
<tr><br />
<td>td</td><br />
<td>td</td><br />
</tr><br />
<tr><br />
<td>td</td><br />
<td>td</td><br />
</tr><br />
</table> <br />
</body> <br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==use display:none to prevent an element from being rendered.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
img {<br />
display: none;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<br/><img src="http://www.wbex.ru/style/logo.png" alt="star" /> <code>display:none</code> <br />
<br />
</body> <br />
</html><br />
</source></div>
Admin