有关盒模型的一点思考

有关盒模型的一点思考

 

 

有关盒模型的一点思考

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。
其实盒子模型有两种，分别是标准 w3c 盒子模型和 IE 盒子模型。
他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型：

一、w3c盒子模型

看下面的图，根据色块，右外倒内，分别代表margin、border、padding、content(即网页内容部分)

二、IE盒子模型

与w3c盒子模型的组成部分类似，IE盒子模型也包括上图几个部分
但是不同的是，IE盒子模型把border和padding归到了content中
即由外到内依次是：margin、content（border、padding、网页内容部分）

理解他们

可能看了上面的内容大家对他们的区别还是不太理解，下面举个栗子
比如一个div 我们设置它的width为100px；border为10px，padding为10px；

<style>
    .div1{
        width: 100px;
        height:100px;
        border:10px solid #6da47f;
        background: #d4842f;
        padding: 10px;
    }
</style>
<div class="div1">我是测试他们不同点的内容</div>

<script>
    alert($('.div1').width())
</script>

在IE8+以及其它浏览器，测试了下，都是100，
但是在IE8，IE7，IE6浏览器输出的是60 ：100-10×2-10×2=60
那么这到底是为什么呢？要怎么解决呢？
因为前者是w3c盒子模型，后者是IE盒子模型
现在html中声明doctype就会默认页面是w3c盒子模型，所以，我的测试是去掉doctype属性的

解决办法
也就是在html文档前面声明doctype属性，规定网页的盒子模型是w3c盒子模型

三，有的时候，我们在做网页的时候，可能需要某部分的border或者padding属于宽度的一部分，也就是盒子模型是IE盒子模型。

可以用css3的一个新属性来定义
box-sizing: content-box | border-box | inherit
不同的浏览器要加上前缀

我们还是来看前面的例子

.div1{
    width: 100px;
    height:100px;
    border:10px solid #6da47f;
    background: #d4842f;
    padding: 10px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
}

 

测试结果就逆天了，居然跟IE6，7，8那三个老顽固一毛一样了，哈哈