css之盒子模型

盒子模型

每个元素都可以看做是一个盒子一个完整的盒子是由内容，padding，border，margin组成如下图

1.盒子的宽和高

盒子的宽和高设定后，再给这个元素增加边框或者内外边距的话，那么此时盒子的宽高就是原来的加上新增的
例如：一个div宽为30px，高位20px此时给他加上一个5px的边框那么此时它的高度为40px，宽度为30px。

2.边框

1.边框的三个方面
width ，边框的宽度
color 边框的颜色
style 边框的样式
2.边框的综合定义
（1）分开单独设置

border-width:1px;
border-color:#00f;
border-style:solid

(2)使用综合属性``

border：1px #00f solid

注：这三个值没有先后顺序
（3）四边独立设置

border-left-width：1px；
border-left-color：#00f；
border-left-style：solid；

3.内边距

边框和内容之间的空白宽度
1.padding的综合设置

padding：2px

四个内边距都为2px
2.padding的单边设置

padding-left：2px

左边边框和内容之间的距离为2px

4.外边距

标签和标签之间的空白宽度
外边距的设置是相叠加的
1.margin的综合设置`

margin：10px；

和四边邻近的标签距离都为10px
2.margin的单边设置

margin-left:10px；

标签距左边10px

5.背景

1.background-color 定义标签的背景颜色
2.background-image 定义背景图片
3.background-repeat 定义图片的显示方式

属性t	意义
repeat	图片重复
repeat-x	图片横向重复
repeat-y	图片纵向重复
no-repeat	图片不重复

4.background-position 定义背景图片的位置
（1）直接使用两个定位单词

background-position：right top；

（2）使用x，y坐标

background-position：20px 30px