【前端知识整理】CSS盒模型如何理解盒模型有哪些盒模型如何设置盒模型

最新推荐文章于 2025-09-28 16:27:17 发布

原创最新推荐文章于 2025-09-28 16:27:17 发布 · 723 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

css 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了CSS盒模型，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)四个部分。文章还阐述了两种盒模型——标准模型和IE模型的区别，并展示了如何通过box-sizing属性进行设置。此外，讨论了JavaScript获取盒子宽高的多种方法，如style属性、currentStyle、getComputedStyle、getBoundingClientRect、offsetWidth和offsetHeight，以及clientWidth和clientHeight的区别。

盒模型是什么

盒模型就是一个盒子，它封装了周围的html元素。它包括外边距margin、边框border、内边距padding、内容content这四个属性
浏览器控制台中的盒模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框，可以设置颜色等属性。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像或其他的盒子。

有哪些盒模型

盒模型包括两种，一种是标准模型，一种是IE模型，他们之间的区别在于，标准模型的宽度width和高度height为内容区域的宽高，当给标准模型的盒子设置宽高时，是在设置内容区域的宽高。而IE模型的宽度width和高度height是内容加上内边距padding再加上边框border的宽高，当给IE模型设置宽高时，设置的是整个盒子的宽高，内容的宽高会减去内边距padding和边框border的宽高。浏览器一般默认使用标准模型。

如何设置这两种模型

浏览器一般默认使用标准模型，想要设置盒子的模型，可以使用box-sizing属性。标准模型应该设置为content-box，IE模型应该设置为border-box

div{
	/*默认为标准模型*/
	box-sizing:content-box;
	/* IE模型 */	
	box-sizing:border-box;
}

js如何获取盒子的宽高

js有多种方法可以获取盒子的宽高，常用的有以下几种，分别有不同的适用场景。

1 获取CSS样式设置的属性值

可以使用dom.style.width/height属性来获取样式的宽高。但是这样做只能获取到行内样式，也就是直接写在标签上的style属性中的样式，style标签中的内嵌样式和link标签中的外联样式都获取不到。

2 获取最终渲染的宽高属性值

使用dom.currentStyle.width/height属性可以获取到渲染后的盒子宽高，但是这个方法只在IE浏览器中兼容，主要用于兼容IE6、IE7、IE8。

3 获取计算后的宽高属性值

使用window.getComputedStyle(dom)方法可以获取到计算后的所有样式，当然也包括宽高，这个方法能够获取到行内样式和内嵌、外联样式。他获取的是元素最终的样式。获取到的值会带有单位px。它对所有标准浏览器都可用，但 IE6、IE7 和 IE8 不支持该方法，IE9以上支持，跟上面那个正好相反。

要注意的是这个以上三种方法获取到的都是CSS属性，对于不同的盒子模型，这个宽高值代表的意义不同。它们获取到的值都会带有单位px。

4 使用getBoundingClientRect()方法

使用dom.getBoundingClientRect()这个方法可以获取一个DOMRect 对象，它包括了整个元素的最小矩形（包括 padding 和 border-width）。该对象使用 left、top、right、bottom、x、y、width 和 height 这几个以像素为单位的只读属性描述整个矩形的位置和大小。除了 width 和 height 以外的属性是相对于视图窗口的左上角来计算的。