CSS 的盒子模型，及box-sizing用法

文章目录

       一、简介

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

       三、IE盒子模型（怪异模式盒子模型）

       四、 box-sizing取值

       五、应用场景 

              1. 精准控制元素尺寸​

              2. 解决子级溢出​​

              ​​3. 在Flex/Grid 布局中更直观的分配空间

一、简介

有两种主要的盒子模型：标准盒子模型（W3C盒子模型）和IE盒子模型（怪异盒子模型）。

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

• box-sizing: content-box(默认);
• 元素的 width 和 height 仅表示​​内容区域​​的大小。
• padding、border会额外占用空间，使实际占位宽度/高度变大。

div {
  /* 实际占位宽度 = 100 + 20(padding) + 2(border) = 122px */
  width: 100px;
  padding: 10px;
  border: 1px solid black;
}

 三、IE盒子模型（怪异模式盒子模型）

• box-sizing: border-box;

• 元素的 width 和 height 包含​​内容区域 + 内边距 + 边框​​。

• 内容区域的大小会随padding和border改变而改变，不会使实际占位宽度/高度变化。

div {
  /* 实际占位宽度 = 100px（包含padding和border） */
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
  border: 1px solid black;
}

四、 box-sizing取值

box-sizing: content-box（默认值，W3C盒子模型）| border-box（IE盒子模型） | inherit（从父元素继承box-sizing的值）;     

五、应用场景 

1. 精准控制元素尺寸​

.div {
  /* 无论padding和border如何变化，实际占位宽度始终是100px */
  box-sizing: border-box;
  width:100px;
  padding: 10px;
  border: 1px solid black;
}

2. 解决子级溢出​​

.parent {
  width: 200px;
  padding: 10px;
  /* 实际占位宽度为200px */
  box-sizing: border-box; 
}

.child {
  /* 继承父级盒模型，不会溢出父级 */
  width: 100%; 
  padding: 10px;
  box-sizing: border-box;
}

3. 在Flex/Grid 布局中更直观的分配空间

.item-container{
  display: flex;
}

.item {
  box-sizing: border-box;
  flex: 1; 
  /* 实际占位宽度包含padding和border */
  padding: 10px;
}

 - END -

感谢你花费宝贵的时间阅读本文，文章在撰写过程中难免有疏漏和错误，欢迎你在下方留言指出文章的不足之处；如果觉得这篇文章对你有用，也欢迎你点赞和留下你的评论哦。