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. Redis 支持的5种数据结构

    redis的崛起绝非偶然,它确实有自己的新东西在里面,它不像Memcached,只能将数据存储在内存中,它提供了持久化机制和数据同步,避免了宕机后的雪崩的问题,即服务器出现问题后,内存中保留的原始数据 ...

  2. PHP命名规范

    以下文字全部摘自<PHP从入门到精通>这本书,谨以此作为标准. 就一般约定而言,类.函数和变量的名字应该是能够让代码阅读者能够容易地知道这些代码的作用,应该避免使用凌磨两可的命名. 1. ...

  3. 在Windows上安装虚拟机详细图文教程

    用虚拟机来安装最新的软件,安装最新的系统等等比较保险,可以避免安装不顺利影响自己原来的系统和应用,想尝鲜又担心自己完全更换系统不适应的朋友可以尝试. 虚拟机下载:https://yunpan.cn/c ...

  4. Ubuntu14-04 MySQL-5.6.21通用二进制安装

    #卸载mysql /etc/init.d/mysqld stop &> /dev/null killall mysqld &> /dev/null sudo rm -rf ...

  5. 令人崩溃的@requestBody乱码一例

    这个问题真是让我心力憔悴了...在客户现场对接就是乱码,StringHttpConverter怎么配置都不行... 场景其实很简单:客户那头post一个http请求,包体是json字符串,我这头spr ...

  6. 【Windows编程】系列第八篇:通用对话框

    上一篇我们学习了菜单的基本编程,本篇来了解一下通用对话框的使用.Windows系统之所以是目前最流行的桌面系统,也是因为Windows有一套标准化,统一友好的交互界面,比如菜单.工具栏.状态栏以及各个 ...

  7. 【小白的CFD之旅】14 实例反思

    小白将敲门实例认真做了三遍,终于可以脱离文档直接将实例从头到尾的完成了.不过在做实例的过程中,小白 还是发现了不少的问题. 这些问题包括: 实例是从导入网格文件开始的,这网格是什么鬼? 在Models ...

  8. C# 扩展方法集

    语法注意点 可以使用扩展方法来扩展类或接口. 不能重写扩展方法. 扩展方法只能在非嵌套.非泛型静态类内部定义. 扩展方法必须定义在静态类中. 扩展方法的第一个参数的类型用于指定被扩展的类型,它限制该扩 ...

  9. request属性 request.getAttribute()

    一.request.getParameter() 和request.getAttribute() 区别 (1)request.getParameter()取得是通过容器的实现来取得通过类似post,g ...

  10. 3172: [Tjoi2013]单词

    3172: [Tjoi2013]单词 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 3246  Solved: 1565[Submit][Status ...