節課，我們學習如何讓元素的寬度和高度在容器里自適應。

什么是寬高自適應呢？

頁面里有兩個 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 元素位置的方法以及它們的實際應用場景。這些技巧不僅在日常開發中非常有用，還能幫助你更好地處理各種復雜的布局和交互需求。