课堂课题：
如何理解盒模型及其content、padding、border、margin？
关联任务：
任务一
直播时间：
2018-09-19 15:30:00
课堂内容：
视频链接：
PPT链接：
提交按钮：
小课堂内容格式
标题：
【修真院xx（职业）小课堂】课题名称
开场语：
大家好，我是IT修真院XX分院第X期的学员XX，一枚正直纯洁善良的XX程序员，今天给大家分享一下，修真院官网XX（职业）任务X，深度思考中的知识点——XXX
（1）背景介绍：
背景介绍的时候，尽可能的要宽广，讲清楚来龙去脉，讲清楚为什么会需要这个技术。
（2）知识剖析：
讲知识点的时候，尽可能的成体系，学会成体系的去给别人介绍知识。现在很多做的都是零散的，没有分类。
（3）常见问题：
最少列出1个常见问题。
（4）解决方案：
写清楚常见问题的解决方案。
（5）编码实战：
尽可能的去寻找在真实项目中在用的。如果你能找到某个网站在用你说的知识点，这是最好的。学以致用，否则当成练习题就没有意义了。多准备一些demo，讲解过程中将知识点和demo结合，便于大家理解所讲解的知识点。
（6）拓展思考：
知识点之外的拓展思考，由分享人进行讲解，这些东西就是所谓的深度，也是一个人技术水准高低比较的表现。
（7）参考文献：
引入参加文献的时候，在引用的句子后面加上序号【1】。参考文献中列出详细来源。不要去抄别人的东西，这是一个基本的态度。
（8）更多讨论：
Q1：提问人：问题？
A1：回答人（可以是分享人，也可以是其他学员）：回答
Q2：提问人：问题？
A2：回答人（可以是分享人，也可以是其他学员）：回答
Q3：提问人：问题？
A3：回答人（可以是分享人，也可以是其他学员）：回答
（9）鸣谢：
感谢XX、XX师兄，此教程是在他们之前技术分享的基础上完善而成。
（10）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
【修真院CSS小课堂】
如何理解盒模型及其content、padding、border、margin？
开场语：
大家好，我是IT修真院上海分院第10期的学员林璇，今天给大家分享一下，修真院CSS任务一
深度思考中的知识点——如何理解盒模型及其content、padding、border、margin？
（1）背景介绍：
盒子模型的简介
盒子模型的英文名字是叫做box model,而且HTML也是一个盒子
自然就包括了div a span 都可以成为盒子的，盒子模型是分为这几个的
1 content（中心）2 padding（内边距）3 border（边框）4 margin（外边距）
盒子模型分为IE盒子模型和标准盒子模型
关于这五个属性
width(宽度)：内容中心的一个宽度
height(高度)：内容中心的一个高度
padding（内边距）：在边框和内容的一个中间地方，可以直接用padding属性来控制
border（边框）：在内边距和外边距之间的一个边框
margin（外边距）：在最外面的叫做外边距，可以控制margin来创建一个距离外边的一个空白
（2）知识剖析：
1. 盒子模型：
IE盒子模型和标准盒子模型的区别？
在 CSS的标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
.每一个属性的四个部分
盒子模型边框部分，都有上，下，左，右这样的属性可以设置
（3）常见问题：
盒子模型为什么无法贴边？
（4）解决方案：
盒子模型的一个外边距margin是有一个默认的8px，只要在<body>那里进行设置成0就好了，margin：0；
（5）编码实战：
在一些网站中，都运用到了盒子模型，尤其是边框的设置方面，在边框的设置下，尤其是要把外边距变成0，这样的话有助于网站的美观
有的网站的一些东西是用了外边距来撑着的，还有保持居中等等，都是用到了盒子模型中的运用属性，盒子模型就像俄罗斯方块一样的。
一个一个的叠加在一起，生效，实现着各种各样的效果
（6）拓展思考：
border 边框要如何拆分
border是一个大综合属性。比如说：
border:1px solid red;
就是把4个边框，都设置为1px宽度、线型实线、red颜色。
（7）参考文献：
1：生命壹号博客
2：B站视频：盒子模型
（8）更多讨论：
1：问题：盒子模型的最终元素的总宽度计算公式是怎么样的呢？
回答：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
2：问题：盒子模型的最终元素的总高度计算公式是怎么样的呢？
回答：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
3：问题：那我们怎样让我们的元素都遵循W3C标准盒子模型呢？
回答：html的文件头部是不是有一个!DOCTYPE html，有这个，就说明你已经遵循W3C标准盒子模型了。
（9）鸣谢：
感谢王刚师兄，此教程是在他们之前技术分享的基础上完善而成。
（10）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
请您登录 后进行评论
[上海|荣耀师兄]JS-王刚 发表于 2018-09-19 22:54:12 #1
盒模型是一切布局的基础。 注意分辨ie盒子模型和标准盒子模型， 通过两种不同的盒模型可以写出不同的布局方式。 日常学习中，可以利用盒子模型的概念来绘制不同的css图形。这方面多了解一下
回复