能脱离文档流的设置：

  • 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. 【Java】Java 单文件下载及重命名

    代码(仅供参考): /* * 另存为 */ @RequestMapping("/saveAs.do") public @ResponseBody void saveAs(Strin ...

  2. 【Java基础】Java中的语法糖

    目录 Java中的语法糖 switch对String和枚举类的支持 对泛型的支持 包装类型的自动装箱和拆箱 变长方法参数 枚举 内部类 条件编译 断言 数值字面量 for-each try-with- ...

  3. 利用npm安装/删除/查看包信息

    查看远程服务器上的包的版本信息 npm view webpack version //查看npm服务器上包webpack的最新版本 npm view webpack versions //查看服务器上 ...

  4. Linux 命令之 mkdir

    mkdir的作用是创建一个目录,可以理解为 make directory 的缩写. 创建目录 mkdir dir_name 在当前目录创建一个名为 dir_name 的目录. 同时创建多级目录 假设现 ...

  5. Flannel的VXLAN模式工作原理

    跨主机通信的一个解决方案是Flannel,由CoreOS推出,最早支持的是UDP模式,但是因为性能太差被淘汰了, 过时的UDP模式 相比两台宿主机直接通信,多出了flanneld的处理过程,发出IP包 ...

  6. Nmon安装

    下载对应系统的nomn工具(我用centos6.5_64位下载的是nmon_linux_14i.tar.gz) mkdir /nmon cd /nmon 导入nmon的tar.gz包解压 tar -z ...

  7. LeetCode初级算法--链表01：反转链表

    LeetCode初级算法--链表01:反转链表 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn.net/ ...

  8. vue —— Toast 内 加变量

    toast正常使用: 在页面内引入: import { Toast } from 'mint-ui' 使用的时候,简单到飞起: Toast('领取成功'); 而如果想在toast中加入变量,也很简单: ...

  9. .htaccess文件上传利用

    一般.htaccess可以用来留后门和针对黑名单绕过 创建一个txt写入 AddType application/x-httpd-php .png 打开另存为 保存类型为所有文件 上传.htacces ...

  10. CodeForces - 1214D B2. Books Exchange (hard version)

    题目链接:http://codeforces.com/problemset/problem/1249/B2 思路:用并查集模拟链表,把关系串联起来,如果成环,则满足题意.之后再用并查集合并一个链,一个 ...