一面/二面（2）之CSS盒模型和BFC

weixin_30980795

已于 2023-10-18 13:01:28 修改

阅读量130

点赞数

文章标签： css 前端

于 2020-07-03 17:09:58 首次发布

一.CSS盒模型
标准盒模型的内容大小就是content的大小，而ie盒模型的大小则是content+padding+border总的大小。

css3属性box-sizing : content-box || border-box || inherit;
content-box：标准盒模型
border-box：IE盒模型
inherit：继承父元素

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .contentbox {
      margin: 10px;
      padding: 10px;
      border: 5px solid red;
      box-sizing: content-box;
      width: 100px;
      height: 100px;
    }

    .iebox {
      margin: 10px;
      padding: 10px;
      border: 5px solid blue;
      box-sizing: border-box;
      height: 100px;
      width: 100px;
    }

    .default {
      margin: 10px;
      padding: 10px;
      border: 5px solid green;
      height: 100px;
      width: 100px;
    }
  </style>
</head>

<body>
  <div class="contentbox">
    标准盒模型
  </div>
  <div class="iebox">
    ie盒模型
  </div>
  <div class="default">
    默认
  </div>
</body>
</html>

盒子模型

标准盒模型（默认情况）

设置的(width/height)就是内容部分的(宽/高)
总宽高 = (width/height) + padding + border + margin
IE盒模型

设置的width/height明明是100px，但是内容部分只有70px。原因在于IE盒模型中 (width/height) = content + padding + border
总宽高 = (width/height) + margin

扩展：
**JavaScript两种获取元素宽高的方法（兼容性好）：
offsetWidth/offsetHeight /clientWidth/clientHeight
1.offsetWidth/offsetHeight = content + padding + borde

console.log(document.getElementsByClassName('contentbox')[0].offsetWidth);// 130
console.log(document.getElementsByClassName('iebox')[0].offsetWidth);// 100

2.clientWidth/clientHeight = content + padding

console.log(document.getElementsByClassName('contentbox')[0].clientWidth);// 120
console.log(document.getElementsByClassName('iebox')[0].clientWidth);// 90