CSS3与页面布局学习总结（二）BoxModel、边距折叠、内联与块标签、CSSReset

一、盒子模型（Box Model）

盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型，加上了doctype声明，让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子。当设置一个元素的样式如下：

   DOCTYPE html  > 
   html  > 
       head  > 
           meta   charset  ="UTF-8"  > 
           title  > 盒子模型   title  > 
           style   type  ="text/css"  >  
            #box  {  
                width  :   100px  ;  
                height  :   100px  ;  
                margin  :   20px  ;  
                padding  :   20px  ;  
                border  :   10px solid blue  ; 
             } 
           style  > 
       head  > 
       body  > 
           div   id  ="box"  >  
            Box Model
            div  > 
       body  > 
   html  >  

查看更多关于CSS3与页面布局学习总结（二）BoxModel、边距折叠、内联与块标签、CSSReset的详细内容...