css 盒子模型

1.盒子模型：
可以认为HTML中每一个区块都称为一个盒子
有5个重要的属性：
width宽度，height高度，padding内边距/填充，border边框，margin外边距

width，height，padding，margin取值可以是像素px,百分比，比例em

padding内边距/填充:元素的内容与边框之间的距离
margin外边距：元素边框之外的距离，元素与元素之间的距离


padding和margin取值：
   一个值（上下左右）
   两个值（上下 ， 左右）
   三个值（上  ，左右 ，下）
   四个值（上，右，下，左）
   
   padding:10px 20px 30px 40px;
     等价于
    padding-top:10px;
			padding-bottom: 30px;
			padding-right: 20px;
			padding-left: 40px;

2.元素的默认样式
body h1-h6 p ul a

	/*重置默认样式*/
		*{
			padding: 0;
			margin: 0;
		}			
			
	/*默认样式重置(css reset)*/
	body,p,h1,h2,h3,h4,h5,h6,dl,dd{   
	margin: 0;    
	font-size: 12px; /* 中文字体大小的最小值 */
	}
	ol,ul {
	       list-style: none; /* 去除列表样式 */
	       padding: 0;
	       margin: 0;
	     }
	a {text-decoration: none;}

3.元素分类
行级元素：
特点：在同一行显示，宽高由内容决定，直接设置宽高无效

块级元素：<pre>	<p> <h1>...<h6> <div>  <ul> <li>  <ol><li>  <dl> <dt><dd>		<form>
   特点：默认独占一行，宽高可以直接设置
 
行内的块级元素：<img>   <form>表单中的所有元素
     特点：在同一行显示，宽高由内容决定，可以直接设置宽高 

4.display属性
block块级元素
inline行级元素
inline-block行内的块级元素
none 隐藏（不占网页尺寸）

  隐藏的另一种写法：visibility: hidden;  （占网页尺寸的）