css盒模型的属性有：1、margin属性；2、border属性；3、transparent属性；4、padding属性。
本教程操作环境：windows10系统、css3，本文适用于所有品牌的电脑。
CSS盒模型是定义元素周围的间隔、尺寸、外边距、边框以及文本内容和边框之间内边距的一组属性的集合。
（学习视频推荐：css视频教程）
示例代码：
立即学习“前端免费学习笔记（深入）”；
Document
效果图：
由此可见：外边距margin是不可见的，如果设置了父元素的背景，就可以看到；背景色在边框区域设置一个不同的背景，就可以看到内边距（padding）区域。并且盒模型是由margin（外边界）+border（边框）+padding（内边距）+content（内容）构成的。
二、属性介绍
1、margin属性
概念：margin属性应用于盒子外面的空间，或者是位于盒子与文档中其他元素之间的区域，或者是盒子与浏览器窗口之间的区域。margin长在盒子外围的，不会对盒子本身的大小造成影响。
属性：margin-top(上外边界)、margin-right(右外边界)、margin-bottom(下外边界)、margin-left(左外边界)
值：支持length、百分比、auto
用法：
margin:10px 四周(上，右，下，左) margin:10px 20px 上下 左右 margin:10px 20px 30px 上 左右 下 margin:10px 20px 30px 40px 上右下左 margin支持负值！！ 让子元素在父元素里面左右居中：margin:0 auto;
margin常见的bug：
a:当父元素和子元素都没有浮动的情况下：给第一个子元素添加margin-top:会错误的把margin值加在父元素上面
实例代码：
Document
效果图：
结论：当父元素里的第一个子元素（块元素），添加margin-top的时候，会错误的把margin-top的值添加给父元素（建立在当前的元素们，没有添加边框和浮动的前提下）
解决方法：
1、bfc 给父元素添加overflow:hidden;推荐使用
2、给父元素和子元素添加浮动属性；
3、可以给父元素添加边框
4、把margin改为padding
b：相邻两个元素上下margin会重叠，按照较大的值设置。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.boxInner{
width: 100px;
height: 100px;
margin-bottom: 20px;
background: skyblue;
}
.other{
width: 50px;
height: 50px;
background: #999;
margin-top: 20px;
}