Html定位精要

时间：2022-05-17 00:24:55

Html定位基础

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

相对定位

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

绝对定位

  • position: absolute
  • 相对于第一个有position且position不为static的祖先元素定位
  • 脱离文档流，元素原有位置被放弃
  • 宽高可设值，不撑大父元素空间
  • 可视属性只影响自身空间与文档流空间的交集(详见抗拒opacity属性)
  • 高手常用margin替代absolute，详见css-相对绝对relativeabsolute定位系列(二) 要点如下
    • 将待定位元素inline-block
    • 待定位元素外面套一个div
    • 利用外套div的margin负值侵占其他元素
  • 轮播也可用margin实现
    • 轮播的原理就是通过margin或absolute的负值脱离本该显示的区域
    • 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, hidden，scroll都可以达到清除浮动效果
    • 不推荐用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/pageY和layerX/layerY的值是相同的

offsetLeft/offsetTop

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

clientWidth/clientHeight

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

scrollWidth/scrollHeight/scrollLeft/scrollTop

  • 有些元素会自动添加滚动条，如,但是另外一些元素，则需要通过css的overflow属性进行设置才能滚动
  • 带有垂直滚动条的页面总高度是document.documentElement.scrollHeight，包含被滚动条隐藏的空间
  • 带有水平滚动条的页面总宽度是document.documentElement.scrollWidth，包含被滚动条隐藏的空间
  • scrollLeft与scrollTop代表被滚动条隐藏的空间大小
  • 在确定文档的总高度时，必须取得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;

相关文章