作者:断雁难飞_920 | 来源:互联网 | 2018-03-01 10:22
CSS布局布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及单列布局、多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现),希望能给需要的小伙伴带来一些帮助。目录1.常用居中方法:水平居中,垂直居中,2.单列布局3.二列&三列布局:float+margin,position+margi
CSS布局
布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及单列布局、多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现),希望能给需要的小伙伴带来一些帮助。
目录
1.常用居中方法:水平居中,垂直居中,
2.单列布局
3.二列&三列布局:float+margin,position+margin,圣杯布局(float+负margin),双飞翼布局(float+负margin),flex布局
如果你想学习交流html5css3等web前端技术,想多了解一些前端方面的内容,可以加入我们的QQ学习群:27062964,一起学习交流,提升自己,有学习资料和源码分享。或者点击链接直接加入QQ群:
总结
1.常用居中方法
居中在布局中很常见,我们假设DOM文档结构如下,子元素要在父元素中居中:
与之前所讲的几种传统布局方案相比,flex布局的代码可谓异常简洁,而且非常通用,利用简单的三行CSS即实现了常见的五种布局。
总结
传统的布局方法基于盒状模型,依赖display属性 +position属性 +float属性,逻辑相对复杂,对于实现一些特殊效果,例如垂直居中,尤其复杂繁琐。而flex布局中的flex容器可以根据实际可用空间动态调整子元素的宽高比和顺序,使元素能够尽可能地利用可用空间,同时也能通过缩小来避免超出。flex布局提供了一套简便、完整、响应式的布局方案。
以上就是web前端教程之CSS 布局实例的详细内容,更多请关注 第一PHP社区 其它相关文章!