能脱离文档流的设置：

  • 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. js数组和表的基本操作

    数组 var v = [3, 6, "hello"]; console.log(v.length); 数组的遍历1 function ss() { for (var i = 0; ...

  2. 详述Python序列化

    一.前言 1. 现实需求 每种编程语言都有各自的数据类型,其中面向对象的编程语言还允许开发者自定义数据类型(如:自定义类),Python也是一样.很多时候我们会有这样的需求: 把内存中的各种数据类型的 ...

  3. 时间复杂度————被list.insert坑了

    今天被一个很简单的坑到了,还想了很长时间,insert 函数,真的知道它内部执行的操作吗? 开始其实是在看一本算法的书,书里面给了两段工作内容差不多的伪代码 第一段如下: data = [] whil ...

  4. Python爬虫工程师必学——App数据抓取实战 ✌✌

    Python爬虫工程师必学——App数据抓取实战 (一个人学习或许会很枯燥,但是寻找更多志同道合的朋友一起,学习将会变得更加有意义✌✌) 爬虫分为几大方向,WEB网页数据抓取.APP数据抓取.软件系统 ...

  5. Spring源码分析（一）预备篇=》基本知识储备

    一.Spring框架整体,各个部分 .Spring Core Container Core 和 Beans 模块是框架的基础部分,提供 IoC (控制反转)和依赖注入特性. 这里的基础 概念是 Bea ...

  6. jquery的返回顶端的功能实现

    页面很长的时候,读到最下面,需要返回顶端,则在页面最下面布局一个返回顶部的图标很有用. 具体功能是,jquey控制,向下滚动出现返回顶部图片,若滚动返回顶部或点回顶部,则图标消失. 实现效果如下图:

  7. 网站开发常用Sql语句

    维护网站,经常操作数据库,使用sql语句可以达到事半功倍的效果.比如,把所有密码为空的教师初始设成id一致,sql语句比手动快万倍. 下面介绍数据库开发中经常用到的一些sql语句: 一 建库操作 1. ...

  8. 深入了解一下HTTP缓存机制

    HTTP 缓存机制作为 web 性能优化的重要手段,是Web 开发知识体系库中的一个基础环节,但是对于很多学习者来说,仅仅只是知道浏览器会对请求的静态文件进行缓存,但是为什么被缓存,缓存是怎样生效的, ...

  9. [网络流 24 题] luoguP4016 负载平衡问题

    [返回网络流 24 题索引] 题目描述 有成环状的 nnn 堆纸牌,现将一张纸牌移动到其邻堆称为一次操作.求使得所有堆纸牌数相等的最少移动次数. Solution 4016\text{Solution ...

  10. 原生无缝Banner轮播图

    话不多说,先展示效果图.由于录制工具,稍显卡顿,实际是流畅的.可以看到实现了无缝轮播,鼠标悬停,点击左右上下按钮切换Banner的功能,如图1所示. 图1 原生无缝banner效果展示 以我这个轮播图 ...