I understood it instantly, a brief analysis of the knowledge and understanding of the box model in JS

First of all, we must understand what is the JS box model???

JS box model refers to a box model provided by JS A series of properties and methods to obtain the style information value of elements in the page

#box (has many private properties of its own) ->HTMLpElement.prototype ->HTMLElement.prototype - >Element.prototype ->Node.prototype ->EventTarget.prototype ->Object.prototype
var box = document.getElementById(“box”);
console.dir(box);

The width and height of the content: The width/height styles we set are the width and height of the content; if the height value is not set, the height of the container will be based on the content inside. Adapt, so that the value obtained is the height of the actual content; if a fixed height is set, no matter whether there is more or less content, the height of our content actually refers to the set value;

Width and height of the real content: This refers to the width and height of the actual content (not necessarily related to the height we set). For example: I set the height to 200px. If the content overflows, then the real content The height must also include the height of the overflow content

   1、client系列(当前元素的几个私有的属性)
        clientWidth/clientHeight:内容的宽度/高度+左右/上下填充 (和内容溢出没有关系)        clientLeft:左边框的宽度  clientTop:上边框的高度  (border[Left/Top]Width)    2、offset系列
        offsetWidth/offsetHeight:clientWidth/clientHeight+左右/上下边框 (和内容是否溢出也是没有任何的关系的)        offsetParent:当前元素的父级参照物
        offsetLeft/offsetTop:当前元素的外边框距离父级参照物的内边框的偏移量    3、scroll系列
        scrollWidth/scrollHeight:和我们的clientWidth/clientHeight一模一样(前提是：容器中的内容没有溢出的情况下)

    如果容器中的内容有溢出,我们获取的结果是如下规则:        scrollWidth:真实内容的宽度(包含溢出)+左填充        scrollHeight:真实内容的高度(包含溢出)+上填充
   获取到的结果都是"约等于"的值,因为:同一个浏览器,我们是否设置overflow='hidden'对于最终的结果是有影响的;在不同的浏览器中我们获取到的结果也是不相同的;

    scrollLeft/scrollTop:滚动条卷去的宽度/高度    2、关于JS盒子模型属性取值的问题
    我们通过这13个属性值获取的结果永远不可能出现小数,都是整数;浏览器获取结果的时候,在原来真实结果的基础上进行四舍五入;    3、关于操作浏览器本身的盒子模型信息
        clientWidth/clientHeight是当前浏览器可视窗口的宽度和高度(一屏幕的宽度和高度)
        scrollWidth/scrollHeight是当前页面的真实宽度和高度(所有屏加起来的宽度和高度~但是是一个约等于的值
    我们不管哪些属性,也不管是什么浏览器,也不管是获取还是设置,想要都兼容的话,需要写两套       document.documentElement[attr]||document.body[attr]; //->必须document.documentElement在前

    例如：
    [获取]    document.documentElement.clientWidth||document.body.clientWidth
    [设置也需要写两套]    document.documentElement.scrollTop=0;    document.body.scrollTop=0;

    function win(attr, value) {        if (typeof value === "undefined") {//->没有传递value值->"获取"
            return document.documentElement[attr] || document.body[attr];
        }        //->"设置"
        document.documentElement[attr] = value;        document.body[attr] = value;
    }    console.log(win("clientHeight"));
    win("scrollTop", 0);

win: A method for operating the browser box model
If only attr is passed without value, the default meaning is "get"
If both parameters are passed, it means "setting"
Loosely speaking, this is about "class overloading": the same method implements different functions by passing different parameters
In the JS box model: client series/offset series/scrollWidth/scrollHeight are all " "Read-only" attribute-> The value can only be obtained through the attribute, and the style of the element cannot be modified through the attribute.

scrollTop/scrollLeft: the height/width of the scroll bar (these two attributes are the only "read-write" "Attributes)
//box.scrollTop = 0; //-> Returns directly to the top of the container

Our scrollTop value has boundary values ​​(maximum and minimum values), and the value we set is smaller than the minimum value Or it is useless if it is larger than the maximum value. The effect is still the boundary value

    [最小值是零]
     box.scrollTop = -1000;//->直接回到了容器的顶部,没有超出
     console.log(box.scrollTop);//->0

    [最大值是=真实的高度-当前容器一屏幕的高度]
        var maxTop = box.scrollHeight - box.clientHeight;
        console.log(maxTop);

Related articles:

js box model Detailed explanation

Detailed introduction to the box model and box model attribute box-sizing in CSS3

Related videos:

Box Model-Boolean Education_Yan Shiba_HTML Video Tutorial

The above is the detailed content of I understood it instantly, a brief analysis of the knowledge and understanding of the box model in JS. For more information, please follow other related articles on the PHP Chinese website!