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

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

布局的结构

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

浮动定位

    
1
    
2
    
3

解释图：

效果图：

绝对定位

    
1
    
2
    
3

解释图以及效果图：

相对定位

代码;

    
1
    
2
    
3

解释以及效果图：

弹性盒子布局

代码1：

    
1
    
2
    
3

效果以及解释：

代码2：

    
1
    
2
    
3

效果以及演饰：

总结：

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