Html定位基础

Html的布局是文档流模型,块元素独占一行,内联元素并列一行。

相对定位

  • position: relative
  • 相对于自己定位
  • 不脱离文档流,元素原有位置被保留

绝对定位

  • position: absolute
  • 相对于第一个有positionposition不为static的祖先元素定位
  • 脱离文档流,元素原有位置被放弃
  • 宽高可设值,不撑大父元素空间
  • 可视属性只影响自身空间与文档流空间的交集(详见抗拒opacity属性)
  • 高手常用margin替代absolute,详见css-相对绝对relativeabsolute定位系列(二) 要点如下
    • 将待定位元素inline-block
    • 待定位元素外面套一个div
    • 利用外套divmargin负值侵占其他元素
  • 轮播也可用margin实现
    • 轮播的原理就是通过marginabsolute的负值脱离本该显示的区域
    • margin的改变会产生更强的回流(reflow),性能劣于absolute
  • 抗拒opacity属性
    • 背景:opacity属性或IE的filter都会让子元素跟着透明,但我们不希望子元素文本也跟着透明
    • absolute的元素充当半透明背景层
    • 不希望透明的元素作为absolute元素的兄弟
    • 上述效果可换用CSS3的如下代码实现
        background-color: rgba(0, 0, 0, .25);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000);
  • 下拉导航
    • 一种是将abosolute的下拉列表作为relative的触发元素的子元素
    • 推荐的一种是abosolute元素置于body底部或不加载,通过触发元素的偏移值设定位置

浮动

  • 任何元素都能浮动
  • 浮动元素必会生成一个块级元素
  • 浮动元素脱离文档流,元素原有位置被放弃
  • 元素设置float属性后不再独占一行
  • 浮动块可以向左或向右移动,直到块边缘碰到包含它的框或另一个浮动块的边框

float属性

  • left向左浮动、right向右浮动、none不浮动、inherit继承父元素的float

与margin的联动

  • 假如A、B两元素想置于同一行,只需将A元素float,B元素在与A元素float同方向上,将margin设置为A元素的width,即B元素远离A元素占据的空间。即可使B元素假象浮动,且B元素不会因窗口收缩坍塌至下一行。

清除浮动

clear属性

  • none默认允许两边浮动,left不允许左边有浮动,right不允许右边有浮动,both两边不允许有浮动

详解

  • 清除浮动只影响使用清除的元素本身,不能影响其他元素

其他

  • 父级元素套overflow可以达到清除浮动的效果

    • overflow除了visible都会给子元素建立块级格式化(block formatting context)
    • auto, hiddenscroll都可以达到清除浮动效果
    • 不推荐用overflow替代clear

页面元素坐标和偏移 参考

clientX/clientY

  • 通过event事件对象的clientX/clientY属性获得事件发生时鼠标指针在客户区中的水平和垂直坐标

screenX/screenY

  • 通过event事件对象的screenX/screenY属性,可以获取鼠标事件发生时鼠标光标相对于整个电脑屏幕的坐标信息

pageX/pageY

  • 通过事件对象的pageX/pageY属性可以获得鼠标事件发生时鼠标光标相对于整个文档元素的坐标位置(包含滚动)
  • 在页面没有滚动的情况下,通常pageX/pageY的值与clientX/clientY的值相等
  • 页面有滚动的情况下,pageX/pageY大于clientX/clientY

layerX/layerY

  • 对于绝对定位(position:absolute)元素来说,layerX/layerY就将鼠标光标位置相对于元素本身的左上角定位
  • 对于相对定位(position:relative)元素来说,通常pageX/pageYlayerX/layerY的值是相同的

offsetLeft/offsetTop

  • 元素的偏移量(offsetLeft/offsetTop)是相对于它的直接父元素
  • 如果要想知道某个元素在页面上的偏移量,将这个元素的offsetLeft和offsetTop与其父元素的相同属性相加,如此循环至根元素,就可以得到一个基本准确的值
  • 如果有些div他的父元素是的话,那么也可以尝试getElementLeft()和getElementTop()方法,不出意外地话会返回跟offsetLeftoffsetTop相同的值
  • 所有这些偏移量都是只读的,而且每次访问的时候都需要重新计算,要注意性能问题

clientWidth/clientHeight

  • 元素的客户区大小就是指元素内容及其内边距所占空间的大小(滚动条占用空间及被滚动条隐藏的空间不计算在内)
  • clientWidth=width+padding(left、right)
  • clientHeight=height+padding(top、bottom)
  • offsetWidthoffsetHeight包含滚动条占用空间
    • 有些另类,`document.documentElement`元素上的`offsetWidth`与`clientWidth`一样,`offsetHeight`与`scrollHeight`一样

scrollWidth/scrollHeight/scrollLeft/scrollTop

  • 有些元素会自动添加滚动条,如,但是另外一些元素,则需要通过css的overflow属性进行设置才能滚动
  • 带有垂直滚动条的页面总高度是document.documentElement.scrollHeight,包含被滚动条隐藏的空间
  • 带有水平滚动条的页面总宽度是document.documentElement.scrollWidth,包含被滚动条隐藏的空间
  • scrollLeftscrollTop代表被滚动条隐藏的空间大小
  • 在确定文档的总高度时,必须取得scrollWidth、clientWidth和scrollHeight、clientHeight中的最大值,这样才能保证在跨浏览器的情况下取得较为准确的结果

window.scrollX/window.scrollY与window.pageXOffset/window.pageYOffset

  • window.scrollX/window.scrollY返回的是整个文档document在水平和竖直方向滚动了的距离
  • window.pageXOffset/window.pageYOffset相当于window.scrollX/window.scrollY的别名
  • 跨浏览器的情况下,尽量使用window.pageXOffset/window.pageYOffset比较好,代码示例如下:
    var x = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
var y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

window.innerHeight/window.innerWidth

  • window.innerHeight/window.innerWidth记录了视窗内文档元素的实际高度和宽度,包含滚动条

    • 页面滚动了不影响window.innerHeight/window.innerWidth
  • window.outerHeight/window.outerWidth记录了整个浏览器的实际高度和宽度
  • 如果页面中有frameset见如下代码:
    var intFrameHeight = window.innerHeight; // or

    var intFrameHeight = self.innerHeight; // will return the height of the frame viewport within the frameset

    var intFramesetHeight = parent.innerHeight; // will return the height of the viewport of the closest frameset

    var intOuterFramesetHeight = top.innerHeight; // will return the height of the viewport of the outermost frameset

getBoundingClientRect()

  • getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置
  • 特别注意right,bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离
  • 获取页面元素位置的代码示例
    var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

Html定位精要的更多相关文章

  1. 一步到位带你入门Selenium

    其实,关于这篇文章发布前还是有很多思考的,我是不想发布的,因为关于selenium的文章博客园里面有很多的介绍,写的详细的,也有写的不详细的,那么我的这篇文章的定位是基于selnium从开始到最后的框 ...

  2. Python之selenium自动化PART1

    本文适合有经验的测试童鞋 一.Selenium自动化测试环境搭建 1.cmd --- pip install selenium==2.53.0 (如果selenium后面不跟==,表示默认安装最新版本 ...

  3. CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除(网页优化)、CSS精灵图

    规避脱标   定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...

  4. Uint 7.文本和字体属性,background,精灵图和3种定位

    一. 文本属性 CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. <!DOCTYPE html> <htm ...

  5. 语义slam用于高精地图和高精定位的一些想法

    最近一直在考虑语义slam在自动驾驶和辅助驾驶中的用法,研究了一下视觉为主的高精度地图+高精定位的模式,特别是mobileye的REM. 秉承先建图再定位的思路,在服务器端(云端)建图,在车端定位. ...

  6. zz高精地图和定位在自动驾驶的应用

    本次分享聚焦于高精地图在自动驾驶中的应用,主要分为以下两部分: 1. 高精地图 High Definition Map 拓扑地图 Topological Map / Road Graph 3D栅格地图 ...

  7. EasyPR--开发详解(8)文字定位

    今天我们来介绍车牌定位中的一种新方法--文字定位方法(MSER),包括其主要设计思想与实现.接着我们会介绍一下EasyPR v1.5-beta版本中带来的几项改动. 一. 文字定位法 在EasyPR前 ...

  8. AEAI DP开发平台精要

    1 背景概述 相信很多了解数通畅联软件的人对AEAI DP应用开发平台并不陌生,笔者在入职第一天就开始接触AEAI DP,使用AEAI DP开发过AEAI WM.AEAI CRM以及中国XXXX管理系 ...

  9. sed实例精解--例说sed完整版

    原文地址:sed实例精解--例说sed完整版 作者:xiaozhenggang 最近在学习shell,怕学了后面忘了前面的就把学习和实验的过程记录下来了.这里是关于sed的,前面有三四篇分开的,现在都 ...

随机推荐

  1. Android Studio 导入百度地图jar和so的正确方式

    //这部分内容在百度地图的官方文档中写的比较模糊 //感觉在这种事情上浪费实际很不好,遂记录如下 //以下仅是方法之一 step1 下载sdk后解压,并把libs中的全部内容拷贝到app/libs目录 ...

  2. #研发中间件介绍#定时任务调度与管理JobCenter

    郑昀 最后更新于2014/11/11 关键词:定时任务.调度.监控报警.Job.crontab.Java 本文档适用人员:研发员工   没有JobCenter时我们要面对的:   电商业务链条很长,业 ...

  3. 不同环境下文件上传Uncaught SyntaxError: Unexpected end of input

    很奇怪的问题,相同的代码和相同的数据,在两台linux服务器上执行文件上传,一台正常上传,一台在ftl页面 报:Uncaught SyntaxError: Unexpected end of inpu ...

  4. android setDestinationInExternalPublicDir 下载到SD卡根目录

    一:setDestinationInExternalPublicDir(“Trinea”, “MeiLiShuo.apk”);表示设置下载地址为sd卡的Trinea文件夹,文件名为MeiLiShuo. ...

  5. 用keytool工具生成签名文件与获取摘要信息

    在Command命命令行模式下: 转到工作目录 执行下面命令: keytool -genkey -v -keystore debug.keystore 最后是生成的文件名,执行该命令后有很多内容要填写 ...

  6. win7+ubuntu双系统 重装win7后grub修复

    问题:之前安装的是win7+ubuntu双系统,重装win7后启动选项没有了,直接进入的是win7系统,无法进入ubuntu系统了. 解决办法:我们需要修复grub,将ubuntu系统重新挂载一下,具 ...

  7. 虚拟机装系统出现 ntldr is missing(NTLDR丢失)、无法正常开机、解决方法

    虚拟机(VMware Workstation或Hyper-V)装ghost版系统提示“ntldr is missing Press Ctrl+Alt+del to Resta 此方法对实体机.虚拟机安 ...

  8. JAVA JVM虚拟机选项:Xms Xmx PermSize MaxPermSize 区别

    Xms : 是指设定程序启动时占用内存大小.一般该值设置大的会使程序启动快,但是可能会使本机暂时变慢. Xmx : 是指设定程序运行期间最大可占用的内存大小,如果程序运行需要占用更多的内存,超出这个 ...

  9. 【Windows编程】系列第四篇:使用Unicode编程

    上一篇我们学习了Windows编程的文本及字体输出,在以上几篇的实例中也出现了一些带有“TEXT”的Windows宏定义,有朋友留言想了解一些ANSI和Unicode编程方面的内容,本章就来了解和学习 ...

  10. [转]ASP.NET Core 中间件详解及项目实战

    本文转自:http://www.cnblogs.com/savorboard/p/5586229.html 前言 在上篇文章主要介绍了DotNetCore项目状况,本篇文章是我们在开发自己的项目中实际 ...