盒子模型

了解盒子模型

盒子模型指的就是CSS 盒模型。一个 HTML 元素包括四个区域,包括：

内容区content：包含HTML元素的实际内容，包括文本、图像等。
内边距区:pading(填充)：元素内容区周围的空白区域，用于控制元素内容与元素边框之间的距离。
边框区border：位于内边距区外面，用于装饰元素并将其与其他元素区分开。
外边距区margin：位于边框区外部的空白区域，用于控制当前元素与其它元素之间的距离。

这四个区域共同构成了一个元素的盒子模型，CSS 可以用来控制每个区域的大小、颜色、样式、位置等。当我们设置元素的宽度或高度时，实际上是设置了元素盒子模型的尺寸大小。

其中内容content又分为高(height)、宽(width)

日常应用中,根据计算盒子尺寸的总宽度和高度的不同,将盒模型区分为标准盒模型和怪异盒模型

标准盒模型(W3C盒子模型)

标准和模型又称为W3C盒子模型
标准盒模型将HTML元素宽度和高度定义为内容区域、内边距和边框三部分的总和。即我们设置HTML元素的宽度和高度时，实际上只是设置其内容区域的大小。
W3C 标准盒模型：属性包括 width ，height
width=content
height=content

怪异盒模型(IE盒模型)

怪异盒模型又称为IE盒模型
怪异盒模型将元素宽度和高度也定义为内容区域（content)、内边距和边框三部分的总和，不同的是怪异盒模型的content部分包括了padding和border.即当我们设置元素的大小时，我们实际设置是content、padding和border三部分的总的大小。
W3C 标准盒模型：属性包括 width ，height
width=content+pading(pading-left + padding-right)+border(border-left + border-right)
height=content+(pading-top + padding-bottom)+border(border-top + border-bottom)

指定盒子模型

实际应用中,除去一些旧版本的浏览器可能采用怪异盒模型,默认的是标准盒模型，可能会因为浏览器版本不同显示出不同的效果。所以，在进行网页布局的时候，需要明确指定使用哪种盒模型，并考虑浏览器的兼容性问题。

/* W3C(标准)盒子模型 */
box-sizing: content-box 
/* IE模型  */
box-sizing: border-box

两种盒子模型之间可以通过上述代码实现相互转换

应用

1.求box的 offsetWidth 的大小

注:offsetWidth 是一个 HTML 元素对象的只读属性,用来获取当前元素的内部宽度加上左右内边距和边框宽度的总和.

<style>
      .box {
        width: 200px;
        padding: 2px;
        border: 1px solid blue;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>

因为默认为标准盒模型content不包括padding和border,所以其宽度为content加上padding和border为
width=200px+(2px+2px)+(1px+1px)=206px

2.怎样让offsetWidth 变为200px??

解决-->修改box-sizing 属性,实现模型的切换。
原理:将content宽度变为了包括padding和border在内的总宽度-->内容宽度向内收缩==>盒子总体缩小

其中的左右各2px的padding和1px的border都向内收缩在了content的200px内,挤压了content内容区域
此时的200px=content+padding+border

.box {
        width: 200px;
        padding: 2px;
        border: 1px solid blue;
        margin: 10px;
        /* 指定为(切换)怪异盒模型 */
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>

标准盒子模型和怪异盒子模型