一个简单的css网页换色例子（盒子模型）

原始的代码来自北京林业大学的MOOC课程：web前端开发，我自己把这个例子又写了一遍，主要是对css部分做了修改（盒子模型杀我），js和HTML部分与课程的源代码基本相同。现在记录一下，首先是代码：


index部分代码↓

	
	
	
	
	

"init()">
	
"container">
		
"content">
				
"select">
					"btn-red" type="button" οnclick="change('red')">
					"btn-blue" type="button" οnclick="change('blue')">
					"btn-white" type="button" οnclick="change('white')">
				
				
"introduction">
					
WEB前端开发
					

						Web前端开发是指通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
					
				
		
	

然后重点来了：css部分↓
这里每一部分都用不同的颜色标出，以便观察

*{
	margin:0;
	padding:0;
}
body{
	background-color:black;
}
#container{
	width:700px;
	height:400px;
	margin:100px auto;
	/*外层盒子会被内层盒子撑起来，所以这里可以不用设height*/
	background-color: green;
}
#content{
	width:600px;
	height:400px;
	margin:50px auto;
	background-color: grey;
}
#select{
	width:600px;
	height:50px;
	background-color: yellow;
}
#introduction{
	width:600px;
	height:300px;
	/*margin-top:50px;*/
	text-indent:2em;
	line-height: 1.5em;
	font-family: "黑体";
	background-color:pink;
}
#introduction p{
	padding: 40px;
}
#introduction h1{
	text-align: center;
	padding-top:40px;
}
#btn-red,#btn-blue,#btn-white{
	width:20px;
	height:10px;
	float:right;
	margin-right:10px;
	margin-top:20px; 
}
#btn-red{
	background-color: red;
}
#btn-blue{
	background-color: blue;
}
#btn-white{
	background-color: white;
}

网页结果如下（嗯..清奇的配色）

点击右上角的三个按钮就可以实现背景色的变换了。（换的是container的颜色，被前面的颜色覆盖了）



一点总结：
个人认为，盒子模型的核心在于margin和padding两个属性的设置，至于怎么设置，要求粗一点就直接用眼估计再微调，细一点的话算就完事了，（父元素的宽度-子元素宽度）/2=子元素左右的margin。
注：WEB前端开发用的是h1标签，下面的文字用的是p标签，由于把网页margin和padding的所有默认值都去掉了，在设置标签css属性的时候对这两个标签设置的是padding属性（不是margin！）