1、什么是盒子模型
盒子模型是CSS中重要的指导思想，是网页布局的基石
它认为页面中所有元素都是一个盒子，可以通过设置它的属性进而改变该盒子的显示状态
它认为盒子间是相互影响的
2、盒子模型中常用的盒子属性
width：设置盒子的内容的宽度，属性值为像素值或百分比，如果是块元素默认宽度为父元素的100%，如果是行内元素默认宽度为内容的宽度
height：设置盒子内容的高度，属性值为像素值或百分比，元素的默认高度为自适应高度
border：设置元素的边框
1)border-style：设置边框类型，属性值有solid、dashed、dotted、none
solid：实线
dashed：虚线
dotted：点线
none：无
2)border-width：设置边框宽度，属性值是像素值，值越大，边框越宽
3)border-color：设置边框颜色，属性值为颜色名称、十六进制代码
4)border的复合形式：border：值1值2值3；注意边框的类型是不可以省略的
5)上边框：border-top
6)下边框：border-bottom
7)左边框：border-left
8)右边框：border-right
9)border-radius：设置边框圆角效果，属性值为像素值
10)border-top-left-radius：左上角
11)border-bottom-left-radius：左下角
12)border-top-right-radius：右上角
13)border-bottom-right-radius：右下角
14)border-radius：值，表示四个角的弧度相同
15)border-radius：值1（左上、右下）值2（右上、左下）
16)border-radius：值1（左上）值2（右上、左下）值3（右下）
17)border-radius：值1（左上）值2（右上）值3（右下）值4（左下）
margin：设置页面中元素间的距离，称为外边距，属性值为像素值，值越大，距离越大
1)margin-top：上外边距
2)margin-bottom：下外边距
3)margin-right：右外边距
4)margin-left：左外边距
5)也可以采用值的个数表示上下左右外边距，如
margin：值，表示，四个边距相同
margin：值1（上下）值2（左右）
margin：值1（上）值2（左右）值3（下）
margin：值1（上）值2（右）值3（下）值4（左）
6)注意事项：两个上下关系的元素间的距离采用较大的margin值，而不是和，但是如果是左右关系的元素，那么它们间的距离就是margin之和
padding：设置盒子内容和边框的距离，也称为内边距，属性值为像素值，值越大，间距越大
1)padding-top：上内边距
2)padding-bottom：下内边距
3)padding-left：左内边距
4)padding-right：右内边距
5)也可以通过值的个数来表示内边距
padding：值，表示上下左右相同
padding：值1（上下）值2（左右）
padding：值1（上）值2（左右）值3（下）
padding：值1（上）值2（右）值3（下）值4（左）
3、什么时候用margin，什么时候用padding
如果两个元素是平行关系（即兄弟关系）时，要调节它们的间距只能用margin
如果两个元素是包含和被包含的关系（即父子关系）时，那么要调节它们间的距离可以用margin（子元素），也可以用padding（父元素），注意：当给子元素加margin-top时会出现父元素同步下移的问题，解决方法如下：
1)不给子元素加margin-top，给父元素加padding-top
2)给子元素加margin-top，给父元素加边框
3)给子元素加margin-top，给父元素加pading-top:0.1px;（常用）
4、margin和padding使用技巧
利用*{margin:0;padding:0}清除页面中默认的内外边距
利用margin:0auto使元素在页面中达到居中效果，该方法只适用于块元素
5、盒子的实际高度和宽度（标准盒模型）
实际宽度=左边框+左内边距+width+右内边距+右边框
实际高度=上边框+上内边距+height+下内边距+下边框
6、CSS3中box-sizing：border-box可以将标准盒模型变为怪异盒模型，所谓怪异盒模型就是width包含了边框和内边距，就不用再减了
一般在页面布局中加这个*{
margin=0;padding=0;box-sizing:border-box;
}
二、浮动
1、属性：float，属性值left、right、none
left：元素向左浮动
right：元素向右浮动
none：元素不浮动，默认
2、什么是浮动：所谓浮动就是指设置了float属性的元素会从标准文档流中脱离出来，在浮动流中按照新的排列规则进行排列
标准文档流：所谓标准文档流就是页面默认的排列规则，如果是块元素垂直显示，如果是行内元素或行内块元素在一行显示
浮动流：所谓浮动流就是设置了float属性的元素会从标准流中脱离出来，在标准流的上方新建一个层，在这个成里所有元素都是在一行显示的，我们把这种排列规则称为浮动流
3、浮动所带来的影响
设置了浮动属性的元素会从标准流中脱离出来，它会失去在标准流中的原有位置，该位置会被标准流中的其它元素占据
在浮动流中所有元素都是在一行显示的，但是如果空间不够大，那么元素自动换行
浮动的元素自动变成块元素
浮动的元素宽度为最小宽度，所以为了方便控制，通常给浮动的元素加width
浮动的元素会丢失标准流中的原有位置，标准流中的其它元素会占据它的空间，但是文本会对它形成环绕
一个元素在浮动前会分析它前面的元素的类型，如果是块元素，那么这个元素会在块元素的下方显示
元素都向右浮动后，显示顺序为倒叙
4、父元素的塌陷：如果父元素没有高度，那么此时父元素的高度就是由子元素决定的，如果子元素设置了浮动，那么父元素的高度就会塌陷，父元素的背景色无法显示，另外也会对周边元素造成影响
给父元素设置高度
利用clear属性来清除浮动所带来的影响，clear属性的作用就是清除浮动，属性值为left/right/both/none
1)left：清除左侧的浮动
2)right：清除右侧浮动
3)both：清除两侧浮动
4)none：默认，不清除浮动
利用:after选择器清除浮动，格式：父元素:after{content:””;display:block;clear:both;}
5、浮动的利用
页面布局
制作页面中各个模块
