HTML-盒子模型布局-2018.07.06

2018-07-06 本文已影响0人侯小强2018

HTML盒子模型

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距
（padding-left；padding-right；padding-top;padding-bottom）
border：边框
(boder-left;boder-right;boder-top;boder-bottom)
margin：外边距
(margin-left;margin-right;margin-top;margin-bottom)

标准盒子模型：

标准盒子模型

IE盒子模型：

IE盒子模型

综合div的布局进行照片墙的布局成果

盒子模型布局成果

代码储存：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .divtotle {
                border: 7px;
                width: 200px;
                height: 400px;
                background-color: yellow;
                float: left;
            }
        </style>

    </head>

    <body>
        <!--
            作者：407990108@qq.com
            时间：2018-07-06
            描述：第一条div
            
        -->
        <div class="divtotle">

            <div style="width: 60px; height: 100px; border:7px solid grey; margin: 20px; margin-left: 110px;">

                <img src="img/div-1-1.jpg" width="60px" height="100px" />
            </div>

            <div style="width:150px; height:100px;border: 7px solid grey;margin: 20px;margin-top: 30px;">
                <img src="img/div-1-2.jpg" width="150px" height="100px" />
            </div>
        </div>

        <!--
        作者：407990108@qq.com
        时间：2018-07-06
        描述：第二条div
    -->
        <div class="divtotle">

            <div style="width: 150px; height: 180px; border: 7px solid grey; margin: 10px; ">
                <img src="img/div-2-1.jpg" width="150px" height="180px" />
            </div>

            <div style="width:150px; height:100px;border: 7px solid grey;margin: 10px;">
                <img src="img/div-2-2.jpg" width="150px" height="100px" />
            </div>
        </div>

        <!--
        作者：407990108@qq.com
        时间：2018-07-06
        描述：第三条div
    -->
        <div class="divtotle">

            <div style="width: 120px; height: 50px; border: 7px solid grey; margin: 10px; ">
                <img src="img/div-3-1.jpg" width="120px" height="50px" />

            </div>

            <div style="width:120px; height:120px;border: 7px solid grey;margin: 10px;">

                <img src="img/div-3-2.jpg" width="120px" height="120px" />
            </div>

            <div style="width:120px; height:50px;border: 7px solid grey;margin: 10px;">
                <img src="img/div-3-3.jpg" width="120px" height="50px" />

            </div>
        </div>

        <!--
        作者：407990108@qq.com
        时间：2018-07-06
        描述：第四条div
    -->

        <div class="divtotle">

            <div style="width: 60px; height: 100px; border: 7px solid grey; float: left;margin: 10px; display: inline;">
                <img src="img/div-4-1.jpg" width="60px" height="100px" />
            </div>

            <div style="width:60px; height:100px;border: 7px solid grey;margin: 10px;float: left;display: inline;">
                <img src="img/div-4-2.jpg" width="60px" height="100px" />
            </div>

            <div style="width:150px; height:180px;border: 7px solid grey;margin: 10px;margin-top: 150px;">
                <img src="img/div-4-3.jpg" width="150px" height="180px" />
            </div>
        </div>

        <!--
        作者：407990108@qq.com
        时间：2018-07-06
        描述：第五条div
    -->

        <div class="divtotle">
            <div style="width: 150px; height: 100px; border: 7px solid grey; margin: 10px; ">
                <img src="img/div-5-1.jpg" width="150px" height="100px" />
            </div>

            <div style="width:60px; height:100px;border: 7px solid grey;margin: 10px;">

                <img src="img/div-5-2.jpg" width="60px" height="100px" />
            </div>
        </div>

    </body>

</html>

小白解释：

1.在进行布局时候，首先脑袋里要有大概的整体印象，知道自己要建立几块布局，具体大概的尺寸，需要的像素。
2.对于margin，padding，border的应用
margin，分为上下左右，如果默认了一个margin，要进行微调的情况下，那么会以新的命令为准。
padding 是内容外面的边距，要包括在整个div的大小下面。
border 也占有一定的空间，所以要进行调整好。

学习体会：

最开始为了布局添加一些白色的div充当边框，学习了盒子模型后，非常的便捷，操作起来简直飞一般的体验，不用琢磨那么久了，哈哈哈。所以，还是知识的积累和涉及的面不够广，要多进行学习和体验！加油，侯小强！！啦啦啦！！！