布局和定位

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

定位布局的一些总结

元素的position属性中,fixed和absolute和相似,也很不一样。相似之处在于它们都是被正常流删除的,不同之处在于fixed的位置是相对于整个视窗的,而absolute是相对于某父元素的。...
  • jiuyuegui
  • jiuyuegui
  • 2014年09月01日 21:19
  • 431

详解定位以及布局冲突问题

不管是float浮动属性还是position都会涉及到脱离文档流导致网页布局发生改变。 如下代码:(为没有position,以及float脱离文档流操作的div盒子结构) Document...
  • qq_18661257
  • qq_18661257
  • 2015年10月14日 20:00
  • 526

利用DIV的浮动与定位进行网页布局

利用DIV的浮动与定位进行网页布局   浮动 CSS允许任何元素浮动float,不论是图像,段落还是列表。无论先前元素是什么状态,浮动后都成为块级元素。浮动元素的宽度缺省为auto。 ...
  • qq_24861509
  • qq_24861509
  • 2015年09月30日 23:56
  • 1577

CSS中几种控制页面布局的定位机制(相对定位与绝对定位)

CSS中几种控制页面布局的定位机制对于web的初学者来说,CSS中的几种定位方式经常让人摸不着头脑,从而达不到想要的页面布局效果,我去年学习web编程的时候就对这个一知半解,今天,回过头来再次学习we...
  • duang0626
  • duang0626
  • 2017年07月13日 22:17
  • 477

html布局:定位position使用技巧

布局是html中非常重要的一部分,而定位在页面布局中也是使用频率很高的方法,今天我们就说说定位在布局中的使用技巧和注意事项。...
  • Victor_Wei_H5
  • Victor_Wei_H5
  • 2016年11月15日 23:52
  • 6021

CSS笔记(布局与定位)

CSS布局与定位
  • qq_38801354
  • qq_38801354
  • 2017年07月08日 13:09
  • 212

绝对定位实现左右上下自适应布局

绝对定位实现单栏左右自适应上下自适应布局。这里的左右上下自适应布局是依赖于绝对定位的绝对定位的可视化格式模型的。下面就要介绍绝对定位在水平方向和垂直方向上各个参数之间的关系。绝对定位元素的包含块? ...
  • wmaoshu
  • wmaoshu
  • 2016年12月27日 16:57
  • 1529

CSS基础知识-五(CSS定位、左右布局方法)

一、CSS定位 1、Float:left / right /none;------左浮动/右浮动/无 2、Position:absolute;----绝对定位 3、Position:relative;...
  • u012054869
  • u012054869
  • 2016年05月31日 20:12
  • 1265

阿里前端笔试题看 CSS布局与定位---实现2列自适应布局的几种方法

前端工程师三把斧,HTML,CSS,JavaScript 。其中css看似简单,其实真的要布局起来,仍然需要技巧。BAT中百度和阿里还是比较看重css布局能力,这次就以阿里巴巴2016年前端工程师笔试...
  • Cinderella_hou
  • Cinderella_hou
  • 2016年08月08日 20:22
  • 1629

PyQt5:布局管理器:绝对定位方式(11)

学习《PyQt4入门指南 PDF中文版.pdf 》笔记 布局管理器是编程中重要的一部分。所谓布局管理是指我们在窗口中安排部件位置的方法。布局管理有两种工作方式:绝对定位方式(absolute...
  • c3060911030
  • c3060911030
  • 2016年06月01日 00:18
  • 911
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:布局和定位
举报原因:
原因补充:

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