#CSS 的盒子模型

HTML 元素在空间上由内容、内边距、边框、外边距四个部分构成，如图所示：

    
外边距 margin
    

        

        

            
边框 border
                

                    

                    

                        
内边距 padding
                        

                            

                            

                                内容 content
                            
                            

                        
                        

                    
                    

                
            

        
        

    
    

在 CSS 中通过 margin, padding，border 属性分别设置外边距，内边距和边框。

示例：

<div style="background-color:green; overflow:hidden;">
    <div style="margin: 30px; padding: 30px; border: 3px solid red; background-color:#212121; color:cyan;">
        margin: 30px; <br/>
        padding: 30px; <br/>
        border: 3px solid red; <br/>
    </div>
</div>

盒子模型

    

        margin: 30px; 

        padding: 30px; 

        border: 3px solid red; 

    

#box-sizing

使用 width 和 height 设置尺寸时，默认设置的是 内容盒 的尺寸，可以通过 box-sizing 属性进行修改。

• content-box 设置尺寸时是 内容盒 的尺寸
• border-box 设置尺寸时是 边框盒 的尺寸

示例：

<div style="width:200px; padding:10px; border:2px solid red; background-color:#212121; color:cyan;">
    width:200px; <br/>
    padding:10px; <br/>
</div>
<br/>
<div style="box-sizing:border-box; width:200px;padding:10px; border:2px solid red; background-color:#212121; color:cyan;">
    box-sizing:border-box; 
    width:200px; <br/>
    padding:10px; <br/>
</div>

内容盒&边框盒

    width:200px; 

    padding:10px; 





    box-sizing:border-box; 
    width:200px; 

    padding:10px;