盒子模型

设置颜色：
-- border-color:
- 统一设置：    例：border-color:#000;
- 分上下 和 左右 ： 例：border-color:#000 #369;
- 分上  左右  下 ： 例：border-color:#369 #000 #F00; 
- 同时设置4条边框颜色时：顺序按 上、右、下、左，属性之间用空格隔开。
例：border-color:#369 #000 #00F #F00;


-- border-width:
属性：
thin：细的边框
medium：默认值
thick：粗的边框
像素值：20px
- 统一设置：    例：border-width:5px;
- 分上下 和 左右 ： 例：border-width:20px 2px;
- 分上  左右  下 ： 例：border-width:5px 1px 6px; 
- 同时设置4条边框粗细时：顺序按 上、右、下、左，属性之间用空格隔开。
例：border-color:1px 3px 5px 2px;


-- border-style:
属性：
常用属性：
none：无边框
solid：实线边框
不常用属性：
dotted:点线边框
dashed：虚线边框
double：双线边框
ridge: 园线边框


- 统一设置：    例：border-width:solid;
- 分上下 和 左右 ： 例：border-width:solid dotted;
- 分上  左右  下 ： 例：border-width:solid dotted dashed; 
- 同时设置4条边框样式时：顺序按 上、右、下、左，属性之间用空格隔开。
例：border-style:solid dotted dashed double;




-- border 简写属性：
1.-- 边框：border：可以统一设置
粗细  风格  颜色
语法：border：width style color；
    例： border：2px solid red；


分开设置：
上：border-top:
下：border-bottom:
左：border-left:
右：border-right:
分开设置 例： border-right:2px dashed blue；





2.-- 内边距：padding：可以统一设置
语法：padding：length；
例：padding:20px;
分开设置：
上：padding-top：
下：padding-bottom:
左：padding-left:
右：padding-right:


         分开设置 例：padding-right:30px；






3.-- 外边距：margin：可以统一设置《还有一个特殊的值；auto<居中显示时使用>》
语法：margin：length；
margin：20px；
分开设置：
上：margin-top：
下：margin-bottom:
左：margin-left:
右：margin-right:

 分开设置 例：margin-right:30px；






-- 标准文档流的组成：由块级元素和内联元素两类元素组成。


块级元素(blocklevel)：独占一行，拥有自己的区域，《例：标题标签、段落标签、<div>》


内联元素(inline): 没有自己的区域《<span>、<a>、<strong>、<img/>》






-- display的属性：


- display的值：
    block: 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符。《简单的说就是换行》
   inline：内联元素的默认值，元素会被显示为内联元素，该元素前后没有换行符。《不换行》
     none：设置该元素不会被显示。






-- 圆角外框代码：
#div1{
width:300px;
border-width:1px;
border-style:solid;
-moz-border-radius:11px;
-khtml-border-radius:11px;
-webkit-border-radius:11px;
border-radius:11px;
padding:5px;
}