盒子模型

一、什么是盒子模型

1.     盒子模型是CSS中重要的指导思想，是网页布局的基石

2.     它认为页面中所有元素都是一个盒子，可以通过设置它的属性进而改变该盒子的显示状态

3.     它认为盒子间是相互影响的

二、盒子模型中常用的盒子属性

1.     width：设置盒子的内容的宽度，属性值为像素值或百分比，如果是块元素默认宽度为父元素的100%，如果是行内元素默认宽度为内容的宽度

2.     height：设置盒子内容的高度，属性值为像素值或百分比，元素的默认高度为自适应高度

3.     border：设置元素的边框

1)    border-style：设置边框类型，属性值有solid、dashed、dotted、none

l  solid：实线

l  dashed：虚线

l  dotted：点线

l  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（左下）

4.     margin：设置页面中元素间的距离，称为外边距，属性值为像素值，值越大，距离越大

1)    margin-top：上外边距

2)    margin-bottom：下外边距

3)    margin-right：右外边距

4)    margin-left：左外边距

5)    也可以采用值的个数表示上下左右外边距，如

l  margin：值，表示，四个边距相同

l  margin：值1（上下）   值2（左右）

l  margin：值1（上）   值2（左右）   值3（下）

l  margin：值1（上）   值2（右）    值3（下）   值4（左）

6)    注意事项：两个上下关系的元素间的距离采用较大的margin值，而不是和，但是如果是左右关系的元素，那么它们间的距离就是margin之和

5.      padding：设置盒子内容和边框的距离，也称为内边距，属性值为像素值，值越大，间距越大

1)    padding-top：上内边距

2)    padding-bottom：下内边距

3)    padding-left：左内边距

4)    padding-right：右内边距

5)    也可以通过值的个数来表示内边距

l  padding：值，表示上下左右相同

l  padding：值1（上下）   值2（左右）

l  padding：值1（上）   值2（左右）    值3（下）

l  padding：值1（上）   值2（右）   值3（下）   值4（左）

三、什么时候用margin，什么时候用padding

1.     如果两个元素是平行关系（即兄弟关系）时，要调节它们的间距只能用margin

2.     如果两个元素是包含和被包含的关系（即父子关系）时，那么要调节它们间的距离可以用margin（子元素），也可以用padding（父元素），注意：当给子元素加margin-top时会出现父元素同步下移的问题，解决方法如下：

1)    不给子元素加margin-top，给父元素加padding-top

2)    给子元素加margin-top，给父元素加边框

3)    给子元素加margin-top，给父元素加pading-top:0.1px;

四、margin和padding使用技巧

1.     利用*{margin:0;padding:0}清除页面中默认的内外边距

2.     利用margin: 0 auto使元素在页面中达到居中效果，该方法只适用于块元素

五、盒子的实际高度和宽度（标准盒模型）

1.     实际宽度=左边框+左内边距+width+右内边距+右边框

2.     实际高度=上边框+上内边距+height+下内边距+下边框

六、CSS3中box-sizing：border-box可以将标准盒模型变为怪异盒模型，所谓怪异盒模型就是width包含了边框和内边距，就不用再减了