100天UI学习笔记-CSS盒模型
女票催我更新站酷……默默想说：还不是我爱你（陪你玩）才断更的……
盒模型结构
每个盒子都有4个属性：
边界（外边距、margin）
边框（border）
填充（补白、内边距、padding）
内容（content）
每个属性都有4个部分：
上、下、左、右
content是盒子里装的Mac电脑，padding是保护Mac的泡沫，border是画有苹果logo的Mac包装盒，margin是你与Mac的距离……
定义边界
margin
margin-top 顶部边界
margin-bottom 底部边界
margin-left 左侧边界
margin-right 右侧边界
margin:10px 上下左右10px间距
margin:10px 30px 上下10px间距，左右30px间距
margin:10px 30px 50px 上10px间距，左右30px间距，下50px间距（上中下）
margin:10px 30px 50px 100px 上10px间距，右30px间距，下50px间距，左100px间距（顺时针）
定义边框
border
border-style 边框样式
border-color 边框颜色
border-width 边框宽度
border-style:solid 实线
border-style:dashed 虚线
border-style:dotted 点线
定义补白
padding
padding-top 顶部补白
padding-bottom 底部补白
padding-left 左侧补白
padding-right 右侧补白
如果在没有明确定义元素的宽度和高度情况下，使用补白来调整元素内容的显示位置要比边界更加安全、可靠。
*{margin:0;padding:0;} 清楚所有元素的预定样式
margin:0 auto 元素水平居中
盒模型除了像装Mac的盒子外，是不是还像下面的这幅画呢？
