盒模型CSS

每一个盒子由以下几部分组成：

1.内容区（content）

2.内边距（padding）

3.边框(border)

PS：盒子的可见框的大小由内容区、内边距和边框共同决定。

一   边框至少要设置三个样式：

1.边框的宽度：border-width（默认值为3px）;

1）可以写四个值，值的情况分别是，上，右，下，左（顺时针方向）

eg:

 2）可以写三个值，值的情况分别是，上，左右，下

eg:

3）可以写两个值，值的情况分别是，上下，左右

eg:

2.边框的颜色：border-color;

3.边框的样式：border-style;

二 padding(内边距）

写法：

or 

 三 外边距（margin）：外边距不会影响盒子可见框的大小，只会影响盒子的位置。

-一共由四个方向的外边距：

margin-top:上外边距，设置一个正值，元素会向下移动

margin-right:默认情况下设置它不会有任何效果

margin-bottom:下外边距，设置一个正值，其下边的元素会向下移动

margin-left：左外边距，设置一个正值，元素会向右移动

PS：设置左和上外边距则会移动元素自身；而设置下和右外边距会移动其他元素。

-margin的简写属性：写法和padding一样