h5的div布局详解
在实际的⽹页开发中，⽹页的整体部分⼀般是由div标签来进⾏布局的。那么在使⽤div布局之前就要了解div的属性
div是块级元素 块级元素在页⾯中的独占⼀⾏ 默认情况下的⾼度由⾥⾯的内容决定。由于块级元素独占⼀整⾏ 那么使⽤div进⾏布局的话div和div之间是上下排列的
还有块级元素之间不仅能套⼊⾏内元素 还可以嵌⼊块级元素  但在嵌⼊块级元素的时候 由于块级元素的默认属性 它们之间是呈现上下排列的 所以就需要使⽤浮动
如图所⽰，该页⾯的整体结构的搭建是使⽤div搭建的。主要有⼀个⼤的整体的div 然后这个最⼤的div下有三个⼩的div 分别是头部 中部 底部 ⽽在中部的div中还有三个⼩div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.container{
width: 1000px;
height: 880px;
border: 1px solid red;
margin: 0px auto;
background-color: rgb(233, 213, 213);
}
/* 设置头部样式 */
.title{
width: 950px;
height: 100px;
border: 1px solid red;
margin: 10px auto;
background-color: pink;
}
/* 设置导航样式 */
.nav{
width: 950px;
height: 120px;
margin: 10px auto;
background-color: red;
}
/* 设置主体内容样式 */
.content{
height: 500px;
width: 950px;
background-color: lightblue;
margin: 10px auto;
}
/* 设置主体内容左列的样式 */
.content .demo1{
width: 200px;
height: 100%;
/*⾼度设置为100%的时候表⽰占满容器那么后期就⽆法设置该盒⼦的上外边距和下外边距但是可以设置px为单位作⾼度只要不把⽗容器占满即可
*/
background-color: yellow;
margin-right: 20px;
float: left;
}
/* 设置主体内容的中间的内容的样式 */
.content .demo2{
width: 400px;
height: 100%;
background-color: lightcoral;
float: left;
margin-right: 20px;
}
/* 设置主体内容右列的样式 */
.content .demo3{
width: 310px;
height: 100%;
background-color: lightgreen;
float: right;
}
/* 设置底部 */
.bottom{
width: 950px;
height: 100px;
background-color: lightslategray;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="title">这是头部</div>
div border属性<div class="nav">这是导航</div>
<div class="content">
<div class="demo1">主体内容的左列</div>
<div class="demo2">主体内容的中间内容</div>
<div class="demo3">主体内容的右列</div>
</div>
<div class="bottom">这是底部</div>
</div>
</body>
</html>
最终代码如上所⽰，在实际搭建下，除了中间的div的搭建需要⽤到浮动，其它的div只要定义了宽⾼，然后使⽤margin: 0px auto；即可实现在整个⽗级元素内⽔平居中显⽰
中部的三个⼩div的则需要使⽤float的浮动去实现，
/* 设置主体内容样式 */
.content{
height: 500px;
width: 950px;
background-color: lightblue;
margin: 10px auto;
}
/* 设置主体内容左列的样式 */
.content .demo1{
width: 200px;
height: 100%;
/*⾼度设置为100%的时候表⽰占满容器那么后期就⽆法设置该盒⼦的上外边距和下外边距
但是可以设置px为单位作⾼度只要不把⽗容器占满即可
*/
background-color: yellow;
margin-right: 20px;
float: left;
}
/* 设置主体内容的中间的内容的样式 */
.content .demo2{
width: 400px;
height: 100%;
background-color: lightcoral;
float: left;
margin-right: 20px;
}
/* 设置主体内容右列的样式 */
.content .demo3{
width: 310px;
height: 100%;
background-color: lightgreen;
float: right;
}
如上所⽰，中部内容三个⼩div需要⽤到浮动，以为块级元素之间的默认排序是上下⽅向的排序。⽽在
最终的效果图中都是在同⼀⾏内排序，所以这⾥可以使⽤左浮动来实现 给三个div分别使⽤float： left；⽅法即可。因为使⽤浮动就会存在浮动塌陷，所以需要消除浮动塌陷
消除浮动塌陷的三种⽅法
1.给⽗级元素定义⾼度
2.给⽗级元素使⽤overflow: hidden;⽅法消除浮动塌陷
3.使⽤clear: both;⽅法消除浮动塌陷
我们这⾥使⽤消除浮动塌陷的⽅法是给⽗级元素添加⾼度值 所以在对⼦级元素使⽤浮动的时候就不会出现浮动塌陷
像这种情况多个⼩div在⼀个⼤div呈⼀⾏排序的情况⼀般使⽤的都是左浮动 如果最后⼀个元素即使使⽤了左浮动但是依然在下⾯ 那么可以给它尝试使⽤⼀下右浮动 使它靠右浮动即可实现

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。