h5的div布局详解

在实际的网页开发中，网页的整体部分一般是由div标签来进行布局的。那么在使用div布局之前就要了解div的属性div是块级元素块级元素在页面中的独占一行默认情况下的高度由里面的内容决定。由于块级元素独占一整行那么使用div进行布局的话 div和div之间是上下排列的还有块级元素之间不仅能套入行内元素还可以嵌入块级元素但在嵌入块级元素的时候由于块级元素的默认属性它们之间是呈现上下排列的

小扬同学的笔记

10030人浏览 · 2021-12-24 19:52:32

小扬同学的笔记 · 2021-12-24 19:52:32 发布

在实际的网页开发中，网页的整体部分一般是由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 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呈一行排序的情况一般使用的都是左浮动如果最后一个元素即使使用了左浮动但是依然在下面那么可以给它尝试使用一下右浮动使它靠右浮动即可实现