HTML中的5大布局以及定位的详解。

@HTML中的5大布局以及定位的详解。
说下我写这篇博客的原因，就是1年之前学的关于html布局上面的一些定位都忘得差不多了，自从学了bom和dom之后三剑客就告了一个段落，就是去学习一些前端的ui框架以及js框架还有高级语法，就很长时间没去写页面，发现自己的布局方面都忘得干干净净的，然后想了想了，前端工程师的最基础的本领就是写页面，自己页面的布局都忘了，看来还是得去补一下。

布局的结构

这是整体的盒子div的css属性

<style>
    .divparent{
        height: 400px;
        width: 600px;
        box-sizing: border-box;
        border: 2px solid dodgerblue;
        padding: 20px 20px 20px 20px;
    }
    .div1{
        height: 100px;
        width: 100px;
        background: red;
        margin: 10px 10px 10px 10px;
    }
    .div2{
        height: 100px;
        width: 100px;
        background: green;
        margin: 10px 10px 10px 10px;
    }
    .div3{
        height: 100px;
        width: 100px;
        background: yellow;
        margin: 10px 10px 10px 10px;
    }
</style>

浮动定位

<!-- 浮动定位-->
<div class="divparent">
    <div class="div1" style="float:left;">1</div>
    <div class="div2" style="float:left;">2</div>
    <div class="div3" style="float:left;clear: left">3</div>
</div>

解释图：

效果图：

绝对定位

<!--坐标的绝对定位-->
<div class="divparent" style="position: relative;">
    <div class="div1" style="position: absolute;left: 30px;top: 30px;">1</div>
    <div class="div2" style="position: absolute;left: 200px;top: 200px;z-index: 50">2</div>
    <div class="div3" style="position: absolute;left: 150px;top: 150px;z-index: 40">3</div>
</div>

解释图以及效果图：

相对定位

代码;

<div class="divparent" style="position:relative;left: 10px;top: 20px;">
    <div class="div1" style="position: relative;">1</div>
    <div class="div2" style="position: relative;left:60px;top:60px;z-index: 60">2</div>
    <div class="div3" style="position: relative;left: 50px;top: 30px;z-index: 40">3</div>
</div>

解释以及效果图：

弹性盒子布局

代码1：

<div class="divparent"
     style="display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center"
>
    <div class="div1" style="">1</div>
    <div class="div2" style="">2</div>
    <div class="div3" style="">3</div>
</div>

效果以及解释：

代码2：

<div class="divparent"
     style="display: flex;flex-direction: column;
     justify-content: space-around;
     align-items: flex-end">
    <div class="div1" style="">1</div>
    <div class="div2" style="">2</div>
    <div class="div3" style="">3</div>
</div>

效果以及演饰：

总结：

所有的解释都在图片里面，放在一起就是希望读者能够更加直观的去理解布局。
通过本次的总结算是一个对html中布局的一些复习吧。
喜欢的朋友可以关注我或者给喔点个赞，有错误的话也希望朋友们积极的指出，你们的支持就是我写作的动力。