看书《DIV+CSS商业案例与网页布局开发精讲》_盒子模型、制作logo和banner_随手笔记_html/css_WEB-ITnose

一、盒子模型（box model）

一个盒子又4部分组成：content（内容）、padding（填充）、border（边框）和margin（外边界）

盒子模型有两种：

（1）标准W3C盒子模型

（2）IE盒子模型（content包含padding和border）

为了统一标准，让网页能兼容各个浏览器，必须使用标准W3C盒子模型

如何才算使用？答：在网页的顶部加上DOCTYPE声明

二、盒子模型结构详解

1、CSS边框（border）属性

border有3个属性：border-width（宽度）、border-style（样式）、border-color（颜色）

（1）width：

(1) 单位数值（1px）或关键词（thin、medium、thick）

(2) 如果不设置，默认是medium，一般浏览器解析为2px

(3) 建议用单位数值来绝对定义

（2）style：

none、solid、hidden、dotted、dashed、double、groove、ridge、inset、outset等

3种写法：

（1）border：width style color（4边相同）

例如：border：1px solid #000000

（2）border-left：width style color（4边不同）

例如：border-left：1px solid #000000

（3）border-left-width：【（2）的另一种写法】

border-left-style：

border-left-color：

例如：

border-left-width：1px;

border-left-style：solid;

border-left-color：#000000;

注：

在页面应用中，设置的border也会占据页面空间。所以，当精确计算版面时，

即使在border为1px的情况下，也一定要把border对宽度和高度的影响因素考虑进去。

2、CSS填充（padding）属性

属性：padding（padding-top、padding-right、padding-bottom、padding-left）

属性值：单位数值或百分比

2种写法：

（1）padding：top right bottom left（上右下左??按顺时针方向）

例如：padding：10px 20px 30px 40px;

（2）padding-top：

padding-right：

padding-bottom：

padding-left：

例如：

padding-top：10px;

padding-right：20px;

padding-bottom：30px;

padding-left：40px;

3、CSS外边界（margin）属性

属性：margin（margin-top、margin-right、margin-bottom、margin-left）

属性值：单位数值或百分比

2种写法：

（1）margin：top right bottom left（上右下左??按顺时针方向）

例如：margin：10px 20px 30px 40px;

（2）margin-top：

margin-right：

margin-bottom：

margin-left：

例如：

margin-top：10px;

margin-right：20px;

margin-bottom：30px;

margin-left：40px;

注：

margin是一个非常有用的CSS属性，在实际应用中，还可以将它的值设为负数，以达到页面版面的要求。