当前位置：首页 > news >正文

盒模型小知识点

news 来源：原创 2024/5/14 13:47:02

文章目录

- css盒模型
- - 模型切换
  - 关于margin塌陷问题解决方案
  - BFC
- JavaScript盒模型
- - 元素偏移量offset系列
  - 元素可视区client系列
  - 元素滚动scroll系列
  - 获取元素的宽度

css盒模型

在html中的元素都由四部分组成：内容（content）、内边距（padding）、border（边框）、外边距（margin）

标准盒模型(所占宽度=width+padding+border+margin)
怪异盒模型(所占宽度=width+margin；width包括width+padding+border)

模型切换

box-sizing:content-box; 将采用标准模式的盒子模型标准。(默认)
box-sizing:border-box; 将采用怪异模式的盒子模型标准。
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

关于margin塌陷问题解决方案

解决方案：

为父元素定义border
为父元素定义padding
父元素添加overflow:hidden

BFC

BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。

如何触发BFC

overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

JavaScript盒模型

JS盒子模型指的是通过JS中提供的一系列的属性和方法，获取页面中元素的样式信息值

在这里插入图片描述

元素偏移量offset系列

利用offset相关属性可以动态的获取当前元素的位置(偏移量)、大小(高度、宽度；不携带单位)等。

属性	说明
offsetParent	返回当前元素有定位的父级元素(父级都没有定位则返回body)
offsetTop	返回当前元素带有定位的父元素的上方偏移量
offsetLeft	返回当前元素带有定位的父元素的左侧偏移量
offsetWidth	返回自身的宽度(包含内容、padding、边框；返回值不带单位；只读)
offsetHeight	返回自身的高度(包含内容、padding、边框；返回值不带单位；只读)

offset与width的区别
- offset可以得到任意样式中的样式值；style只能得到行内样式中的样式值。
- offset系列获得的数值是没有单位的；style获得的样式值是有单位的字符串。
- offsetWidth包含width+padding+border；style.width不包含padding和border。
- offset系列的属性是只读属性；style中的属性是可读写属性，可以赋值。
- 获取元素大小位置，offset更合适；更改元素属性，需要使用style改变。

元素可视区client系列

client(客户端)；通过client可动态获取可视区元素的相关属性。

属性	说明
clientTop	返回元素上边框的大小
clientLeft	返回元素左边框的大小
clientWidth	返回自身的宽度(包含内容、padding，不包含border；返回值不带单位)
clientHeight	返回自身的高度(包含内容、padding，不包含border；返回值不带单位)

元素滚动scroll系列

scroll(滚动)相关属性可以动态得到当前元素的大小与滚动距离等。

属性	说明
scrollTop	返回被卷去的上侧距离(返回值不带单位)
scrollLeft	返回被卷去的左侧距离(返回值不带单位)
scrollWidth	返回自身的宽度(不包含border；返回值不带单位)
scrollHeight	返回自身的高度(不包含border；返回值不带单位)

获取元素的宽度

    dom.style.width //只能得到行内样式设置的宽高 隐藏当前元素返回0
    getComputedStyle(dom).width //携带单位 隐藏当前元素不影响
    dom.getBoundingClientRect().width //不携带单位 隐藏当前元素返回0