CSS 中尺寸

前端梦呓 in Beijing

2023-03-26

元素的尺寸包含宽度、高度

只计算高度，宽度的计算与之类似

所有计算处于标准盒模型下

# 元素的尺寸类型、属性、计算

# 元素的尺寸类型

从内向外

content 内容尺寸
::before 、::after 伪元素
padding 内边距
scrollbar 滚动条
border 边框
margin 外边框

其中值得注意的是

border 在 scrollbar 外层，在布局时尤其注意
::before、::afteri 伪元素尺寸不单独计算，因为它包含在 content 尺寸内
margin 通常不参与元素的尺寸的计算

# 元素的尺寸属性

getComputedStyle(ele).height
ele.style.height
ele.clientHeight
ele.offsetHeight
ele.scrollHeight
ele.getBoundingRect().height

# 元素尺寸的计算

以下处于标准盒模型

伪元素尺寸包含在 contetn 内容尺寸中，即元素的子元素

不需要单独计算

除了 scrollHeight 需要单独计算伪元素尺寸外

--	描述	content内容	::before 、::after 伪元素	padding 内边距	scrollbar 滚动条	border 边框	margin
getComputedStyle(ele).height	计算后内容高	✅	❌	❌	❌	❌	❌
ele.style.height	计算前内容高	✅	❌	❌	✅	❌	❌
ele.clientHeigth	计算后内容高 + padding	✅	❌	✅	❌	❌	❌
ele.offsetHeigth	所有尺寸计算和	✅	❌	✅	✅	✅	❌
ele.scrollHeigth	子元素占用高度（offsetHeight + margin） + 当前元素 padding + 当前元素的伪元素尺寸	❌	✅	✅	❌	❌	❌
ele.getBoundingRect().height	所有尺寸计算和	✅	❌	✅	✅	✅	❌

如果使用图形更直观点，但会比较乱，各种指示线交叉，所以表格表示利于思考

# 在非标准盒模型下的计算

非标准盒模型也就是怪异盒模型

即 box-sizing: border-box

内容的高度是 border 边框内所有高度的和

当然也包括 scrollbar 高度

因为 scollbar 也包括在 border 内

所以元素的真实 content 高度就被压缩了

content 高度 = 声明高度 - padding 高度 - border 高度

其中值得注意的是 scrollbar 高度，包括在 content 高度内，所以不另外减去

标准盒模型是将 content 高度是减去 scollbar 高度后得到的值

# 滚动条宽度计算

元素在标准盒模型，即 content-box 下

通过 css 设置元素的宽度是包含滚动条的宽度

元素通过 getComputedStyle 计算后的宽度不包含滚动条宽度

所以，滚动条宽度 = 元素宽度 - getComputedStyle(ele).width

获取元素计算前的宽度

如果使用 css 声明的元素宽度无法获取

但通过 style 内联方式声明的可以获取

// div 存在滚动条时，无法获取计算前的 800px
div {
  width: 800px;
}

// 通过 style.width 可获取计算前的 800px
<div style="width: 800px;"></div>

1
2
3
4
5
6
7

所以，滚动条宽度 = ele.style.width - getComputedStyle(ele).width

结果为 15px

结论，浏览器滚动条的宽度为 15px

# window 浏览器窗口尺寸

通过 window.innerWidth/innerHeight、window.outerWidth/outerHeight 获取

只计算高度，宽度与之类似

window.innerWidth: 浏览器视口高度 + 滚动条高度

window.outerHeight: 浏览器窗口高度，即视口、滚动条、 URL 地址栏，标签栏等所有高度和

视口区域是指浏览器的可用于编辑 html 等代码区域

窗口区域中整个浏览器的界面区域

window 浏览器窗口尺寸

扫一扫，微信中打开