本文共 1275 字，大约阅读时间需要 4 分钟。
2、为HTML内容定义CSS样式：
<div style="display:inline">Box-1</div>
<div style="display:inline">Box-2</div>
<div style="display:inline">Box-3</div>
<span style="display:block">Box-4</span>
<span style="display:block">Box-5</span>
<span style="display:block">Box-6</span>
<div style="display:none">Box-7</div>
<span style="display:none">Box-8</span>
把前三个块级标级<div>展示样式定义为inline（即按行级样式进行展示）；同时把中间三个行级<span>展示样式定义为block（即按块级样式进行展示）；把最后块级<div>和行级<span>两个展示样式定义none（即不显示），其效果如下：
其实display是一个非常有用的属性，通过设置它的显示与否形成动画效果，下面一段代码来源于w3school的教程：
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("p").click(function()
{
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>
这段代码引入了JQuery，后面会陆续涉及到，目前看不懂没有关系，它的意思是说当单击<p>标记的内容时，它会自动隐藏，其中的$(this).hide()就是JQuery封装了display：none属性。