CSS不完全手册之容器属性
■ 容器的概念：
根据CSS对网页样式的定义，页面上的所有元素都放在一个容器里，这个容器叫BOX。BOX也就包括：
- 元素本身；
- 围绕元素的空格；(padding)
- 围绕元素空格外的边框；(border)
- 边框外的边距。(margin)
■ 四个边距：
margin用于设定上，右，下，左，边距：
- body {margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px}
- body {margin:10px 20px 30px 40px}/*效果与上面方式相同*/
以上参数值同样可以是其他长度单位（如：pt,em等）或比例。
■ 顶，底，左，右空格填充：
padding用于设置空格填充范围，用法与边距属性相同：
- h3 {margin-top:10px;margin-right:20px;margin-bottom:30px;margin-
left:40px};
- h3 {margin:10px 20px 30px 40px}
■ 边框：
border可设定的属性很多，包括颜色和宽度，关键是可以指定每个边的宽度和每个边的颜色 。
- 边框宽度border-width可以是thin,medium,thick或长度值：
- h3 {border-top-width:2px;border-right-width:4px;border-bottom-width:6px;border-left-width:8px};
- h3 {border-width:2px 4px 6px 8px}/*与上面相同*/
- p {border-top-width:thin;border-right-width:medium;border-bottom-
width:thick;border-left-width:none};
- p {border-width:thin medium thick none}/*与上面相同，左边框将不显示*/
- 边框颜色border-color定义方法与宽度定义相似，颜色值也可以用RGB值（如#ff00ff）：
- h3 {border-color:red blue yellow green}/*上:红；右：蓝；下：黄；左：绿*/
- h3 {border-color:red blue }/*上，下:红；右，左：蓝；*/
- h3 {border-color:#ff00ff }/*所有边框为#ff00ff色*/
- 边框线的线条式样border-style，有九个关键字来描述：
- none /*不画边框，不论边框厚度是多少*/
- dotted /*由点组成的虚线*/
- dash /*由短线组成的虚线*/
- solid /*实线 */
- double /*双实线*/
- groove /*3D沟状*/
- ridge /*3D脊状*/
- inset /*3D内嵌*/
- outset /*3D外嵌*/
其使用方法与厚度、颜色相似，不再多讲。
- 一条边框的颜色，厚度，线条式样可以在一条语句中定义。例：
- h1 {border-top:5px solid red}
这么多的参数，这么多的组合，要想得心应手，不下一番功夫去练习是不可能达到的。
本文作者:
«
»