【前端学习】盒子模型

盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。

盒子模型的组成

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。

1、边框 border

边框有三部分：边框宽度、边框样式、边框样式。

语法：border ： border-width

                           border-style

                           border-color 

边框简写： border：1px solid black； 

表格细线边框：border设定的宽度是1px，但是效果却显的有点宽了些。原因是表格的边框默认是分开的，这样就会相当于是2px，所以宽了些。
解决方法就是加上：
border-collapse: collapse;
边框合并为一个单一的边框 

2、盒子模型外边距 margin

margin，盒子的外边框，他是完全透明的，开发者只可以设置它的边距。

margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。

• margin-top：上边距
• margin-buttom：下边距
• margin-left：左边距
• margin-right：右边距

也可以直接使用简写属性margin同时设置四条边的宽度。

    <!--margin: 5px;                    1个值，代表上下左右都有5像素外边距-->
    <!--pmargin: 5px 10px;               2个值，上下外边距是5像素，左右外边距是10像素-->
    <!--margin: 5px 10px 20px;          3个值，上外边距5像素，左右外边距10像素，下外边距20像素-->
    <!--margin: 5px 10px 20px 30px;     4个值，上外边距5像素，右外边距10像素，下外边距20像素，左内边距30像素-->

3、盒子模型内边距 padding

padding表示盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。

与margin类似，padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。

• padding-top：上部填充
• padding-bottom：下部填充
• padding-left：左部填充
• padding-right：右部填充

也可以直接使用简写属性padding同时设置四条边的宽度。

    <!--padding: 5px;                    1个值，代表上下左右都有5像素内边距-->
    <!--padding: 5px 10px;               2个值，上下内边距是5像素，左右内边距是10像素-->
    <!--padding: 5px 10px 20px;          3个值，上内边距5像素，左右内边距10像素，下内边距20像素-->
    <!--padding: 5px 10px 20px 30px;     4个值，上内边距5像素，右内边距10像素，下内边距20像素，左内边距30像素-->

        

CSS:清除内外边距 （一般写在所有样式之前）
*{

padding:0;            /*清除内边距*/

margin:0;              /*清除外边距*/

}