整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
節(jié)課，我們學(xué)習(xí)如何讓元素的寬度和高度在容器里自適應(yīng)。
什么是寬高自適應(yīng)呢？
頁面里有兩個(gè) div，開始的時(shí)候?qū)挾榷际?800px，當(dāng)我們將瀏覽器窗口的寬度拖動到小于 800px 的時(shí)候，我們發(fā)現(xiàn)：上面的 div 寬度固定，一部分被隱藏在屏幕外；下面 div 的寬度會自動適應(yīng) 屏幕寬度縮小 的變化。
我們把這種元素的寬或高，能夠隨著屏幕的寬高變化而變化的能力，叫做寬高自適應(yīng)。
下面，我們就通過代碼來實(shí)現(xiàn)元素的寬高自適應(yīng)。
創(chuàng)建文件 adaptive.html 文件和 adaptive-style.css 文件。在 html 里構(gòu)建基本代碼，引入外部樣式。
在 css 文件里定義通用選擇器，聲明樣式 box-sizing: border-box，margin: 0，padding: 0，定義所有元素的盒模型為 border-box，并去除瀏覽器默認(rèn)的內(nèi)填充和外邊距。
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}再定義選擇器：html, body，聲明樣式：height: 100%。這是我們以前熟知的樣式定義，目的是讓 body 的高度撐滿整個(gè)屏幕。為了使效果更明顯，我們給 body 添加一個(gè)邊框。
CSS
html, body {
height: 100%;
}
body {
border: 3px solid #ccc;
}在瀏覽器里打開頁面，當(dāng)我們上下縮放瀏覽器窗口時(shí)，發(fā)現(xiàn) body 的高度自適應(yīng)窗口高度的變化。再舉個(gè)例子：
回到 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;
}回到瀏覽器，我們看，容器水平居中，這是因?yàn)?margin: auto 樣式會使外邊距均分水平方向剩余的空間，這個(gè)知識我們前面已經(jīng)學(xué)過了。
當(dāng)我們水平拖拽瀏覽器窗口時(shí)，發(fā)現(xiàn)容器一直位于頁面中間。可當(dāng)瀏覽器窗口寬度小于容器寬度時(shí)，容器超出了 body，出現(xiàn)了水平滾動條。
回到 css，將 box 的 width 修改為 50%。
CSS
.box {
width: 50%;
}再看一下效果，無論我們怎么拖拽窗口，容器的寬度一直是 body 寬度的一半，做到了寬度自適應(yīng)。
可見，將 width 和 height 的值設(shè)置為 % （讀作百分比），可以實(shí)現(xiàn)元素的寬高自適應(yīng)。
回到 css，我們再換個(gè)方法實(shí)現(xiàn)寬高自適應(yīng)。修改 box 的 width 為 100%，height 也為 100%。
此時(shí)，容器會鋪滿整個(gè)body，隨著窗口的縮放而縮放。能不能使容器寬高縮放到一個(gè)固定的大小，就不再縮放了呢？
回到 css，給 box 添加樣式 max-width: 800px。max-width，顧名思義，最大寬度為 800px。意思是，即使給容器定義了 100% 的寬度值，它最大的縮放寬度也不能超過 800px。
效果顯示，容器橫向不再鋪滿整個(gè)屏幕了。縮小容器寬度，當(dāng)?shù)陀?800px 時(shí)，容器仍然可以自適應(yīng)寬度。
同理，也可以添加一個(gè) max-height: 800px，定義最大伸縮高度。
這樣，縮放窗口時(shí)，容器就只在 800 x 800 的空間內(nèi)縮放了。
當(dāng)然，也可以通過 min-width 和 min-height 來定義容器縮放的最小值。比如都設(shè)置為 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 可以設(shè)置元素寬高自適應(yīng)的臨界值。
SS 禁止瀏覽器滾動條的方法(轉(zhuǎn))
1、完全隱藏 在<boby>里加入scroll="no", 可隱藏滾動條；
<boby scroll="no">這個(gè)我用的時(shí)候完全沒效果, 不知道是什么原因! 不過好多人說這么用可以, 大概是用的位置不一樣吧
2、在不需要時(shí)隱藏 指當(dāng)瀏覽器窗口寬度或高度大于頁面的寬或高時(shí), 不顯示滾動條；反之, 則顯示:
<boby scroll="auto">3、樣式表方法 在<boby>里加入style="overflow-x:hidden", 可隱藏水平滾動條；加入style="overflow-y:hidden", 可隱藏垂直滾動條。
被包含頁面里加入 <style> html { overflow-x:hidden; } </style> 有一段解釋是這樣說的：body{ overflow-x:hidden; }在標(biāo)準(zhǔn) DTD 下是不可以的
我的問題是用這段代碼解決的body{overflow-y:hidden; }
4、另一種方法
<style type="text/css"> html { overflow-x:hidden; overflow-y:hidden; } </style>5、在用ie6瀏覽有框架的xhtml頁面的時(shí)候, 默認(rèn)會水平和垂直滾動條會一起出現(xiàn), 這是ie6的一個(gè)bug, 在firefox上是正常的, 出現(xiàn)的原因是其對XHTML 1.0 transitional doctype的解釋缺陷.
對于這個(gè)bug一般有3種解決方案，
方法1: 代碼：
html { overflow-y: scroll; }原理：強(qiáng)制顯示ie的垂直滾動條，而忽略水平滾動條 優(yōu)點(diǎn)：完全解決了這個(gè)問題, 允許你保持完整的XHTML doctype.
缺點(diǎn)：即使頁面不需要垂直滾動條的時(shí)候也會出現(xiàn)垂直滾動條。
方法2: 代碼：
html { overflow-x: hidden; overflow-y: auto; }原理：隱藏橫向滾動，垂直滾動根據(jù)內(nèi)容自適應(yīng)
優(yōu)點(diǎn)：在視覺上解決了這個(gè)問題.在不必要的時(shí)候, 未強(qiáng)制垂直滾動條出現(xiàn).
缺點(diǎn)：只是隱藏了水平滾動條，如果頁面真正需要水平滾動條的時(shí)候， 屏幕以外的內(nèi)容會因?yàn)橛脩魺o法水平滾動，而看不到。
方法3: 代碼：
body { margin-right: -15px; margin-bottom: -15px; }原理：這會在margin的水平和垂直方向上添加一個(gè)負(fù)值, IE添加了該精確數(shù)值后, 便會去除對滾動條的需求假象.
優(yōu)點(diǎn)：在視覺上解決了這個(gè)問題, 垂直滾動根據(jù)內(nèi)容自適應(yīng)
缺點(diǎn)：由于"人為創(chuàng)建"了15px的外邊距(margin), 所以無法使用該填充過的屏幕區(qū)域
家好，今天我們來聊一聊前端開發(fā)中一個(gè)常見但又非常實(shí)用的小技巧：如何獲取 HTML 元素相對于瀏覽器窗口的位置。不管你是新手還是有經(jīng)驗(yàn)的開發(fā)者，這個(gè)技巧在處理布局調(diào)整、動畫效果或滾動事件時(shí)都能派上大用場。接下來，我們一起來看看幾種獲取元素位置的方法吧！
getBoundingClientRect 方法可以獲取元素相對于視口（viewport）的大小和位置。
例如，假設(shè)我們有以下 HTML 代碼：
<div>
你好，世界
</div>我們可以通過以下 JavaScript 代碼獲取這個(gè) div 元素的位置：
const div=document.querySelector('div');
const rect=div.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);這里，我們首先用 querySelector 獲取 div 元素，然后調(diào)用 getBoundingClientRect 方法獲取元素的位置和大小。返回的 rect 對象包含以下屬性：
element-box-diagram
示例場景：懸浮提示框的位置計(jì)算
假設(shè)你在開發(fā)一個(gè)帶有懸浮提示框的頁面，當(dāng)用戶懸停在某個(gè)按鈕上時(shí)，提示框需要出現(xiàn)在按鈕的下方。可以通過 getBoundingClientRect 獲取按鈕的位置，然后計(jì)算提示框的位置。
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';
});要獲取元素相對于整個(gè)頁面的位置，我們需要考慮頁面的滾動。可以通過 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 屬性可以獲取元素相對于最近的已定位父元素的位置。
const div=document.querySelector('div');
console.log(div.offsetLeft, div.offsetTop);示例場景：多層嵌套布局
假設(shè)你在開發(fā)一個(gè)多層嵌套布局的頁面，需要獲取某個(gè)子元素相對于其父元素的位置，以便調(diào)整布局或?qū)崿F(xiàn)拖拽功能。
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 });
});通過本文的介紹，你應(yīng)該了解了幾種獲取 HTML 元素位置的方法以及它們的實(shí)際應(yīng)用場景。這些技巧不僅在日常開發(fā)中非常有用，還能幫助你更好地處理各種復(fù)雜的布局和交互需求。
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
