css之position与文档流

     Css的定位机制分为普通流(文档流)、浮动(float)、定位(position);其中普通流就是文档流,在Html中的写法是从上到下,从左到右的排版布局,其中块级元素独占一行,而内联元素不独占一行。对于文档流来说它的默认position是static就是没有定位。

      position规定元素的定位类型,任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不管该元素本身是个什么类型,相对元素会相对与它的正常流的默认位置作出偏移。具体:static,position的默认值,表示没有定位,忽略top,left,bottom,right和z-index的影响;absolute,生成绝对定位元素,相对于static定位之外的第一个父元素进行定位,元素位置通过left,top,bottom,right设置;fixed,生成绝对定位元素,相对于浏览器窗口进行定位,通过left,top,bottom,right设置;relative,生成相对定位元素,相对于其正常文档流中的位置进行定位,通过left,top,botton,right设置(注意相对正常位置);inherit规定应该从父元素处继承position属性。

       浮动模型是一种可视化格式模型,浮动的框可以左右移动,直到它的外边缘碰到包含框或者另一个浮动元素的边框,如果包含的框中没有足够的宽度容纳浮动元素那么多余的就会下移。浮动元素不在文档的普通流中,就好比浮动元素在文档流中不存在似的。

       从上面我们知道,被设置了absolute的元素或者float的元素都会脱离文档流,虽然正常的显示还在,但是它其实不占文档流中的空间位置。在float脱离文档流的时候虽然其他盒子无视他,但盒子中的文本围绕它,而absolute脱离文档流会造成其他盒子和盒子的文本都会无视他。

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,866评论 1 92
  • CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~...
    fehysunny阅读 2,999评论 0 7
  • Html 标签 斜体 粗体 单独的样式 引用文本 长文本引用 换行 空格 分割线 地址信息 单行代码 多行代码 无...
    SunnySky_阅读 576评论 0 5
  • 当在这一个页面上实现布局和定位有几种不同的技术。使用哪种技术,很大程序上取决于内容和目标页面,因为有很多技术比别人...
    lulu_c阅读 1,157评论 0 5
  • 说是学徒却不能举证 企业需承担未签约责任 阿辉于2014年3月18日入职双清公司,于2014年7月18日以“不想做...
    小好阅读 456评论 0 2