从零开始学_JavaScript_系列（六）——CSS的padding、margin、border属性超详细解释（图文）

结论请看最后的图片

关于定义：

margin：层的边框以外留的空白

background-color：背景颜色

background-image：背景图片

padding：层的边框到层的内容之间的空白

border：边框

content：内容

 

关于四个方向：

先上图：

测试：（有些结论是验证后copy现有的，因为纯测试不可能推出必然结果）

①首先定义三个：body为背景，one为测试块，another为对比块

body
{
       background-color:#000;
}
.one
{
       position:absolute;
       background-color:#333;           /*黑色背景*/
       width:200px;
       height:200px;
       text-align:center;
       font-size:50px;
}
.another
{
       position:absolute;
       top:250px;
       background-color:#999;
       width:200px;
       height:200px;
       text-align:center;
       font-size:50px;
}

效果：

②向测试块追加属性margin（控制块级元素之间的距离）：

margin:200px;

效果为：

说明：

<1>margin本身是透明的（背景还是黑色）；

<2> margin:200px;是向四个方向追加200px，相当于上下、左右各增加400px；

<3>单纯追加margin-top:200px; 将导致原有块往下移动200px距离；

假如删除两个块的：      position:absolute;  将导致当前块和之后的块都移动相对位置。

变化前：

 

 

变化后：

<4>margin-left:200px  不会使得后面的块占用之前块的位置（因为相当于前块width增加200px）

 

 

③向块内追加padding属性：（控制块级元素内部）

padding:200px;追加后：

<1>说明padding分为四个方向。200相当于每边追加200px

 

padding-right:200px; 追加后：

<1>说明padding不影响块内文字原有布局（文字还在原来位置）。

 

 

④关于border：

语法：

border: 粗细 样式 颜色;

 

关于样式：

·        none: 无样式

·        hidden: 除了同表格的边框发生冲突的时候,其它同none

·        dotted: 点划线

·        dashed: 虚线

·        solid: 实线

·        double: 双线,两条线加上中间的空白等于border-width的取值

·        groove: 槽状

·        ridge: 脊状,和groove相反

·        inset: 凹陷

·        outset:凸出,和inset相反

 

追加border:100px groove red;

效果说明：

<1>border的第一个参数同样指每个边增加的数值。

<2>第二个参数是样式（更多样式参考上面）；

<3>第三个参数是颜色（也可以写为#000这种形式）；

 

 

 

⑤border和padding的双重追加

       padding-right:200px;

       border:50px double #fff;

效果说明：

①border在padding外侧（二者没有重叠部分）；

 

 

 

⑥border、padding、margin三者同时追加：

       padding-right:200px;

       border:50px double #fff;

       margin-bottom:100px;

效果：

效果说明：

①margin在border的更外面。

 

 

总结：

①最外面是margin：

不能染色（透明的），属于块间元素（控制块和块的距离）；可以选择宽度，可以只影响某一个方位。

 

②次外面是border：

可以染色（同时也受背景图片/背景颜色的影响），可以选择样式，可以选择宽度，可以只在某一个方位应用如：border-left:50pxdouble #fff;

 

③再次是padding：

可以染色（根据background-color），受背景图片的影响，可以选择宽度，可以只影响某一个方位。不影响最内层的文字。

 

④最内层是content：

文本内容区，受width、height、背景图片、背景颜色等影响。

 

如图：