Je l'ai compris instantanément, une brève analyse de la connaissance et de la compréhension du modèle box en JS

Tout d'abord, vous devez comprendre ce qu'est le modèle de boîte JS ???

JS盒模型 fait référence à une série de propriétés et de méthodes fournies dans JS. Obtenez la valeur des informations de style de l'élément dans la page

#box (possède de nombreuses propriétés privées qui lui sont propres) ->HTMLpElement.prototype ->HTMLElement.prototype ->. ;Element.prototype - >Node.prototype ->EventTarget.prototype ->Object.prototype
var box = document.getElementById("box");
console.dir(box);

Largeur et hauteur du contenu : les styles largeur/hauteur que nous définissons sont la largeur et la hauteur du contenu ; si la valeur de hauteur n'est pas définie, la hauteur du conteneur sera basée sur le contenu à l'intérieur. Adaptez-vous, de sorte que la valeur obtenue soit la hauteur du contenu réel ; si une hauteur fixe est définie, qu'il y ait plus ou moins de contenu, la hauteur de notre contenu se réfère en fait à la valeur définie ; 🎜>

Largeur et hauteur du contenu réel : cela fait référence à la largeur et à la hauteur du contenu réel (pas nécessairement liées à la hauteur que nous définissons). Par exemple : je règle la hauteur sur 200 px. le contenu déborde, puis le contenu réel La hauteur doit également inclure la hauteur du contenu de débordement

   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 : Une méthode pour faire fonctionner le navigateur modèle de boîte

Si seul attr est transmis mais qu'aucune valeur n'est transmise, la signification par défaut est "get"
Si les deux paramètres sont passés, cela signifie "réglage"
En gros, il s'agit de "surcharge de classe" : la même méthode réalise différentes fonctions en passant différents paramètres
Dans le modèle de boîte JS : série client/série offset/scrollWidth/scrollHeight sont tous des attributs " Lecture seule »-> ; La valeur ne peut être obtenue que via l'attribut, et le style de l'élément ne peut pas être modifié via l'attribut

scrollTop/scrollLeft : la hauteur/largeur de la barre de défilement (ces deux attributs sont les seuls "read -write" attribut)

//box.scrollTop = 0; //-> Renvoie directement en haut du conteneur

Notre valeur scrollTop a des valeurs limites (valeurs maximales et minimales), et la valeur que nous définissons est inférieure à la valeur minimale Ou cela ne sert à rien si elle est supérieure à la valeur maximale. L'effet est toujours la valeur limite

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

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

Articles connexes :

js box Explication détaillée du modèle

Introduction détaillée du modèle de boîte et de l'attribut box model box-sizing en CSS3

Vidéos associées :

Modèle de boîte-Éducation booléenne_Yan Shiba_Tutoriel vidéo HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!