今天重新整理了一下前端div布局的知识,发现有了一些比较深的认识,特在此详述一下。
div定义:可定义文档中的分区或节,可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
在考虑很多页面的布局时,我们首先会想到div,因为这是一个块级元素,分好块后,无论怎么修改该div里边的标签,都不会影响该div以外的标签属性,因此,提高了页面布局的效率,不会因为某一个标签影响到整个页面的布局。
下边是我模仿QQ空间写的一个例子:
<html>
<head >
<meta charset="UTF-8"/>
<title>我的相册</title>
<style>
body{
background-color:#312752;
margin:0px;
padding:0px;
}
.div_top{
height:50px;
width:100%;
}
.div_menu{
height:50px;
width:4%;
margin-left:1%;
float:left;
text-align:center;
line-height:50px;
font-size:14px;
color:#ccc7d9;
}
.div_tittle{
height:90px;
width:100%;
}
.userlogo{
height:78px;
width:78px;
margin-left:6%;
margin-top:0.5%;
float:left;
background-color:#fff;
}
.user_text{
height:28px;
width:82%;
float:left;
margin-left:1%;
}
.div_display{
width:94%;
height:600px;
margin-left:5%;
position:relative;
}
.div_photo{
width:179px;
height:160px;
float:left;
margin-top:2%;
margin-left:1%;
text-align:center;
background-color:#353a54;
}
#photos{
width:100%;
height:80%;
}
.photo_text{
text-align:center;
font-size:13px;
line-height:26px;
color:#ccc7d9;