CSS盒模型

CSS 盒模型是 CSS 的基础，最近复习 CSS 知识时看到了，想记录下来

盒模型分类

1. 标准盒模型
2. IE 盒模型(IE8 及以下)

盒模型说明

图片来自 MDN CSS 基础框盒模型介绍

1. 标准盒模型:
   width = contentWidth
height = contentHeight
2. IE 盒模型:
   width = contentWidth + padding + border
height = contentHeight + padding + border

CSS box-sizing 属性

介绍

box-sizing 可以切换元素的盒模型

/* IE盒模型 */
box-sizing: border-box;
/* 标准盒模型 */
box-sizing: content-box;

作用

例如:

<div class="parent">
  parent
  <div class="child">
    child
    <div></div>
  </div>
</div>

.parent {
  width: 100px;
  height: 100px;
  border: 4px solid #7b6fb6;
}
.parent .child {
  /* 宽度是100% 最后child 会超出 parent */
  box-sizing: content-box;
  width: 100%;
  border: solid #5b6dcd 10px;
  padding: 5px;
}

.parent {
  width: 100px;
  height: 100px;
  border: 4px solid #7b6fb6;
}
.parent .child {
  /* 宽度是100% child 会超出 parent */
  box-sizing: content-box;
  width: 100%;
  border: solid #5b6dcd 10px;
  padding: 5px;
}
.parent .child {
  /* 宽度是100%, child 不会超出 parent */
  box-sizing: border-box;
  width: 100%;
  border: solid #5b6dcd 10px;
  padding: 5px;
}