Css基础学习（三）—构造块

div，看见这个一定很兴奋吧。最流行的网站布局就是靠它加上css来实现的，讲css没有它怎么行呢。不过今天我们暂时不谈论布局，就对块的常用属性做一个较为详细的介绍，为后面的布局打下坚实的基础，那我们就开始把。
1、外边距——margin

外边距属性，用户设定HTML元素和在它外部的元素之间的间距，可以对元素的上下左右分别设置不同的外边距。注意外边距值不从父元素中继承。

设定外边距属性值有三种方法：长度、比例值或者auto。

/* css页面 */
/*Basic container */
#container
{
margin-top:50px;
margin-left:auto;
margin-right:auto;
margin-bottom:50px;
border:1px solid #000;
background:#ccc;
width:300px;
}

<!--HTML页面-->
<div id="container">
Content<br/><p>I'm also in a box!</p>
</div>

上面的样式使div的上边距50px，使用margin:auto将元素居中；是否一定会和浏览器上方距离50px还不一定，这还要看body的样式的上内距的值来决定。经过我在ie中的测试，这两个值会取较大的一个值作为两者之间的间距。
注意：margin:auto此属性对IE6居然无效！！！所以居中需要使用其它属性，比如align="center"。

2、内边距——padding

内边距是HTML元素的边框和元素内容之间的距离。内边距的设定值可以选择长度和百分比，没有auto值。

#container
{
padding-top:30px;
padding-left:50%;
padding-right:30px;
padding-bottom:0px;
}

建议：由于各浏览器之间默认的margin和padding的值都不一样，因此建议在body选择器中设定margin和padding的值。

3、边框——border

任何元素在周边都可以有边框，可以设置四边都有边框，也可以只设置一部分。边框的属性比较灵活，你可以设置宽度、颜色和样式等。

border-style属性

此属性用来设定元素边框样式。边框样式有：none(无边框)、dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、groove(凹槽)、ridge(凸槽)、inset(凹边)、outset(凸边)。

border-width属性

设定边框宽度，可以逐个或一次性定义宽度；在定义border-width属性值之前，需要先声明border-style属性。本属性还存在三个设定值：thin、medium和thick。不设定此属性值，默认为medium。

border-color属性

颜色属性只有一个，所以如果定义多种颜色，必须使用缩写方式。注意一点：如果不声明边框的颜色，边框将继承元素或父元素中的对应值。

border属性

如果边框四边的设定值都一样，则可以使用border属性进行缩写。

/* css页面 */
/*Basic container */
#container
{
border-style:dashed dotted solid ridge;
border-top-width:thin;
border-right-width:20px;
border-bottom-width:medium;
border-left-width:thick;
border-color:#000 #999 #333 #ccc;
}
/* 另几种缩写形式 */
#container
{
border-top:#000 thin dashed;
border-right:#999 20px dotted;
border-bottom:#333 medium solid;
border-left:#ccc thick ridge;
}
#container
{
border:#000 thin dashed;
}