HTML盒子模式学习

每一个标签都是一个盒子。

每一个盒子都有四个属性
（1）内容（content：height、width）
盒子里装的东西；
网页中通常是指文字和图片。

（2）填充（padding-上右下左：padding-top、padding-right、padding-bottom、padding-left）内边距
怕盒子里装的（贵重的）东西损坏，而添加不泡沫或者其他搞震的辅料。

（3）边框（borde-上右下左r：border-top、border-right、border-bottom、border-left；border-width、border-style、border-color、border-radius）盒子本身

（4）边界（margin-上右下左：margin-top、margin-right、margin-bottom、margin-left）外边距
盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出、’

所谓盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin）组成。

　　所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

　　盒子模型特性：

​​​​​​​　每个盒子都有：边界、边框、填充、内容 4个属性  每个属性都包括4个部分：上、右、下、左。属性的4部分可以同时设置，也可以分别设置。

一、盒子边框（border）

　　border 属性来定义盒子的边框，该属性包含3个子属性：border-style(边框样式)，border-color(边框颜色)，border-width(边框宽度)。

　　1、定义宽度

　　　　（1）直接在属性后面指定宽度值。

1. border-top-width:0.2em; /*定义顶部边框的宽度为元素内字体大小的 0.2倍*/

2. border-bottom-width: 12px; /* 定义底部边框宽度为12px*/

　　　　（2）使用关键字。（不常用）

　　　　   可以使用 thin、medium 和 thick。不同浏览器对此解析的宽度值不同。很少用到。

　　　　（3）单独为某条边设置宽度。

　　　　　单独为元素的某条变设置宽度，分别使用 border-top-width、border-bottom-width、border-left-width、border-right-width 属性。

　　　　（4）使用border-width 属性速定义边框宽度。　　

1. border-width:2px; /* 定义4个边都为2px*/

2. border-width:2px 4px; /* 定义上下边为2px,左右边为4px*/

3. border-width:2px 3px 4px; /* 定义上边为2px,左右边为3px,下边为4px*/

4. border-width:2px 3px 4px 5px; /* 定义上边2px,右边为 3px,下边为 4px，左边为5px*/

　　　Tips：当定义边框宽度时，必须要定义边框的显示样式，由于默认样式为none,所以仅设置边框的宽度，由于样式不存在，边框宽度也自动被清除为 0。

　　2、定义颜色

　　　　定义边框颜色可以使用颜色名、RGB 颜色值或十六进制颜色值。

　　　　Demo:

border-top-color: #f00;

　　　　为上边框定义红色的边框。

　　3、定义样式

　　　　边框样式是边框显示的基础，CSS 提供了一下几种边框样式：

　　　　

属性值	说明
none	默认值，无边框，不受任何指定的 border-width 影响
hidden	隐藏边框，IE 不支持
dotted	定义边框为点线
dashed	定义边框为虚线
solid	定义边框为实线
double	定义边框为双线边框，两条线及其间隔宽度之和等于指定的border-width 值
groove	根据 border-color 定义 3D 凹槽
ridge	根据 border-color 定义 3D 凸槽
inset	根据 border-color 定义 3D 凹边
outset	根据 border-color 定义 3D 凸边

　　　　Demo：

border-color: #f00;border-style: outset;