div全称是divsion，表示部分的一个元素，用<div></div>来表示的。他是定义HTML文件中的一个区域。这里我就来介绍div和子div的使用方法
工具/原料
HTML基础知识
UE编辑器
CSS基础知识
方法/步骤
1、首先我们用div这个区域来显示一个段落文字，来看看具体代码如下：<html> <head> <title>div各种应用</title> <styletype="text/css"> </style> </head> <body> <div> <p>我是div文件</p> </div></body></html>可以看到如下图的执行效果，其实这里我们看到的效果不是很明显，具体如下图。
2、这里引入了strong标签来说明问题，通过对比来说明DIV的区块的属性，具体的代码如下：<html> <head> <title>div各种应用</title> <styletype="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> <styletype="text/css"> #contion{ background:orange; padding:20px; border:1pxsolidred; } </style> </head> <body> <divid="contion"> <strong>我是div文件</strong> </div> <strong>我是P文件</strong></body></html>可以看到如下图的执行效果，加了一个边框。
4、这里来说书添加子di箪滹埘麽v，这个也是div的嵌套，具体的代码如下：<html> <head> <title>颊俄岿髭div各种应用</title> <styletype="text/css"> #contion{ background:orange; padding:20px; border:1pxsolidred; } </style> </head> <body> <divid="contion"> <strong>我是div文件</strong> <div>我是子div</div> </div> <strong>我是P文件</strong></body></html>在strong这个文件下面，显示了一个div的信息，具体如下图所示。
5、现螅岔出礤在我在继续给字子div设置样式，具体的代码如下：<html> <head> <title>div各种应用</title> &造婷用痃lt;styletype="text/css"> #contion{ background:orange; padding:20px; border:1pxsolidred; } .box{ background:blue; padding:20px; border:1pxsolidred; } </style> </head> <body> <divid="contion"> <strong>我是div文件</strong> <divclass="box">我是子div</div> <divclass="box">我是子div1</div> </div> </body></html>可以看到子div的执行效果图。
