HTML中<div>层标签的基本使用_div标签实例ppt-CSDN博客

本文链接：https://blog.csdn.net/weixin_45161161/article/details/106105750

（作者水平有限，不足之处请补充，谢谢）

你可能在无聊翻看某个网页源代码时会向下面图片一样看见有一大堆<div></div>标签：

那么这个玩意是啥嘞，他可以把文档分割成独立的小部分，配合class和id使用有奇效。

你可别告诉我上面这个你看不懂？！好吧，简单来说，他就是把一个大的界面分割成独立的小的界面（不严谨的说，它就相当于<body>标签里面套娃一个<body>）

额，它有着很多<body>标签的属性，你可以在<div>标签里使用style等属性。

当然，它也可以配合class属性设置样式，或者配合id属性做一些其他事情。

接下来放一些例子：

在div里面放置一些文字：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div style="color:#66CCFA">
<p>这个div的文字是蓝色!</p>
</div>
<div style="background-color:#66CCFA">
<p>这个div的背景是蓝色!</p>
</div>
</body>

效果图：

设置div的大小：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div style="background-color:#66CCFA;height:128px;width:256px;">
<p>这个div的背景是蓝色!</p>
<p>它的长是256px，宽是128px</p>
</div>
</body>

效果图：