节课，我们学习如何让元素的宽度和高度在容器里自适应。

什么是宽高自适应呢？

页面里有两个 div，开始的时候宽度都是 800px，当我们将浏览器窗口的宽度拖动到小于 800px 的时候，我们发现：上面的 div 宽度固定，一部分被隐藏在屏幕外；下面 div 的宽度会自动适应 屏幕宽度缩小 的变化。

我们把这种元素的宽或高，能够随着屏幕的宽高变化而变化的能力，叫做宽高自适应。

下面，我们就通过代码来实现元素的宽高自适应。

创建文件 adaptive.html 文件和 adaptive-style.css 文件。在 html 里构建基本代码，引入外部样式。

在 css 文件里定义通用选择器，声明样式 box-sizing: border-box，margin: 0，padding: 0，定义所有元素的盒模型为 border-box，并去除浏览器默认的内填充和外边距。

CSS
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

再定义选择器：html, body，声明样式：height: 100%。这是我们以前熟知的样式定义，目的是让 body 的高度撑满整个屏幕。为了使效果更明显，我们给 body 添加一个边框。

CSS
html, body {
  height: 100%;
}

body {
  border: 3px solid #ccc;
}

在浏览器里打开页面，当我们上下缩放浏览器窗口时，发现 body 的高度自适应窗口高度的变化。再举个例子：

回到 html，添加元素 div，定义类属性 box。

回到 css，定义选择器 .box，声明样式 width: 800px，height: 50px，margin: auto，border: 6px solid #73AD21。

CSS
.box {
  width: 800px;
  height: 50px;
  margin: auto;
  border: 6px solid #73AD21;
}

回到浏览器，我们看，容器水平居中，这是因为 margin: auto 样式会使外边距均分水平方向剩余的空间，这个知识我们前面已经学过了。

当我们水平拖拽浏览器窗口时，发现容器一直位于页面中间。可当浏览器窗口宽度小于容器宽度时，容器超出了 body，出现了水平滚动条。

回到 css，将 box 的 width 修改为 50%。

CSS
.box {
  width: 50%;
}

再看一下效果，无论我们怎么拖拽窗口，容器的宽度一直是 body 宽度的一半，做到了宽度自适应。

可见，将 width 和 height 的值设置为 % （读作百分比），可以实现元素的宽高自适应。

回到 css，我们再换个方法实现宽高自适应。修改 box 的 width 为 100%，height 也为 100%。

此时，容器会铺满整个body，随着窗口的缩放而缩放。能不能使容器宽高缩放到一个固定的大小，就不再缩放了呢？

回到 css，给 box 添加样式 max-width: 800px。max-width，顾名思义，最大宽度为 800px。意思是，即使给容器定义了 100% 的宽度值，它最大的缩放宽度也不能超过 800px。

效果显示，容器横向不再铺满整个屏幕了。缩小容器宽度，当低于 800px 时，容器仍然可以自适应宽度。

同理，也可以添加一个 max-height: 800px，定义最大伸缩高度。

这样，缩放窗口时，容器就只在 800 x 800 的空间内缩放了。

当然，也可以通过 min-width 和 min-height 来定义容器缩放的最小值。比如都设置为 600px。

我们看，容器随着窗口缩小到 600 x 600，就不再缩小了。

CSS
.box {
  max-width: 800px;
  max-height: 800px;
  min-width: 600px;
  min-height: 600px;
}

可见，通过 max-width，max-height，min-width，min-height 可以设置元素宽高自适应的临界值。

SS 禁止浏览器滚动条的方法(转)

1、完全隐藏 在<boby>里加入scroll="no", 可隐藏滚动条；

<boby scroll="no">

这个我用的时候完全没效果, 不知道是什么原因! 不过好多人说这么用可以, 大概是用的位置不一样吧

2、在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时, 不显示滚动条；反之, 则显示:

<boby scroll="auto">

3、样式表方法 在<boby>里加入style="overflow-x:hidden", 可隐藏水平滚动条；加入style="overflow-y:hidden", 可隐藏垂直滚动条。

被包含页面里加入 <style> html { overflow-x:hidden; } </style> 有一段解释是这样说的：body{ overflow-x:hidden; }在标准 DTD 下是不可以的

我的问题是用这段代码解决的body{overflow-y:hidden; }

4、另一种方法

<style type="text/css"> html { overflow-x:hidden; overflow-y:hidden; } </style>

5、在用ie6浏览有框架的xhtml页面的时候, 默认会水平和垂直滚动条会一起出现, 这是ie6的一个bug, 在firefox上是正常的, 出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷.

对于这个bug一般有3种解决方案，

方法1: 代码：

html { overflow-y: scroll; }

原理：强制显示ie的垂直滚动条，而忽略水平滚动条 优点：完全解决了这个问题, 允许你保持完整的XHTML doctype.

缺点：即使页面不需要垂直滚动条的时候也会出现垂直滚动条。

方法2: 代码：

html { overflow-x: hidden; overflow-y: auto; }

原理：隐藏横向滚动，垂直滚动根据内容自适应

优点：在视觉上解决了这个问题.在不必要的时候, 未强制垂直滚动条出现.

缺点：只是隐藏了水平滚动条，如果页面真正需要水平滚动条的时候， 屏幕以外的内容会因为用户无法水平滚动，而看不到。

方法3: 代码：

body { margin-right: -15px; margin-bottom: -15px; }

原理：这会在margin的水平和垂直方向上添加一个负值, IE添加了该精确数值后, 便会去除对滚动条的需求假象.

优点：在视觉上解决了这个问题, 垂直滚动根据内容自适应

缺点：由于"人为创建"了15px的外边距(margin), 所以无法使用该填充过的屏幕区域

家好，今天我们来聊一聊前端开发中一个常见但又非常实用的小技巧：如何获取 HTML 元素相对于浏览器窗口的位置。不管你是新手还是有经验的开发者，这个技巧在处理布局调整、动画效果或滚动事件时都能派上大用场。接下来，我们一起来看看几种获取元素位置的方法吧！

使用getBoundingClientRect方法

getBoundingClientRect 方法可以获取元素相对于视口（viewport）的大小和位置。

例如，假设我们有以下 HTML 代码：

<div>
  你好，世界
</div>

我们可以通过以下 JavaScript 代码获取这个 div 元素的位置：

const div=document.querySelector('div');
const rect=div.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

这里，我们首先用 querySelector 获取 div 元素，然后调用 getBoundingClientRect 方法获取元素的位置和大小。返回的 rect 对象包含以下属性：

• left 和 top：元素左上角的 x 和 y 坐标。
• right 和 bottom：元素右下角的 x 和 y 坐标。

示例场景：悬浮提示框的位置计算

假设你在开发一个带有悬浮提示框的页面，当用户悬停在某个按钮上时，提示框需要出现在按钮的下方。可以通过 getBoundingClientRect 获取按钮的位置，然后计算提示框的位置。

const button=document.querySelector('button');
const tooltip=document.querySelector('.tooltip');

button.addEventListener('mouseenter', ()=> {
  const rect=button.getBoundingClientRect();
  tooltip.style.left=`${rect.left}px`;
  tooltip.style.top=`${rect.bottom}px`;
  tooltip.style.display='block';
});

button.addEventListener('mouseleave', ()=> {
  tooltip.style.display='none';
});

获取元素相对于整个页面的位置

要获取元素相对于整个页面的位置，我们需要考虑页面的滚动。可以通过 scrollX 和 scrollY 来获取页面的水平和垂直滚动距离。

const div=document.querySelector('div');
const getOffset=(el)=> {
  const rect=el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
};
console.log(getOffset(div));

使用offsetLeft和offsetTop

offsetLeft 和 offsetTop 属性可以获取元素相对于最近的已定位父元素的位置。

const div=document.querySelector('div');
console.log(div.offsetLeft, div.offsetTop);

示例场景：多层嵌套布局

假设你在开发一个多层嵌套布局的页面，需要获取某个子元素相对于其父元素的位置，以便调整布局或实现拖拽功能。

const container=document.querySelector('.container');
const item=document.querySelector('.item');

item.addEventListener('mousedown', (event)=> {
  const startX=event.clientX - item.offsetLeft;
  const startY=event.clientY - item.offsetTop;

  const onMouseMove=(event)=> {
    item.style.left=`${event.clientX - startX}px`;
    item.style.top=`${event.clientY - startY}px`;
  };

  document.addEventListener('mousemove', onMouseMove);

  document.addEventListener('mouseup', ()=> {
    document.removeEventListener('mousemove', onMouseMove);
  }, { once: true });
});

结束

通过本文的介绍，你应该了解了几种获取 HTML 元素位置的方法以及它们的实际应用场景。这些技巧不仅在日常开发中非常有用，还能帮助你更好地处理各种复杂的布局和交互需求。