码迷,mamicode.com
首页 > Web开发 > 详细

css定位机制(布局)

时间:2017-07-01 00:59:15      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:一个   块级元素   部分   矩形   类型   文档流   osi   absolute   定位   

css定位机制由三种:普通文档流、定位、浮动。

1,普通文档流:块级元素从上往下排列,行级元素从左到右排列。

 

2,定位:position属性可以对元素进行定位,有四个类型,static,relative,absolute,fixed

static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

relative:当设置了偏移值之后,元素相对于自身进行偏移,仍旧保持未偏移前的形状,但是它依然保留原来所占空间。

absolute:元素定位后生成一个块级框,并从文档流中完全删除,不再占空间,偏移是相对离它最近的一个已经定位过的祖先元素,如果没有,则是body。

fixed:元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

 

3,浮动:元素设置float属性可以向左或右浮动,脱离里普通文档流,不占据空间。却是占据视图位置,会挡住在他下面的元素。浮动元素会生成一个块级框,而不论它本身是何种元素。

 

css定位机制(布局)

标签:一个   块级元素   部分   矩形   类型   文档流   osi   absolute   定位   

原文地址:http://www.cnblogs.com/lubenxin/p/7101064.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!