【CSS】标准盒模型和IE盒模型

最新推荐文章于 2024-05-18 03:07:39 发布

Silviaya

最新推荐文章于 2024-05-18 03:07:39 发布

阅读量146

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_46368797/article/details/129634536

版权

代码


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>css盒模型</title>
</head>
<style type="text/css">

  .content-box {
    /*标准盒模型：width只包括content部分的宽度 
    宽度200px=内容200px
    */
    box-sizing: content-box;
    width: 200px;
    height: 150px;
    border: 5px solid #e70d0d;
    padding: 20px;
    margin: 10px;
  }

  .border-box {
    /* IE盒模型：width包括content+padding+border
    宽度200px = 内容150px + 边框40px + 10px */
    box-sizing: border-box;
    width: 200px;
    height: 150px;
    border: 5px solid #e70d0d;
    padding: 20px;
    margin: 10px;
  }
</style>

<body>
  <div class="content-box">默认的标准盒模型</div>
  <div class="border-box"> IE盒模型</div>
</body>

</html>