前段刚刚入门,我说一下我作为一个小白来说一下对DIV的理解。
DIV是一个很重要的标签,网页的制作是离不开DIV的,DIV可以包裹不同的元素,为不同的元素设计不同的样式。
我通常一个DIV理解成一个盒子,在DIV里面嵌套不同的DIV就是在盒子里面放不同的盒子,一层套一层,我把它理解成金字塔的俯视图一样。
DIV是一个块级元素,它包含的元素会自动换行。例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV</title>
<style type="text/css">
.big{
width: 500px;
height: 500px;
background-color: red;
}
.medium{
width: 300px;
height: 300px;
background-color: pink;
}
.small{
width: 100px;
height: 100px;
background-color: #00FF00;
}
</style>
</head>
<body>
<div class="big">
<div class="medium"></div>
<div class="small"></div>
</div>
</body>
</html>
可以看出绿色的小正方形并没有接在粉色的后面,而是换行了。
如果想要两个并排就需要一个CSS的属性:float
我们改一下上面代码,在CSS中分别加入一行float:left;
.medium{
width: 300px;
height: 300px;
background-color: pink;
float: left;
}
.small{
width: 100px;
height: 100px;
background-color: #00FF00;
float: left;
}
让我们在运行一下:
可以看出绿色现在跟在粉色后面。