JS의 박스모델에 대한 지식과 이해에 대한 간략한 분석, 단숨에 이해했습니다.

우선 JS 박스 모델이 무엇인지 이해해야 합니다???

JS盒模型은 다음을 의미합니다. JS를 통해 제공되는 메소드 페이지에 있는 요소의 스타일 정보 값을 얻기 위한 일련의 속성 및 메소드

#box (자체 전용 속성이 많이 있음) ->HTMLpElement.prototype - >HTMLElement.prototype ->Element.prototype ->Node.prototype ->EventTarget.prototype ->Object.prototype
var box = document.getElementById(“상자”)
console.dir(box);

콘텐츠의 너비와 높이: 우리가 설정한 너비/높이 스타일은 높이 값이 설정되지 않은 경우 콘텐츠의 너비와 높이입니다. 컨테이너는 내부 콘텐츠를 기반으로 합니다. 콘텐츠는 자체적으로 조정되므로, 콘텐츠가 더 많든 적든 관계없이 고정 높이가 설정된 경우 얻은 값은 실제 콘텐츠의 높이가 됩니다.

실제 콘텐츠의 너비와 높이: 이는 실제 콘텐츠의 너비와 높이를 나타냅니다(우리가 설정한 높이와 반드시 관련이 있는 것은 아닙니다). 예: 높이를 200px로 설정했습니다. 콘텐츠가 오버플로되면 실제 콘텐츠의 높이도 오버플로 콘텐츠의 높이에 추가되어야 합니다.

#🎜 🎜#

   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;

rrree

win: 컨테이너 박스 모델 검색 방법 운영에 관한 질문

값 없이 attr만 전달되는 경우 기본 의미는 "get"입니다.
두 매개변수가 모두 전달되면 "설정"을 의미합니다
느슨하게 말하면 이것은 "클래스 오버로딩"에 관한 것입니다. 동일한 메소드가 다른 매개변수를 전달하여 다른 기능을 구현합니다.
JS 박스 모델에서: 클라이언트 시리즈/오프셋 시리즈/scrollWidth/scrollHeight는 모두 "읽기 전용" 속성입니다 -> 값은 속성을 통해서만 얻을 수 있으며 요소의 스타일은 속성을 통해 수정할 수 없습니다.

scrollTop/scrollLeft: 스크롤 막대의 높이/너비(이 두 속성은 고유합니다) 읽기 및 쓰기 가능" 속성)

//box.scrollTop = 0; //-> 컨테이너 상단으로 직접 반환

우리의 scrollTop 값은 경계값(최대값과 최소값)을 가지며, 우리가 설정한 값은 최소값이 최대값보다 작거나 크면 쓸모가 없습니다. #

js의 박스 모델에 대한 자세한 설명

# 🎜🎜#CSS3의 상자 모델 및 상자 모델 속성 box-sizing에 대한 자세한 소개

관련 동영상: Box 모델-부울 교육_Yan Shiba_HTML 비디오 튜토리얼

위 내용은 JS의 박스모델에 대한 지식과 이해에 대한 간략한 분석, 단숨에 이해했습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!