布局和定位

原创 2015年11月17日 20:34:19

网页的三种布局

  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;         
}
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

HTML基本布局定位

  • 2014年07月06日 15:48
  • 36KB
  • 下载

移动端整体布局-解决ios下fixed定位抖动的问题

原文地址:http://www.w3cplus.com/mobile/mobile-terminal-refactoring-mobile-layout.html 一般来说,header...

html布局:定位position使用技巧

布局是html中非常重要的一部分,而定位在页面布局中也是使用频率很高的方法,今天我们就说说定位在布局中的使用技巧和注意事项。...

CSS定位与DIV布局

http://www.cnblogs.com/kevinhigher/archive/2011/10/12/2209416.html 1.1. Div&Span 1. Div是一个区块容器标示...

DIV CSS 布局定位 实例 菜单导航 详解

为什么要用Div Css可以简单的作如下解释: 当时创造WEB的那个人也发明了用TABLE布局,当TABLE布局泛滥之后,然后他说:我创造了WEB也毁了WEB,TABLE布局会给一个网...

CSS布局之定位详解(position)

vertical-align只作用于行内元素 实现文字垂直局中的方法: (1)display: table-cell;vertical-align: middle; (2) height:160...

CSS布局定位

前面讲了如何通过CSS来选取元素,现在来说说CSS如何实现布局定位。 从布局的角度来说,html元素可以分为两类:行级元素和块级元素。 行级元素,就是不会单独占一行的元素,在一行内可以有多个行级元...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:布局和定位
举报原因:
原因补充:

(最多只允许输入30个字)