css3 box-sizing 盒模型 学习手记

盒模型 box-sizing

使用可以再保持页面布局不变的情况下改变 内容的宽度

用法：box-sizing ： content-box || border-box || inherit(继承父元素的box-sizing)

        -moz-box-sizing:       border-box;
    -webkit-box-sizing:       border-box;
                  box-sizing:        border-box;

截图：

注意： box-sizing 支持 IE8 以上浏览器。而且要加上前缀

代码：

    
盒模型测试
    
        

            
没有任何附加效果100px
            
再加入boreder5px和padding10px
            
content-sizing所有效果不变
            
box-sizing所有效果存在,宽高变成100px