块元素
会以新行开始
如<p><h1><ul>
内联元素
不会以新行开始
<b><a><img>
div元素(未指定元素类型)
(用外联 在CSS文件里索引#divid｛｝就可以设置div属性 可以在大括号前加需要修改的标签)
<div id="divid">
span元素（指定了元素类型为文本类型）
div布局
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>div布局</title>
???<style type="text/css">
???????body {
???????????margin: 0px;
???????}
???????#container {
???????????width: 100%;
???????????height: 950px;
???????????
???????}
???????#heading {
???????????width: 100%;
???????????height: 10%;
???????????
???????}
???????#content_menu {
???????????width: 30%;
???????????height: 80%;
???????????
???????????float: left;
???????}
???????#content_body {
???????????width: 70%;
???????????height: 80%;
???????????
???????????float: left;
???????}
???????#footing {
???????????width: 100%;
???????????height: 10%;
???????????
???????????clear: both;
???????}
???</style>
</head>
<body>
???<div id="container">
???????<div id="heading"> 头部</div>
???????<div id="content_menu"> 内容菜单</div>
???????<div id="content_body"> 内容主题</div>
???????<div id="footing"> 底部</div >
???</div>
</body>
</html>
table布局
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>table布局</title>
</head>
<body marginheight="0px"marginwidth="0px">
<table width="100%" height="950px" style="
???<tr>
???<td colspan="2" width="100%" height="10%" style="这是头部</td>
???</tr>
???<tr>
???????<td width="30"height="80%" style="左菜单</td>
???????<td width="70"height="80%" style="右菜单</td>
???</tr>
???<tr>
???????<td colspan="2" width="100"height="10%" style="底部</td>
???</tr>
</table>
</body>
</html>
块元素补充边距问题
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
</head>
<body>
<!-- padding内边距 ??margin外边距 -->
<div style="border:1px red dashed;height:600px;width:800px;padding:10px;background-image:url(‘css盒模型3D层次示意图.PNG‘)">
???<div style="border:1px rgb(255,206,68) solid;height:200px;width:200px">
???</div>
???<div style="border:1px blue solid;height:200px;width:200px;margin:10px;">
???????<!--这里因为有外面div的内边距所以加上margin的10px 现在距外边div20px-->
???????<div style="margin:10px">asdasdasdas</div>
???</div>
</div>
</body>
</html>
HTML学习笔记块元素 第三节 （原创）
原文地址：http://www.cnblogs.com/ttzzyy/p/7499862.html