                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /一課全面掌握主流CSS布局

為什么利用box-sizing: border-box;消除inner這個dom？

<!DOCTYPE?html>
<html?lang="en">
??<head>
????<meta?charset="UTF-8"?/>
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0"?/>
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge"?/>
????<title>Document</title>
????<style>
??????.box?{
????????/*?margin:?0?100px;?*/
????????height:?300px;
??????}
??????.center,
??????.left,
??????.right?{
????????height:?300px;
????????float:?left;
??????}
??????.left,
??????.right?{
????????width:?100px;
????????background-color:?brown;
??????}
??????.left?{
????????margin-left:?-100%;
??????}
??????.right?{
????????margin-left:?-100px;
??????}
??????.center?{
????????width:?100%;
????????background-color:?chartreuse;
????????box-sizing:?border-box;
????????padding-left:?100px;
????????padding-right:?100px;
??????}
????</style>
??</head>
??<body>
????<div?class="box">
??????<div?class="center">dafdsf</div>
??????<div?class="left"></div>
??????<div?class="right"></div>
????</div>
??</body>
</html>

看到一種做法，在一般的雙飛翼布局中，需要為center元素添加inner這個子元素。但是如果為center添加box-sizing: border-box;屬性后，就可以不用添加inner這個dom，可以減少dom節點，我試了一下的確可以，請問這是為什么？