国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > web頁面中的布局位置到底是什么?

web頁面中的布局位置到底是什么?

來源:千鋒教育
發布人:xqq
時間: 2023-10-11 17:42:46 1697017366

一、web頁面中的布局位置

viewport 是瀏覽器視口,代表瀏覽器的可視區域,也就是瀏覽器中用來顯示網頁的那部分區域。在桌面電腦上,由外到內分為顯示器窗口、瀏覽器窗口、瀏覽器視口 (viewport)、 元素。

顯示器窗口

顯示器窗口就是你的顯示器屏幕的可見區域。顯示器的分辨率,描述的是顯示器窗口的設備像素,又叫做物理像素,通過 screen.width 來表示水平方向的物理像素,screen.height 來表示垂直方向的物理像素。比如一臺分辨率為 1920 * 1080 的顯示器,它的 screen.width 為 1920,screen.height 為 1080。screen.width 和 screen.height 是固定的,不可以改變。

瀏覽器窗口

瀏覽器窗口就是瀏覽器中用來顯示網頁的可見區域,不包括工具欄的部分,但是包括水平滾動條和垂直滾動條 (只包括滾動條本身所占的像素,不包括已滾動的網頁部分)。

瀏覽器視口

viewport 就是瀏覽器視口,瀏覽器視口和瀏覽器窗口類似,只不過不包括水平滾動條和垂直滾動條。如果網頁里沒有滾動條,則瀏覽器視口和瀏覽器窗口的大小一樣。通過 document.documentElement.clientWidth 來表示瀏覽器視口水平方向能夠顯示的 CSS 像素數,document.documentElement.clientHeight 來表示瀏覽器視口垂直方向能夠顯示的 CSS 像素數。如果沒有滾動條,document.documentElement.clientWidth 和 window.innerWidth 相等。如果有滾動條,window.innerWidth = document.documentElement.clientWidth + 垂直滾動條所占的寬度。document.documentElement.clientWidth 和 document.documentElement.clientHeight 是可變的,通過拉伸或者縮放瀏覽器可以改變。

元素

HTML 文檔中, 元素是文檔根元素,通過 document.documentElement 來表示 元素。 元素所占的 CSS 寬度和高度,用 document.documentElement.offsetWidth 和 document.documentElement.offsetHeight 來顯示。

縮放瀏覽器

通過百分比縮放瀏覽器的時候,并沒有改變瀏覽器的物理尺寸,但是改變了 CSS 像素的物理尺寸。viewport 所能夠展示的 CSS 像素數也會發生改變,因此 document.documentElement.clientWidth 和 window.innerWidth 就會改變。

比如我們把顯示器放大到 200%,網頁中的元素尺寸都放大一倍,但是元素的 CSS 像素值不會改變。比如某個元素的 width: 100px;,不管是瀏覽器放大顯示還是縮小顯示,該元素的 CSS 像素是不會變的,永遠都是 width: 100px;,變化的是該元素在顯示器上所占的物理尺寸。當瀏覽器放大 200% 顯示網頁的時候,1px CSS 像素的物理尺寸也會放大一倍。

舉例子:

點擊瀏覽器的放大按鈕放大到 200% 顯示網頁的時候,雖然瀏覽器的物理尺寸沒有變化,但是 1px CSS 像素的物理尺寸擴大了一倍,因此瀏覽器 viewport 能夠展示的 CSS 像素數就會縮小一倍。因此不縮放時,viewport 為 1000px,放大 200% 之后,viewport 為 500px,也就是說放大后 viewport 水平方向能夠展示的 CSS 像素數為 500px。同理,點擊瀏覽器的縮小按鈕縮小到 50% 顯示網頁的時候,viewport 為 2000px,也就是說縮小后 viewport 水平方向能夠展示的 CSS 像素數為 4000px。

延伸閱讀:

二、網頁可見區域是什么

網頁可見區域寬: document.body.clientWidth;

網頁可見區域高: document.body.clientHeight;

網頁可見區域寬: document.body.offsetWidth (包括邊線的寬);

網頁可見區域高: document.body.offsetHeight (包括邊線的高);

網頁正文全文寬: document.body.scrollWidth;

網頁正文全文高: document.body.scrollHeight;

網頁被卷去的高: document.body.scrollTop;

網頁被卷去的左: document.body.scrollLeft;

網頁正文部分上: window.screenTop;

網頁正文部分左: window.screenLeft;

屏幕分辨率的高: window.screen.height;

屏幕分辨率的寬: window.screen.width;

屏幕可用工作區高度: window.screen.availHeight;

對塊級元素來說,offsetTop、offsetLeft、offsetWidth?及?offsetHeight?描述了元素相對于?offsetParent?的邊界框

聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT