新手上路 二

CSS盒子模型（盒子模型）

所有 HTML 元素都可以使用“盒子”，在 CSS 中，“盒子模型”是设计和组件时使用的术语。

CSS 盒子模型上本质是一个盒子，包裹在周围的 HTML 元素，它包括：边距，边框，填充物，和实际内容。

盒模型允许我们在其他元素和周围元素周围的空间元素。

部分不同的说明：

• 边距（外边距） - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕一周的边距和内容外的边框。
• Padding(内边距) -清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

元素的宽度和高度

下面的例子中的元素的总宽度为300px：

div {宽度：300像素 
     ;
    边框：25像素纯绿色   ;
    填充：25像素 ;
    边距：25像素 ;
}

 

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+右手距+右手距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

   div {
        margin: 10px auto;
    }
    
    .header {
        width: 600px;
        height: 100px;
        text-align: center;
        background-color: green;
        border: 1px solid gray;
    }
    
    .body {
        width: 600px;
        height: 600px;
        text-align: center;
        background-color: purple;
        border: 1px solid gray;
    }
    
    .footer {
        width: 600px;
        height: 100px;
        text-align: center;
        background-color: green;
        border: 1px solid gray;
    }