CSS之border margin padding

你可以看到页面效果很简单，就是用一个header这个大盒子，装着两个小盒子header_left,header_right.那么我们该 如何定义这些盒子的样式呢？（这里我就不解释定义css的原则了）

1.首先定义body的样式:

body{
font-size:14px;
font-weight:bold;

/*定义页面的背景图片*/
background:url(img/bg.jpg) 0 0 repeat-x;
}

根据css2.0帮助手册，你可以知道background拥有5个常用属性：背景颜色，背景图片，是否重复，是否滚动，图片坐标

2.定义大盒子header样式：

#header{
background:#FFFFFF;
width:760px;
height:140px;
border: yellow 1px solid;
}

这段代码应该没什么难度吧。

3.定义左边的盒子header_left的样式：

.header_left{
width:480px;
height:120px;
background-color:#006666;
color:#FFFFFF;
float:left;
margin:10px 0px 10px 2px;
border: #00FF00 1px solid;
}

这里要注意float属性，因为div默认是自动换行的，我们要用header装着header_left并且让header_left左靠齐就需要这样处理。margin是这里要着重说的属性，它的四个值就是代表header_left左边的盒子与外层header盒子上，右，下，左的距离。border是盒子的边框。

3.定义右边盒子header_right的样式：

.header_right{
  width:270px;
  height:120px;
  float:right;
  background-color:#000000;
  color:#FFFFFF;
  border: red 1px solid;
  margin:10px 2px 0px 0px;
}

和左边盒子样式差不多，如果你还不是很明白，你可以把上面margin的四个值改大点看看效果。

4.定义左边盒子里标签p的样式：

.header_left  p{
   font-size:24px;
   font-weight:bold;  
   padding:50px 0px 50px 150px;
}

这里要主要是padding属性，它表示标签p里的内容距离左边盒子header_left的上，右，下，左边的距离。

5.定义右边盒子里h1标签的样式：

.header_right h1{
 font-size:24px;
 padding:50px;
 overflow:hidden;
}

这里主要是说overflow属性，根据帮助知道它有auto(自动),hidden(如果内容超过边框就隐藏),scoll(内容超出显示滚动条)几个常用属性，可以自己分别试一试。