CSS传统布局之布局模型

刚开始准备这篇文章的时候,查到的有很多包含“布局模型”的中文博客或是资料,但是google上并未找到类似字眼,google到的是“flex layout module”“grid layout module”“ruby layout module”

本文只谈这三个模型,不谈具体布局实例。

网页布局有三个布局模型:

  1. flow   流动模型,网页默认的布局模型,即自上而下,自左而右的分布页面元素。
  2. float   浮动模型,
  3. layer  层模型   

上面三点是概念上的东西,具体操作起来则需要盒模型+display属性+float属性+position属性三个属性来实现:

  1. 假如你只使用了display属性,它的值可以是block inline inline-block 等等,都可以,那么你使用的就是flow模型
  2. 假如你使用了float属性,值不为none,那么你使用的是float模型
  3. 假如你使用了position属性,那么你使用的就是layer模型

同时,需要明确一点,这三种模型并不是割裂开的,与此相反,通常都是紧密联系的。

比如:

Q:如何让一个父元素靠近页面右边,而它的子元素靠近该父元素的左边?

A:只对父元素使用浮动模型(float) 或是层模型(layer)就可以了。因为子元素默认的不就是流动模型(flow)吗?

posted on 2016-03-12 23:00  kevin4dev  阅读(490)  评论(0编辑  收藏  举报

导航