盒子模型 DIV
什么是盒子模型
1、盒子模型的定义
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
2、div 标记的定义
**div**是英文division的缩写，意为“**分割、区域**”。<div>标记简单而言就是一个区块容器标记，
可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。**<div>与</div>之间相当于一个容器**，
可以容纳**段落、标题、图像**等各种网页元素，也就是说大多数HTML标记都可以嵌套在<div>标记中，
**<div>中还可以嵌套多层<div>**。
<div>标记非常强大，**通过与id、class等属性配合**，然后使用CSS设置样式，来替代大多数的文本标记。
css div 中 如果 设置 marign: 10px auto; 表示间隔10px，其他居中
3、盒子的宽与高
网页是由多个盒子排列而成的，每个盒子都有固定的大小，在CSS中使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为不同单位的数值或相对于父元素的百分比，实际工作中最常用的是像素值。
注意：
宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（<img />标记和<input />除外）。
DIV的相关属性
1、边框属性
设置内容 样式属性 常用属性值
(必写)边框样式 border-style:上边 [右边 下边 左边];{
none 无（默认）
dashed 虚线
dotted 点线
solid 单实线
double 双实线
}
.father{
border:1px solid #000;
}
边框宽度 border-width:上边 [右边 下边 左边]; 像素值
可以同时写四个像素值，用空格隔开，分别表示顺时针四条边的边框宽度
边框颜色 border-color:上边 [右边 下边 左边];{
颜色值(单词)
#十六进制
rgb(r,g,b)
rgb(r%,g%,b%)
}
可以同时写四个像素值，用空格隔开，分别表示顺时针四条边的边框宽度
综合设置边框 border:四边宽度 四边样式 四边颜色;
圆角边框 border-radius:水平半径参数/垂直半径参数; （两个参数） 像素值或百分比
图片边框 border-images:图片路径 裁切方式/边框宽度/边框扩展距离 重复方式;
2、边距属性
（1）: 内边距
在CSS中padding属性用于设置内边距，同边框属性border一样，padding也是复合属性，其相关设置方法如下：
padding:设置内边距; {
padding-top: 上内边距;
padding-right: 右内边距;
padding-bottom: 下内边距;
padding-left: 左内边距;
padding: 上内边距 [右内边距 下内边距 左内边距];
}
（2）外边距
在CSS中margin属性用于设置外边距，它是一个复合属性，与内边距padding的用法类似，设置外边距的方法如下。
margin:设置外边距 {
margin-top: 上外边距;
margin-right: 右外边距;
margin-bottom: 下外边距;
margin-left: 左外边距;
margin: 上外边距 [右外边距 下外边距 左外边距];
}
（3）box-sizing属性
box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下。
在上面的语法格式中，box-sizing属性的取值可以为content-box或border-box，对它们的解释如下。
box-sizing: content-box/border-box;定义盒子的宽度值和高度值是否包含元素的内边距和边框{
content-box：浏览器对盒模型的解释遵从W3C 标准，当定义width和height时，它的参数值不包括border和padding。
border-box：当定义width和height时，border和padding的参数值被包含在width和height之内。
}
！！！！要学会计算盒子的宽，高
盒子的背景属性
其本质都是盒子
1、 设置背景颜色
在CSS中，使用background-color属性来设置网页元素的背景颜色，其属性值与文本颜色的取值一样，可使用预定义的颜色值、十六进制#RRGGBB或RGB代码rgb(r,g,b)。background-color的默认值为transparent，即背景透明，此时子元素会显示其父元素的背景。
2、 设置背景图像
背景不仅可以设置为某种颜色，还可以将图像作为元素的背景。在CSS中通过background-image属性设置背景图像。
background-image:url(图片地址);
3、 背景与图片不透明度的设置
（1）RGBA模式
RGBA是CSS3新增的颜色模式，它是RGB颜色模式的延伸，该模式是在红、绿、蓝三原色的基础上添加了不透明度参数。其语法格式如下： rgba(r,g,b,alpha);
（2）opacity属性
在CSS3中，使用opacity属性能够使任何元素呈现出透明效果。其语法格式如下：
opacity：（0-1）opacityValue; 取值0-1，0为全透明，越接近1越实体
4、 设置背景图像平铺
默认情况下，背景图像会自动沿着水平和竖直两个方向平铺，如果不希望图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制，该属性的取值如下：
background-repeat:平铺方式; {
repeat： 沿水平和竖直两个方向平铺（默认值）
no-repeat： 不平铺（图像位于元素的左上角，只显示一个）
repeat-x： 只沿水平方向平铺
repeat-y： 只沿竖直方向平铺
}
5、 设置背景图像的位置
如果将背景图像的平铺属性background-repeat定义为no-repeat，图像将默认以元素的左上角为基准点显示。
6、 设置背景图像固定
如果希望背景图像固定在屏幕的某一位置，不随着滚动条移动，可以使用background-attachment属性来设置。background-attachment属性有两个属性值，分别代表不同的含义，具体解释如下：
background-attachment: ; {
scroll： 图像随页面元素一起滚动（默认值）
fixed： 图像固定在屏幕上，不随页面元素滚动。
}
7、 设置背景图像的大小
在CSS3中，background-size属性用于控制背景图像的大小，其基本语法格式如下：
background-size:属性值1 属性值2;
....还有很多属性