盒子模型

定义：CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

网页设计中的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

 

盒子的三种定位形式：

在标准流下定位

在浮动属性下定位

在定位属性下定位

.abc {
    /* 示例1 */
    color: #fff;
    background-color: #7BAEEF;
    height: 26px;
    padding-left: 10px;
    font-size: 14px;
#bcd {
    /* 示例2 */
    width: 180px;
    height: 382px;
    margin-left:5px;
    margin-top:5px;
    margin-right:5px;
    margin-bottom: 10px;

属性设置

1）border

border的属性主要有三个，color（颜色）、width（粗细）和style（样式）。在使用CSS设置边框时，可以分别使用border-width, border-color 和border-style来设置。

border-width设置粗细程度：thin（细）、 medium （适中）、thick（粗）和 <length>(具体数值)。

style设置边框风格：none(无格式)，hidden（隐藏），dotted（点线式）等。

color颜色设置：border-color: red 。

2）padding

用于控制内容与边距间的距离。

Padding可以有最多4个属性值。

1个：上下左右边框属性值。

2个:第一个是上下边框属性值，第二个是左右边框属性值。

3个：第一个是上边框属性值，第二个是左右边框属性值，第三个是下边框属性值。

4个：顺时针，上右下左边框属性值。

注意：padding可以设置1、2、3或4个属性

3）margin

折叠margin是：2个或以上盒模型之间（关系可以是相邻或嵌套）相邻的margin属性（这之间不能有非空内容、padding区域、border边框或使用清除分离方法）结合表示为一个单独的margin。