辉太郎看前端(HTML中的两种盒模型)

前言

常说的盒模型呢，其实就是元素也就是标签，所有的标签都是盒模型，目前有两种盒模型：

• w3c提出的标准盒模型。

• IE提出的怪异盒模型。

标准盒模型

• 计算宽度的方式

左右外边距(margin)+左右边框(border)+左右内边距(padding)+宽度(width)

• 标准盒模型转为怪异盒模型

box-sizing:border-box;

怪异盒模型

• 计算宽度的方式

左右外边距(margin)+宽度(width) 注： 宽度为边框+内边距+width

• 怪异盒模型转换为标准盒模型

box-sizing:content-box;

注： 继承父类盒模型 box-sizing:inherit;

总结

• 盒模型在设置边距是会出现边距重合的问题，我们可以通过BFC解决。

• 盒模型的宽高以及其他属性，在JS中我们怎样获取或设置。

初出茅庐，请各位大佬多多指教。🙂