Css - 标准盒模型与IE盒模型

作者: ElricTang | 来源:发表于2019-09-28 10:08 被阅读0次

CSS盒模型
Css盒模型以及Bfc的应用场景
css盒模型
CSS盒模型
CSS盒模型
IE,chrome,火狐浏览器在css和js方面的兼容性总结
盒模型
前端小册 - 浅谈CSS盒模型
面试总结
盒模型、定位

css3属性box-sizing : content-box || border-box || inherit;

content-box：标准盒模型
border-box：IE盒模型
inherit：继承父元素

先来看下面代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .contentbox{
                margin:10px;
                padding: 10px;
                border: 5px solid red;
                box-sizing: content-box;
                width:100px;
                height: 100px;
            }
            .iebox{
                margin:10px;
                padding: 10px;
                border:5px solid blue;
                box-sizing:border-box; 
                height:100px;
                width:100px;    
            }
            .default{
                margin:10px;
                padding: 10px;
                border:5px solid green; 
                height:100px;
                width:100px;               
            }
        </style>
    </head>
    <body>
        <div class="contentbox">
            标准盒模型
        </div>
        <div class="iebox">
            ie盒模型
        </div>
        <div class="default">
            默认
        </div>
    </body>
</html>

效果：

盒模型.png

1. 标准盒模型（默认情况）

            .contentbox{
                margin:10px;
                padding: 10px;
                border: 5px solid red;
                box-sizing: content-box;
                width:100px;
                height: 100px;
            }

标准盒模型.png

设置的(width/height)就是内容部分的(宽/高)
总宽高 = (width/height) + padding + border + margin

2. IE盒模型

            .iebox{
                margin:10px;
                padding: 10px;
                border:5px solid blue;
                box-sizing:border-box; 
                height:100px;
                width:100px;    
            }

IE盒模型.png

设置的width/height明明是100px，但是内容部分只有70px。原因在于IE盒模型中 (width/height) = content + padding + border
总宽高 = (width/height) + margin

JavaScript两种获取元素宽高的方法（兼容性好）

1. offsetWidth/offsetHeight = content + padding + border

console.log(document.getElementsByClassName('contentbox')[0].offsetWidth);// 130
console.log(document.getElementsByClassName('iebox')[0].offsetWidth);// 100

1. clientWidth/clientHeight = content + padding

console.log(document.getElementsByClassName('contentbox')[0].clientWidth);// 120
console.log(document.getElementsByClassName('iebox')[0].clientWidth);// 90