css盒子模型

1.css的盒子模型 ( IE 和 w3c标准模型 )
区别 : 标准 width = 内容宽 IE width = 内容宽 + (padding + border) * 2
两个之间的转换 : box-sizing : border-box (设置的border 会往里面挤)
content-box(是默认值,标准);

cs3 : 兼容是IE9+ 以上, 所有的低版本不支持;

2.标准模式 和 怪异模式的区别 : 盒子的模型 和 盒子的渲染模式;

3.标准模式 和 怪异模式的转换: 设置表头( DOCTYPE html)

4.两个盒子之间的转换(box-sizing: border-box)

          *{  
                margin: 0;  
                padding: 0;  
            }  
            html {
                height : 100%;
            }
            body {
                height: 100%;
            }
          .big{  
            height: 100%;
           display: flex;
           /* 垂直居中 */ 
           align-items: center;
           /* 水平居中 */ 
           justify-content: center;


        }  
        .big>div{  
            width: 200px;  
            height: 200px;  
            background: red;
             /* 盒子默认(标准,向外)*/ 
            box-sizing: content-box;  
             /* IE 模型 (内挤)*/ 
             box-sizing: border-box; 
            border: 5px solid #ccc;

        }