CSS3的布局模型

CSS3包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。

在网页中,元素有三种布局模型:

1、流动模型(Flow)

2、浮动模型 (Float)

3、层模型(Layer)


层模型:

1、绝对定位(position: absolute):相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口

2、相对定位(position: relative):首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。

3、固定定位(position: fixed): 与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。

4、Relative与Absolute组合使用

    父元素设置position:relative,子元素设置position:absolute,则 子元素相对于父元素定位,不再是相对于浏览器进行定位咯

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 夜莺2517阅读 127,774评论 1 9
  • 版本:ios 1.2.1 亮点: 1.app角标可以实时更新天气温度或选择空气质量,建议处女座就不要选了,不然老想...
    我就是沉沉阅读 6,992评论 1 6
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 8,629评论 28 53
  • 兔子虽然是枚小硕 但学校的硕士四人寝不够 就被分到了博士楼里 两人一间 在学校的最西边 靠山 兔子的室友身体不好 ...
    待业的兔子阅读 2,682评论 2 9