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

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

1、外边距——margin

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

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

1. /* css页面 */
2. /*Basic container */
3. #container
4. {
5.   margin-top:50px;
6.   margin-left:auto;
7.   margin-right:auto;
8.   margin-bottom:50px;
9.   border:1px solid #000;
10.   background:#ccc;
11.   width:300px;
12. }

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

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

2、内边距——padding

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

1. #container
2. {
3.   padding-top:30px;
4.   padding-left:50%;
5.   padding-right:30px;
6.   padding-bottom:0px;
7. }

建议：由于各浏览器之间默认的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属性进行缩写。

1. /* css页面 */
2. /*Basic container */
3. #container
4. {
5.   border-style:dashed dotted solid ridge;
6.   border-top-width:thin;
7.   border-right-width:20px;
8.   border-bottom-width:medium;
9.   border-left-width:thick;
10.   border-color:#000 #999 #333 #ccc;
11. }
12. /* 另几种缩写形式 */
13. #container
14. {
15.   border-top:#000 thin dashed;
16.   border-right:#999 20px dotted;
17.   border-bottom:#333 medium solid;
18.   border-left:#ccc thick ridge;
19. }
20. #container
21. {
22.   border:#000 thin dashed;
23. }