新手学习：关于盒子的边框，外边距，内边距学习

盒子模型图：

1.边框用border：书写形式，border: 宽度 边框形状 颜色；

1）代码  border: 1px solid  red;

  宽度用像素单位px;   颜色：不用说了；

  边框形状常用：solid(表示实线)，dotted(点线)，dashed(虚线)；更多见下面附图；

2）单独加某一边框，则用border-right,border-left,border-top,border-bottom

2.内边距padding: 书写形式，padding: 上部内边距 右  下  左；还有单独对某一边的用法；

 1）代码  padding: 10px 5px 15px 20px;表示，上内边距10px,右内边距5px，下内边距15px，左             内边距20px;

2）注意，如盒子没有大小，则盒子不会被撑开，如盒子有大小，则盒子会被撑开，即如果给了盒子大小，再给内边框，盒子大小就是相加；解决办法：通过计算给出盒子的大小时，是减去内边框大小的像素；还有一种方式就是加上代码box-sizing:  border-box ;

3.外边距用margin：书写形式，margin: 上部外边距 右  下  左；

1）代码：margin: 10px 5px 15px  20px;    表示，上外边距10px,右外边距5px，下外边距15px，左外边距20px;

2）单独加某一外边距，则用margin-right,margin-left,margin-top,margin-bottom;

3)可以用在浮动时的边距控制；

  边框形状附件如图