零基础学前端之CSS盒模型

在网站布局中，我们会使用各种各样的元素，这些元素本质上就是一个个小的容器，也称之为盒子，盒子里面可以放置文本，图片，或者其他元素。

什么是 CSS 盒模型呢？

CSS 盒模型本质上是一个包裹每个 HTML 元素的盒子，包含 margin、border、padding 和 content 四个部分。

浏览器就是通过盒模型，来计算元素在网页中占据的空间大小的。

前面我们介绍过这些盒模型的要素：Content，表示盒子的内容，包含文本、图像等等。Padding，表示填充内容周围的一个区域，它是透明的。Border，表示围绕填充和内容的边框。Margin，表示边框以外的区域，它也是透明的。

我们来举个例子。

创建一个 019-css-box-model 文件夹，在文件夹里创建一个 box-model-1.html 文件和一个box-model-1.css 文件。

构建 html 基础代码，引入样式文件。为了便于比较效果，我们定义两个 div 元素，添加不同的类名，补全文本。

1. HTML
   
2. 
   
3.     盒子模型组成部分:内容,内边距,边框,外边距
   
4. 
   
5. 
   
6.     盒子模型组成部分:内容,内边距,边框,外边距
   
7. 
   
8. CSS
   
9. * {
   
10.   margin:0;
    
11.   padding:0
    
12. }
    
13. div {
    
14.   width: 200px;
    
15.   height: 200px;
    
16. }
    
17. .box1 {
    
18.   background-color: orange;
    
19.   border:20px solid gray;
    
20.   padding:20px;
    
21.   margin:20px;
    
22. }
    
23. .box2 {
    
24.   background-color: yellow;
    
25. }

复制代码