使用position设置经典的网站前端结构
能脱离文档流的设置：
- 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设置经典的网站前端结构的更多相关文章
- 使用float设置经典的网站前端结构
float浮动是能使得标签脱离文档流,此处脱离文档流,是指此便签后面的,没有脱离文档流的标签将此标签当作透明,按正常来布局. float脱离文档流,是受到父级范围限制的,在父级范围内脱离文档流,脱离文 ...
- 使用float设置经典的网站前端结构(深入探讨)
.要是DIV的子元素宽度大于它自己的宽度,不管子元素有没有脱离文档流,子元素会在横向向右溢出. 关于高度:1.要是DIV的高度没有设定,其高度受“没有脱离文档流”的子元素影响.以下是DIV宽度为0的情 ...
- 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践
目 录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...
- 网站前端优化技术 BigPipe分块处理技术
前端优化已经到极致了么?业务还在为看到不停的而揪心么?还在为2秒率不达标苦恼么? 好吧我知道答案,大家一如既往的烦恼中... 那么接下来我们看看,facebook,淘宝,人人网,一淘都是怎么做前端优化 ...
- 为什么大型网站前端使用PHP后台逻辑用Java
前两周参加完 ThinkInLamp 的 PHP 架构师大会,听鸟哥一上午的分享,感慨很多,PHP 业界虽然方向不明荒废了两三年的时间,终究还是又重新崛起了. 其实包括 Java 的重启问题,现在也已 ...
- 移动平台3G手机网站前端开发布局技巧
本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许 ...
- 移动平台3G手机网站前端开发布局技巧汇总
移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博 发布:2011-05-10 09:11 分类:移动开发 阅读:120,618 views 7条评论 您或许正在 ...
- [转]为什么大型网站前端使用 PHP 后台逻辑用 Java？
最近纠结了一下,如果开发一个大型的网站,我到底应该使用php还是jsp,后台到底使用php还是用java,我的选择要么是php要么是java,因为我喜欢linux.unix,当然window平台也必须 ...
- 通过浏览器F12开发工具快速获取别的网站前端代码的方法
通过浏览器F12开发工具快速获取别的网站前端代码的方法 说明:直接另存为网页是比较老的做法,会有很多没用的东西下载下来.通过F12开发工具,sources获取到的是比较好的,有目录结构的源文件.
随机推荐
- python——pyinstaller踩的坑 UnicodeDecodeError
程序本身运行没任何毛病,奈何用pyinstaller -w xx.py的时候提示——UnicodeDecodeError: 'ascii' codec can't decode byte 0xb3 i ...
- Java 从入门到进阶之路（七）
在之前的文章中我们介绍了一下 java 中的对象和类,接下来我们来看一下 Java 中的方法重载. 在显示生活中,我们肯定会遇到这样一个问题,那就是我们再商场买东西的时候在付账时的选择.如下 A:在收 ...
- Mongoose: aggregate聚合 $group使用说明
aggregate聚合是通过管道操作实现的.聚合管道里的每一步输出,都会作为下一步的输入,每一步在输入文档执行完操作后生成输出文档. 聚合管道: $project 修改输入文档的结构.可以用来重命名 ...
- 服务器配置https协议，三种免费的方法
最近想搞一个网站玩玩,发布网站用https协议已经是大势所趋了.例如微信小程序,不使用https协议根本不让接入.所以,分享一下我尝试过的三种方法. 1.Linux自签(OPENSSL生成SSL自签证 ...
- 工业搬运机器人(AGV)为什么要选择视觉导航
在智能制造和仓储物流领域,搬运机器人的需求量在逐年上升.机器人(AGV)的种类千差万别,如何选择成为需求方头痛的问题. 本文将从客户关心的多个方面,对市面上的常见的工业级导航方案做一个比较. 搬运机器 ...
- 神奇的Java僵尸(defunct)进程问题排查过程
现象描述 大概1个月多以前 在启动脚本中增加了tail -f 用来启动后追踪日志判断是否启动成功 后发现无法执行shutdown.sh(卡住 利用curl) 然后无奈使用kill -9 但通过ps - ...
- 如何使用Externalizable接口自定义Java中的序列化
Java序列化过程的缺点 我们都知道如何使用Serializable接口序列化/反序列化一个对象,并且如何使用writeObject 和readObject方法自定义序列化过程. 但是这些自定义还不够 ...
- python程序编译成exe文件
最近越来越喜欢使用python写工具.使用的时候,发现程序内部成员python安装目录常常不同,如果用bat双击执行,常常需要修改从svn上down下来的bat文件中python.exe的路径.而给策 ...
- 【RocketMQ源码学习】- 1. 入门
为什么读RocketMQ 消息队列在互联网应用中使用较为广泛,学习她可以让我门更加了解使用技术的工作原理 透过学习她的源码,拓宽认知 RocketMQ经历了阿里双十一 有哪些名词 Producer 消 ...
- Tensorflow-gpu在windows10上的安装（anaconda)
文档来源转载: http://blog.csdn.net/u010099080/article/details/53418159 http://blog.nitishmutha.com/tensorf ...