css中關於各種寬度和高度區別

2021-06-26 15:26:58 字數 408 閱讀 1138

對於寬度的各種定義,不同語境下有不同的含義,pc端與移動端的表現也有不同,還可能與縮放水平、滾動條、viewport設定等因素相關。

讀取寬度時,需要明確想要讀取的是哪種寬度、這個寬度值受哪些因素影響、與哪些因素無關,這樣才能寫出適應性更強的**。

經過一番試驗與探索,得到成果整理如下,包括**、示意圖、演示頁面,與大家分享。

-------------------------------

width(), innerwidth(), outerwidth()

clientwidth, offsetwidth, scrollwidth

clientwidth是內容除去滾動條後實際顯示出來的寬度,scrollwidth是包括溢位部分的總寬度。

需要注意的是滾動條的寬度在不同瀏覽器下是不一樣的。

關於前端中遇到各種高度寬度的總結

最近一直在看關於懶載入元件和無限下拉元件的實現,遇到了各種需要獲取dom高度 滾動的高度 瀏覽器可視區的高度.索性今天對各種高度進行一次總結,省的每次遇到總要找谷哥 度娘。element.clientheight 可視區高度,不包括border的高度,如果底部有滾動條也不包括滾動條的高度 eleme...

css中如何固定元素的寬度和高度

直接開門見山啦,請看下面 與效果 one two style head class one 固定高寬值div class two 高寬值加上了padding border值,不包括margindiv body box sizing content box 預設值 border box 1.conte...

js獲取瀏覽器高度與寬度和各種

js獲取瀏覽器高度和寬度 ie中 document.body.clientwidth body物件寬度 document.body.clientheight body物件高度 document.documentelement.clientwidth 可見區域寬度 document.documente...