能脱离文档流的设置：

  • 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. 设置Activity全屏的方法：

    1)代码隐藏ActionBar 在Activity的onCreate方法中调用getActionBar.hide();即可 2)通过requestWindowFeature设置 requestWind ...

  2. 点集配准技术（ICP、RPM、KC、CPD）

    在计算机视觉和模式识别中,点集配准技术是查找将两个点集对齐的空间变换过程.寻找这种变换的目的主要包括:1.将多个数据集合并为一个全局统一的模型:2.将未知的数据集映射到已知的数据集上以识别其特征或估计 ...

  3. python requests-toolbelt 生成上传multipart/form-data格式数据

    需求背景 想使用requests做一个自动上传的功能,发现这里问题挺多的,就记录一下. 如上图上传功能,一般分为input标签,非input标签.我这里也不管什么标签,直接抓包看数据流. Conten ...

  4. javascript生成规定范围的随机整数

    Math.Random()函数能够返回带正号的double值,该值大于等于0.0且小于1.0,即取值范围是[0.0,1.0)的左闭右开区间,返回值是一个伪随机选择的数,在该范围内(近似)均匀分布. 我 ...

  5. USART_FLAG_TXE和USART_FLAG_TC

    在串口数据发送操作中,代码一般是这样写的: void USART_SendByte(USART_TypeDef* USARTx, uint8_t Data) { while(USART_GetFlag ...

  6. 绕过CDN方法整理

    来自文章链接:https://zhuanlan.zhihu.com/p/33440472 0x01 判断ip是否为网站真实ip 1. Nslookup: Win下使用nslookup命令进行查询,若返 ...

  7. 《疯狂java-突破程序员基本功的16课 》笔记总结

    本人最近读完<疯狂java-突破程序员基本功的16课 >读完后,感觉对java基础又有了新的认识,在这里总结一下:一.数组与内存控制 1.1 数组初始化     java语言的数组是静态的 ...

  8. Kubernetes的Service运行原理

    一.为什么Servcie能定位到Pod 因为Pod的IP是不固定的,所以Kubernetes需要Service,除此之外它还可以在多个Pod间负载均衡 Service的访问入口,其实是宿主机的kube ...

  9. Python编程系列---获取请求报文行中的URL的几种方法总结

    在浏览器访问web服务器的时候,服务器收到的是一个请求报文,大概GET请求的格式大概如下: 先随便拿到一个请求报文,蓝色即为我们要获取的 GET  /index.html  HTTP/1.1  Hos ...

  10. Arduino学习笔记⑥ 硬件串口通信

    1.前言     Ardunio与计算机通信最常用的方式就是串口通信.在Arduino控制器上,串口都是位于Rx和Tx两个引脚,Arduino的USB口通过一个转换芯片与这两个串口引脚连接.该转换芯片 ...