细谈CSS布局方式

一、CSS布局方式分类

[1].默认文档流方式:以默认的html元素的结构顺序显示 

  [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动、left对象向左浮动,而后面的内容流向对象的右侧、right对象向右浮动,而后面的对象流向对象的左侧(取消独占一行的行为,允许别人与其一行,其实是这个块从文档流中分离出来,他之后的对象视它不存在) 

  [3].定位布局方式:通过设置html的position属性显示

    position设置对象的定位方式,

    值:static(静态定位,页面中的每一个对象的默认值) 

      absolute(绝对定位,将对象从文档流中分离出来,通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位,如果不存在这样的父级对象,则依据body对象) 

      relative(相对定位,对象不从文档流中分离出来,通过设置left、right、top、bottom四个方向相对于自身位置进行相对定位)

    注意:当想使用相对于父元素的绝对定位时,必须要有两个条件:

1.必须给父元素加定位属性,一般建议使用:position:relative。(不指定时默认为body)

        2.给子元素,加绝对定位position:absolute,同时要加方向属性(left/right/top/bottom).

        3.绝对定位是以父元素为基准点进行定位(会脱离文档流)。相对定位是以其本身为基准点进行定位(离开原位置但是还占据着位置,未脱离原文档流)。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券