DIV的使用详细教程以及CSS控制样式
1、首先我们用div这个区域来显示一个段落文字，来看看具体代码如下：
<html>
<head>
<title>div各种应用</title>
<style type="text/css">
</style>
</head>
<body>
<div>
我是div文件
</div>
</body>
</html>
可以看到如下图的执行效果，其实这里我们看到的效果不是很明显，具体如下图。
2、这里引入了strong标签来说明问题，通过对比来说明DIV的区块的属性，具体的代码如下：
<html>
<head>
<title>div各种应用</title>
<style type="text/css">
div{background-color:red;}
strong{background-color:blue;}
</style>
</head>
<body>
<div>
<strong>我是div文件</strong>
</div>
<strong>我是P文件</strong>
</body>
</html>
如下图，可以看到执行的效果，d通过设置背景颜色来说明div的背景颜色。
3、现在我们来设置div的边距，边框线，具体的代码如下：
<html>
<head>
<title>div各种应用</title>
<style type="text/css">
#contion{
background:orange;
padding:20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="contion">
<strong>我是div文件</strong>
</div>
<strong>我是P文件</strong>
</body>
</html>
可以看到如下图的执行效果，加了一个边框。
4、这里来说书添加子div，这个也是div的嵌套，具体的代码如下：
<html>
<head>
<title>div各种应用</title>
<style type="text/css">
#contion{
background:orange;
padding:20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="contion">
<strong>我是div文件</strong>
<div>我是子div</div>
</div>
<strong>我是P文件</strong>
</body>
</html>
在strong这个文件下面，显示了一个div的信息，具体如下图所示。
5、现在我在继续给字子div设置样式，具体的代码如下：
<html>
<head>
<title>div各种应用</title>
<style type="text/css">
#contion{
background:orange;
padding:20px;
border: 1px solid red;
}
.box{
background:blue;
padding:20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="contion">
<strong>我是div文件</strong>
<div class="box">我是子div</div>
<div class="box">我是子div1</div>
</div>
</body>
</html>
可以看到子div的执行效果图。
