CSS盒子模型

盒子分为四个部分：内容区、内边距、边框、外边距

一、内容区

所有的子元素都在内容区展现,如：width:    height:   background-color:  

如图，设置了一个宽高各为200px，背景色为橙色的盒子。

二、边框

1.border-width:  设置边框的大小（可跟多个值，四个值对应位置为：上.右.下.左，三个值为：上.左右.下，两个值为：上下.左右，一个值则为全部）

2.border-color:   设置边框颜色（默认黑色，也可分别设置四面的颜色，四个值对应位置与边框大小的四个值相同）

3.border-style:    设置边框样式（默认none）（可选：solid---实线，dashed---虚线，dotted---点状虚线，double---双线）

边框也可以直接简写为：border:颜色 大小 样式（空格隔开即可），也可以单独设置某一边的样式：border-top-xxx(上边框）border-right-xxx(右边框）boeder-bottom-xxx(左边框)   boeder-left-xxx(左边框)

三、内边距

内边距---内容与边框之间的距离

用padding  书写，后面可跟top,right,botton,left对应上右下左，规则与边框一样

四、外边距

外边距---当前盒子与其他盒子之间的距离

用margin  书写，规则与边框、内边距一样

外边距有负值，当调整上方外边距用负值时，盒子向下移动；当调整右侧外边距时，盒子默认没效果；当调整下面外边距时，盒子自己本身不动，挤下面盒子；当调整左侧外边距时，盒子向右移动。（可以有负值，方向相反移动）

 如图便是用盒子写导航的展示效果