padding
样式名分边
padding-top
padding-right
padding-bottom
padding-left
多个样式值
padding: 2px（四边）
padding: 5px 10px（上下、左右）
padding: 5px 10px 4px（上、左右、下）
padding: 5px 10px 4px 8px（上、右、下、左）
Border
border-style
border-top-style、border-right-style、
border-bottom-style、border-left-style
border-width、border-color：四边
例 p.aside {border-style: solid dotted dashed double
//上、下
p {border-style: solid; border-width: 15px 5px
15px 5px;} //上、下
margin
margin-top、margin-right、margin-bottom、margin-left
p {margin: 20px 30px 30px 20px;}
盒子模型
盒子模型示意图
元素：width, height
内边距：padding
边框：border
外边距：margin
合并问题模板
样式名称：是否分边
样式值：多个值的含义
流布局
流布局（默认布局方式）
1 行内元素在同一行中水平排列
2 块级元素的盒子占据一整行
3行内元素从左至右
4块级元素从上至下
5 block样式
浮动布局
1浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
2由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
定位布局
相对定位（position: relative）
• 相对于流布局再定位
• 原本所占的空间仍保留
绝对定位（position: absolute）
• 以距离它最近的设置了定位属性的父元素为基准
• 脱离标准流
所学随便做的一个小事例
