Ich habe es sofort verstanden, eine kurze Analyse der Kenntnisse und des Verständnisses des Box-Modells in JS

Zunächst müssen Sie verstehen, was das JS-Box-Modell ist???

JS盒模型 bezieht sich auf eine Reihe von Eigenschaften und Methoden, die in bereitgestellt werden JS. Rufen Sie den Stilinformationswert des Elements auf der Seite

#box ab (hat viele eigene private Eigenschaften) ->HTMLpElement.prototype ->HTMLElement.prototype -> ;Element.prototype - >Node.prototype ->EventTarget.prototype ->Object.prototype
var box = document.getElementById(“box”); console.dir(box);

Inhaltsbreite und -höhe: Die von uns festgelegten Breiten-/Höhenstile sind die Breite und Höhe des Inhalts. Wenn der Höhenwert nicht festgelegt ist, wird die Höhe des Containers zugrunde gelegt Passen Sie an, dass der erhaltene Wert der Höhe des tatsächlichen Inhalts entspricht. Unabhängig davon, ob mehr oder weniger Inhalt vorhanden ist, bezieht sich die Höhe unseres Inhalts tatsächlich auf den eingestellten Wert 🎜>

Breite und Höhe des tatsächlichen Inhalts: Dies bezieht sich auf die Breite und Höhe des tatsächlichen Inhalts (nicht unbedingt auf die von uns festgelegte Höhe). Wenn der Inhalt überläuft, muss der tatsächliche Inhalt in der Höhe auch die Höhe des Überlaufinhalts enthalten Wenn nur attr übergeben wird, aber kein Wert übergeben wird, ist die Standardbedeutung „get“

Wenn beide Parameter übergeben werden, bedeutet dies „Einstellung“

Grob gesagt geht es hier um „Klassenüberladung“: Dieselbe Methode erreicht unterschiedliche Funktionen durch Übergabe unterschiedlicher Parameter

Im JS-Boxmodell: Client-Serie/Offset-Serie/scrollWidth/scrollHeight sind alle „schreibgeschütztes“ Attribut -> ; Der Wert kann nur über das Attribut abgerufen werden und der Stil des Elements kann nicht über das Attribut geändert werden

scrollTop/scrollLeft: die Höhe/Breite der Bildlaufleiste (diese beiden Attribute sind die einzigen „gelesenen“) -write" ”-Attribut) //box.scrollTop = 0; //-> Kehrt direkt zum oberen Rand des Containers zurück

Unser scrollTop-Wert hat Grenzwerte (Maximal- und Minimalwerte) und der von uns festgelegte Wert ist kleiner als der Mindestwert Oder es ist nutzlos, wenn es größer als der Maximalwert ist.

   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;

Verwandte Artikel:

JS-Box-Modell Ausführliche Erklärung

Detaillierte Einführung in das Box-Modell und die Box-Modell-Attribut-Boxgröße in CSS3

Ähnliche Videos: Box Model-Boolean Education_Yan Shiba_HTML Video-Tutorial

Das obige ist der detaillierte Inhalt vonIch habe es sofort verstanden, eine kurze Analyse der Kenntnisse und des Verständnisses des Box-Modells in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!