2022-12-16_css盒子模型

1. 介绍

• 如下是css的盒子模型图片。
• 每个元素都包括如下部分
• Margin(外边距) - 清除边框外的区域，外边距是透明的。
  Border(边框) - 围绕在内边距和内容外的边框。
  Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  Content(内容) - 盒子的内容，显示文本和图像。
• 正常我们设置元素的width和height的时候，仅仅是设置content，不包括边框等的尺寸。
• 元素的实际尺寸需要把边框、内边距、内容都包括进去。

image.png

2.就是要直观的设置width属性

• 在元素上添加box-sizing: border-box;属性，，则宽度和高度会包括内边距和边框：

.div1 {
  box-sizing: border-box;
}

• 由于使用 box-sizing: border-box; 的效果如此之好，许多开发人员希望页面上的所有元素都能够以这种方式工作。

*{
  box-sizing: border-box;
}