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

偏执的太偏执、 2021-07-25 11:55 382阅读 0赞

**目录**

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

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

示例：

--------------------

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

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

box-sizing: border-box;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

## 示例： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

代码：

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/9bf57366dd5f483e973c7fac042a4e97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/0ddf3464e55f4317a709686066e58cc6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/9829fe1db06146f8a37e55cc4fe4fef8.png