能脱离文档流的设置：

  • 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. pyinstaller 打包exe程序读不到配置文件No such file

    挺久没更新博客的,一来之前是觉得才疏学浅,记录下来的太简单没人看.二来时间上不是很充裕(不是借口,有时间打游戏,没时间总结) 偶然有一次发现同事在搜索解决问题的时候正在看我博客的解决思路,很奇妙的感觉 ...

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

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

  3. opencv之为图像添加边界

    我们经常会有对图像边缘做扩展的需求.比如 希望卷积后得到的矩阵大小不变 希望改变图像大小,但是不改变宽高比 opencv实现 opencv中使用copyMakeBorder()来完成这一功能 api ...

  4. Redis AOF 持久化详解

    Redis 是一种内存数据库,将数据保存在内存中,读写效率要比传统的将数据保存在磁盘上的数据库要快很多.但是一旦进程退出,Redis 的数据就会丢失. 为了解决这个问题,Redis 提供了 RDB 和 ...

  5. IDEA 学习笔记之 Java项目开发深入学习（2）

    Java项目开发深入学习(2): 查找变量被用到的地方 编译当前文件 增加变量watch 注意:我使用了keymap (eclipse模板),所以很多快捷键和eclipse一样. F5单步调试进入函数 ...

  6. axios对put操作对Android的支持之坑

    ### 前段时间我做的一个手机端H5项目,需要发送一个put请求.因为ajax现在用的人有点少了,而且公司里边都是用的axios,所以我也是用的是axios做的请求. ### 再开发的时候测试都没有问 ...

  7. 服务器配置https协议，三种免费的方法

    最近想搞一个网站玩玩,发布网站用https协议已经是大势所趋了.例如微信小程序,不使用https协议根本不让接入.所以,分享一下我尝试过的三种方法. 1.Linux自签(OPENSSL生成SSL自签证 ...

  8. 网络下载器 Internet Download Manager v6.35.5 绿色便携版

    Internet Download Manager,简称 IDM,是国外的一款优秀网络下载工具.目前凭借着下载计算的速度优势在外媒网站中均受好评,现在已被多数国人熟知.Internet Downloa ...

  9. 深入了解opacity和rgba

    1. rgba 首先它是一个属性值,语法为rgba(r,g,b,a) - r为红色值, 正整数 | 百分数 - g为绿色值,正整数 | 百分数 - b为蓝色值,正整数 | 百分数 - a为alpha( ...

  10. Scanner接收字符

    char num = input.next().charAt(0); //截取指定位置的字符,下标从0开始 System.out.println("helloworld".char ...