1.什么是盒子模型

盒子模型是CSS样式修饰之后一个元素占用整个HTML页面的空间大小操作方式

存在外边距，边框，内边距和元素本身

2.边框、内外边距的界限

border-width:边框宽度
border-style:边框样式
solid 实线 double 双实线/空心线
dashed 虚线 dotted 圆点虚线
border-color:边框颜色

border: 边框宽度, 边框样式, 边框颜色;
例如: border: 10px solid black;

 <style> div { 
        width: 200px;
        height: 200px;
        background-color: red;
        
        border: 10px solid black;
        
        
        
    }
</style>

3.内边距、边框以内的世界

<style> div { 
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            border: 5px solid red;
 
            
            
            
            
            
            
            padding: 100px 200px 150px 50px;
        }
    </style>

4.外边距margin

#id1 { 
            
            
            
            
            
            
            
 
        }

5.margin问题

 <style>
        
        * { 
            margin: 0;
            padding: 0;
        }
        div { 
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>