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

HTML中CSS的定位

时间:2014-08-21 17:05:44      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   os   io   strong   ar   div   

1.定位和浮动:

2.一切皆为框:

块元素:div,h1,p……
行元素:span,strong……
position 属性值的含义:
static
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置

3.相对定位:

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。
#box_relative
{
    position:relative;
    left:30px;
    top:20px;
}

4.绝对定位:

设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

5.浮动:

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
float:right;

  

HTML中CSS的定位,布布扣,bubuko.com

HTML中CSS的定位

标签:style   blog   color   os   io   strong   ar   div   

原文地址:http://www.cnblogs.com/mvpchenjian/p/3927422.html

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