网页设计之盒子模型（DIV）

盒子模型 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;

....还有很多属性

渐变