能脱离文档流的设置：

  • float:left/right
  • position:absolute; 绝对定位
  • position:fixed; 固定定位

//搞清楚position的属性值的意思就容易明白

使用position布局能使得标签脱离文档流（但是属性值为relative除外），这个脱离文档流是不会受到父级标签约束的，除非：

若某个绝对定位元素的容器也被定位过，那么该元素指定的top和left值将不会基于文档的根元素html（也就是浏览器窗口的左上角）计算，而是会基于其容器的左上角计算这个偏移量。换句话说，也就是：被定位过的容器将扮演其中所有元素绝对定位起始点的角色。

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  #div1 {
   
  width: 200px;
  position: absolute;
  height: 600px;
  background: darksalmon;
  top: 10px;
  left: 5px;
  }
   
  #div2 {
  width: 700px;
  height: 1200px;
  background: yellowgreen;
  position: absolute;
  left: 220px;
  top: 10px;
  }
   
  #div3 {
  width: 300px;
  height: 600px;
  background: hotpink;
  position: absolute;
  left: 930px;
  top: 10px;
  }
   
  #div5 {
  background: chartreuse;
  position:relative;
  height: 620px;
  width: 1240px;
  top: 0px;
  left: 0px;;
  }
   
  #head {
  width: 1240px;
  height: 150px;
  background: coral;;
  }
   
  #footer {
  width: 1240px;
  height: 150px;
  float: left;
  background: darkturquoise;
   
  }
  </style>
  </head>
  <body>
   
  <div id="head">head</div>
  <!--div5的position设置为relative，意思就是：div5还是在流当中，遵从由上到下排列，只是设了top和left后，就往右或下方挪-->
  <!--div5的position设置为absolute，那么div5就脱离了文档流，可以不理head的位置，随意按top和left来相对浏览器摆放，除非div5又被一个设了position的div包裹-->
  <div id="div5">
  <!--div1,div2,div3设了position: absolute，那么就脱离了文档流，如果div5不设置position，那么div123的top和left就会相对于浏览器显示的地方-->
  <!--如果div5设置了position，无论position设置了什么,那么div1,2,3的top和left就相对于div5-->
  <div id="div1">B</div>
  <div id="div2">A</div>
  <div id="div3">C</div>
  </div>
  <div id="footer"></div>
   
  </body>
  </html>

使用position设置经典的网站前端结构的更多相关文章

  1. 使用float设置经典的网站前端结构

    float浮动是能使得标签脱离文档流,此处脱离文档流,是指此便签后面的,没有脱离文档流的标签将此标签当作透明,按正常来布局. float脱离文档流,是受到父级范围限制的,在父级范围内脱离文档流,脱离文 ...

  2. 使用float设置经典的网站前端结构(深入探讨)

    .要是DIV的子元素宽度大于它自己的宽度,不管子元素有没有脱离文档流,子元素会在横向向右溢出. 关于高度:1.要是DIV的高度没有设定,其高度受“没有脱离文档流”的子元素影响.以下是DIV宽度为0的情 ...

  3. 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践

    目   录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...

  4. 网站前端优化技术 BigPipe分块处理技术

    前端优化已经到极致了么?业务还在为看到不停的而揪心么?还在为2秒率不达标苦恼么? 好吧我知道答案,大家一如既往的烦恼中... 那么接下来我们看看,facebook,淘宝,人人网,一淘都是怎么做前端优化 ...

  5. 为什么大型网站前端使用PHP后台逻辑用Java

    前两周参加完 ThinkInLamp 的 PHP 架构师大会,听鸟哥一上午的分享,感慨很多,PHP 业界虽然方向不明荒废了两三年的时间,终究还是又重新崛起了. 其实包括 Java 的重启问题,现在也已 ...

  6. 移动平台3G手机网站前端开发布局技巧

    本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许 ...

  7. 移动平台3G手机网站前端开发布局技巧汇总

    移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博   发布:2011-05-10 09:11   分类:移动开发   阅读:120,618 views   7条评论     您或许正在 ...

  8. [转]为什么大型网站前端使用 PHP 后台逻辑用 Java？

    最近纠结了一下,如果开发一个大型的网站,我到底应该使用php还是jsp,后台到底使用php还是用java,我的选择要么是php要么是java,因为我喜欢linux.unix,当然window平台也必须 ...

  9. 通过浏览器F12开发工具快速获取别的网站前端代码的方法

    通过浏览器F12开发工具快速获取别的网站前端代码的方法 说明:直接另存为网页是比较老的做法,会有很多没用的东西下载下来.通过F12开发工具,sources获取到的是比较好的,有目录结构的源文件.

随机推荐

  1. 向net core 3.0进击——April.WebApi从2.2爬到3.0

    目录 前言 升级之路 测试 小结 前言 在之前对Swagger的变化做了调整后,就开始想着要不把之前的工程升级得了,这样就还是个demo工程,来做各种测试(当然还是因为懒),这就有了今天这个比较折腾的 ...

  2. 斐波那契数列n项的值。（递归和非递归算法Golang实现）

    递归实现: func f(num int) int { if num == 1 || num == 2 { return 1 } return f(num-1) + f(num-2) } 非递归实现: ...

  3. 使用真机导致Androidstudio打印不出log

    针对真机打印不出log这个问题,我具体的解决方案是这样: 1.你要确保你的Android studio中的菜单栏 ,Tools → Android → Enable ADB Integration这个 ...

  4. MYSQL SQL语句 之 select

    select语句在数据库操作中是操作频率最高的语句,使用方式也是多种多样,它的基本功能是:从表中选取数据,结果存储在一个结果集中.可以联合where,and,or,Order By,distinct, ...

  5. Switch-case语句的应用

    /** switch语句有关规则    • switch(表达式)中表达式的值必须是下述几种类型之一:byte,short, char,int,枚举 (jdk 5.0),String (jdk 7.0 ...

  6. HTTP中get和post

    HTTP中get和post的区别 GET - 从指定的资源请求数据. POST - 向指定的资源提交要被处理的数据 GET POST 后退/刷新 无害的 数据会被重新提交 书签 可收藏为书签 不可收藏 ...

  7. JavaScript 编译器-Babel

    Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行.这意味着,你可以现在就用ES6.ES7编写程序,而不用担心现有环境是否支持. 一.全局安装babel工具 在保证n ...

  8. [BZOJ3550] [Sdoi2014]数数

    Description 我们称一个正整数N是幸运数,当且仅当它的十进制表示中不包含数字串集合S中任意一个元素作为其子串.例如当S=(22,333,0233)时,233是幸运数,2333.20233.3 ...

  9. linux::jsoncpp库

    下载库:http://sourceforge.net/projects/jsoncpp/files/ tar -zxvf jsoncpp-src- -C jsoncpp () 安装 scons $ s ...

  10. 两分钟让你明白Go中如何继承

    最近在重构代码的时候,抽象了大量的接口.也使用这些抽象的接口做了很多伪继承的操作,极大的减少了代码冗余,同时也增加了代码的可读性. 然后随便搜了一下关于Go继承的文章,发现有的文章的代码量过多,并且代 ...