div的并列和包含关系

bcbobo21cn

于 2023-11-17 02:02:14 发布

阅读量276

点赞数

分类专栏： web前端文章标签： chrome 前端 div

本文链接：https://blog.csdn.net/bcbobo21cn/article/details/134454013

版权

web前端专栏收录该内容

150 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />

    <style>
        #div1 {
            width:300px;
            height:200px;
            background-color:springgreen;
        }

        #div2 {
            width:300px;
            height:200px;
            background-color:red;
        }

    </style>

</head>
<body>

    <div id="div1"> 
    </div>

    <div id="div2"> 
    </div>

    <div id="div3" style="width:400px;height:300px;border:2px solid red;background-

color:#0000FF">
        返回数据
        <div id="div4" style="width:300px;height:200px;border:2px solid red;background-

color:red">
        </div>
    </div>
</body>
</html>

<div>是开始标签，</div>是结束标签；<div xx="xx" yy="yy">，是开始标签并定义了一些属性；

如下，

2个div是并列关系，互相独立，各自占据自己的区域；

如下，

</div>

是一个div包含另一个div，一个div将显示在另一个div的内部；