关闭

布局和定位

173人阅读 评论(0) 收藏 举报
分类:

网页的三种布局

  1. 流动模型(flow)
    flow:默认的网页布局模型。
  2. 浮动模型(flow)
    可以让块级元素显示在一行,用到 float:left/right;
  3. 层模型(layer)
    层模型有三种形式:
    (a)position:absolute;
    这种形式将元素从文档流中拖出,然后用left,right,top,bottom属性相对于最接近的一个具有定位属性的父包含块进行绝对定位,如果不存在,则相对于body即浏览器窗口

    (b)positon:relative;
    通过left,right,top,bottom属性确定元素在正常的文档流中的偏移位置。相对定位首先按照static(float)方式产生一个元素(并且元素像层一样浮动),然后相对于以前的位置移动,移动前的位置不变(虽然div元素相对于以前的位置产生了偏移,但是元素以前的位置还是保留着)。

    (c)position:fixed;
    它的相对移动的坐标是视图(屏幕内网页窗口),不会随着浏览器窗口的滚动条而改变,不受文档流的影响background-attachment:fixed属性相同。
    另外,relative和absolute组合使用使被设置元素不想对于浏览器定义

<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
#box1{
    width:200px;
    height:200px;
    position:relative;        
}
#box2{
    position:absolute;
    top:20px;
    left:30px;         
}
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4875次
    • 积分:190
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:4篇
    • 译文:0篇
    • 评论:0条
    文章分类