web开发在线，html5在线学习网站

盒子模型：

盒子模型,又称框模型 (Box Model)

盒子模型主要的属性：width、height、padding、border、margin；

• width：内容的宽度
• height：内容的高度（不是盒子的宽度、高度）
• padding：内边距
• border：边框
• margin：外边距

例：

<style type="text/css">
      div{
           width: 200px;
           height: 200px;
           border: 1px solid red;
           padding: 50px;
</style>

标准盒模型与IE盒模型:

标准盒模型：

【标准盒子模型的范围包括margin，border，padding，content，并且content部分不包含其他部分；】

IE盒模型：

【IE盒子模型的范围包括margin，border，padding，content，和标准盒子模型不同的是：IE盒子模型的 content 部分包含 border 和 pading；】

标准盒子模和IE盒模型的区别：

• 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
• IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

盒子模型面试题

1，css盒模型基本概念？
2，标准模型和IE模型的区别：计算高度和宽度的不同，怎么不同，高度宽度是怎么计算的？
3，css如何设置这两种模型？
4，js如何设置获取盒模型对应的宽和高？
5，实例题（根据盒模型解释边距重叠）

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取

04888/web-p7)**

[外链图片转存中…(img-FRvlmmLw-1627102492485)]