前端入门教程：CSS标准盒模型和怪异盒模型区别
掌握盒模型的基本概念：CSS3框架中的盒模型分为两种类型：常规的盒子样式与IE特有的异常盒子样式（怪异盒子样式）。该框架由内到外分为content区域（图示中以蓝色标注）、填充层（padding）、边界层（border）以及边距层（margin）。这些组件共同构成了完整的盒子结构，并包含5个关键属性参数
- width 元素的宽度值
- height 元素的高度
- border 元素的边框样式
- padding 元素的内部间距
- margin 元素的外部间距
一张图来理解盒模型的5个属性
父亲之间距离可通过父元素应用padding属性来实现
兄弟之间距离可通过元素应用margin属性来实现
标准盒模型和 IE盒模型- 两者区别
标准盒模型与IE盒模型的主要区别在于，在定义 width 和 height 属性时所使用的范围各不相同：
- 标准盒模型中宽度和高度属性所限定的区域仅包含content区域。
- IE盒模型（怪异盒模型）中宽度和高度属性所限定的区域包括了border、padding以及content区域。
案例展示
<style>
.box {
width: 100px;
height: 150px;
padding: 20px;
border: 10px;
margin: 50px;
box-sizing: border-box;/*怪异地盒子模型*/
}
</style>
<body>
<div class="box"></div>
</body>该段代码，在未添加box-sizing: border-box;以及加入后进行测试时的表现如何？
标准盒模型
基于标准盒子模型的设定下，默认宽度与高度分别设置为100像素与150像素；该设定仅影响内容区域的空间分配，并未涉及其他相关元素的布局调整
怪异盒模型
指定宽度为1厘米，并设置高度为1.5厘米。该组件由边距、填充和内容区域三个组成部分组成。通过计算得知内容区域的高度为9毫米（计算过程如下：总高度减去两边边距（各占2毫米）再减去填充区（各占1毫米），即 ）宽方面积设定了4毫米（计算方法同上）。
盒模型转换
可以通过修改元素的 box-sizing 属性来改变元素的盒模型：
- box-sizing: 指定内容盒子模式 即标准盒子模式（默认情况下启用）
- box-sizing: 指定边界盒子模式 即IE盒子模式（亦称奇异盒子模式）
你学会了吗？
为引导部分同学避免不必要的弯路而存在旨在切实满足一线互联网大厂前端项目的研发技能与要求的一份专项培养计划首次以实力为核心打造并命名为《30天挑战学习计划》具体内容包括以下几点
Hypertext Markup Language及其第五版本（HTML/HTML5），Cascading Style Sheets及其第三版本（ CSS/CSS3），JavaScript语言（JS），实际企业项目开发（真实企业项目开发），云端服务器部署及上线流程（云服务器部署上线），入门至精通的学习路径（从入门到精通）
- PC端项目开发（1个）
- 移动WebApp开发（2个）
- 多端响应式开发（1个）
包含四个完整的项目开发！通过一步步编写代码来实现技术实践，在现实中的企业也是这样操作。一 starting 学习一开始就要立即投入工作状态，在工作中避免了不必要的学习时间消耗！
从项目开始就同步采用 Git 工具进行版本管理和协作开发工作。同时采用 Markdown 格式记录学习笔记内容，并涵盖开发标准、设计规范、命名规范、代码规范以及 SEO 优化规范等各个方面
从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发
在真实环境中进行调试，并完成云服务的上线部署。基于Linux平台的Nginx部署，并对Nginx性能进行优化。采用Gzip压缩技术、HTTPS加密协议以及域名服务器备案与解析操作。基于企业项目需求的最佳实践方案是实现多网站和多系统的无缝跳转部署。采用Git版本控制工具进行项目的在线部署。
其中涵盖了《30天挑战学习计划》的所有细节内容，并非简单的知识列举。课程内容包括丰富的视频讲解、图解教学以及实用的学习资源包。旨在助力企业成长的核心目标是帮助您快速掌握企业项目开发的核心技能，并避免不必要的麻烦。
过程中【不涉及】任何费用和利益，非诚勿扰 。
若未在系统中添加助理老师微信，则可自行添加下方微信用于说明欲参与30天学习挑战计划，并来自！同时由老师邀请你加入学习，并提供相关资料。
30天学习挑战计划：Web前端开发入门至实践 | Arry老师的艾编程博客