css盒模型

什么是盒模型？
在网页中，每一个区域都由大量的元素组成。每一个元素在页面中，都会生成一个盒子。盒子的类型都各不相同，摆放的方式也不向同。所以就在页面中，每个盒子的显示都是不同的！
下面，是我在学习中掌握的盒子的知识：
盒子的类型：
	 	1：display:inline   行盒
	 	2：display:block  块盒
	 	3：display:其他取值  （其他盒子）
盒子的组成:
每个元素生成的盒子内容都是由四个部分组成：
	 1. margin :外边距与其他盒子之间的距离 
	 		auto	浏览器计算外边距。
			length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
			%	规定基于父元素的宽度的百分比的外边距。
			inherit	规定应该从父元素继承外边距。
	 3. border:边框 	
	 	 border-width	指定边框的宽度
		border-style	指定边框的样式
		border-color	指定边框的颜色
		inherit	指定应该从父元素继承border属性值
	 4. padding:内边距    边框与内容之间的距离 
	 		表示内容和边框之间的距离:
			1. 取一个值，代表四个方向
			2. 取两个值：代表上下     左右
			3. 取三个值：代表上、左右、下
			4. 取四个值：代表上、右、下、左
			   PE：每个值之间的分隔符时空格；
	 5. content:内容    内容的宽度和高度
	 		Content属性值:
			none	设置Content，如果指定成Nothing
			normal	设置content，如果指定的话，正常，默认是"none"（该是nothing）
			counter	设定计数器内容
			attr(attribute)	设置Content作为选择器的属性之一。
			string	设置Content到你指定的文本
			open-quote	设置Content是开口引号
			close-quote	设置Content是闭合引号
			no-open-quote	如果指定，移除内容的开始引号
			no-close-quote	如果指定，移除内容的闭合引号
			url(url)	设置某种媒体（图像，声音，视频等内容）
			inherit	指定的content属性的值，应该从父元素继承

##子盒子

1. 内容盒：由content组成；
2. 填充盒子：包含padding、contemt组成；
   严格意义上来说，overflow指代溢出，是指溢出填充盒【演出】
3. 边框盒：由border、padding、contemt组成；
   PE：
   1. 在检查器中，鼠标移到某个标签。页面显示的时该标签边框盒的尺寸，不包含maegin。实际上，是以包含的。知识没由显示出来。
   2. 背景色默认渲染区域就是边框盒
4. 盒子的阴影
   1. box-shadw:盒子的阴影
      取值：
      1. 一个值：x轴偏移量（宽、正：向右 负值：向左）
      2. 二个值：y轴偏移量（高 、正：向下 负值：向上）
      3. 三个值：模糊值
      4. 四个值：阴影扩散的范围（可选/可不写）
      5. 五个值：颜色
      5:box-sizing（宽高的设置范围）取值：
   2. border-box(设置的宽高事边框盒的尺寸)
   3. content-box(设置的宽高事内容盒的尺寸)(默认值)