CSS：盒子模型和box-sizing属性

目录

一、W3C盒子模型 （标准盒子模型）

二、IE盒子模型（怪异盒模型）

示例：

---

 盒子模型：W3C盒子模型 、IE盒子模型

box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）

一、W3C盒子模型 （标准盒子模型）

box-sizing: content-box;（默认）

二、IE盒子模型（怪异盒模型）

box-sizing: border-box;

示例：

代码：

<!--test-->
<template>
  <div class="test">
    <div class="box1">
      <p>width: 300px;</p>
      <p>height: 300px;</p>
      <p>background-color: blue;</p>
      <strong style="color:yellow">box-sizing: content-box;(默认)</strong>
      <p>margin: 20px;</p>
      <p>border: 10px solid green;</p>
      <p>padding: 50px;</p>
    </div>
    <div class="box2">
      <p>width: 300px;</p>
      <p>height: 300px;</p>
      <p>background-color: red;</p>
      <strong style="color:yellow">box-sizing: border-box;</strong>
      <p>margin: 20px;</p>
      <p>border: 10px solid green;</p>
      <p>padding: 50px;</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.test {
  font-size: 20px;
  .box1 {
    width: 300px;
    height: 300px;
    background-color: blue;

    box-sizing: content-box;

    margin: 20px;
    border: 10px solid green;
    padding: 50px;
  }
  .box2 {
    width: 300px;
    height: 300px;
    background-color: red;

    box-sizing: border-box;

    margin: 20px;
    border: 10px solid green;
    padding: 50px;
  }
}
</style>