标签：索引 meta asd div布局 示意图 原创 内联 set red
块元素
会以新行开始
如<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>
标签：索引 meta asd div布局 示意图 原创 内联 set red
原文地址：http://www.cnblogs.com/ttzzyy/p/7499862.html
