CSS Border Box - CSS

概述

CSS Border Box 是 CSS 中用于设置一个元素的边框盒模型的属性。边框盒模型定义了一个元素的尺寸和布局方式，包括元素的内容、内边距、边框以及外边距。Border Box 属性可以控制元素的尺寸如何计算，以及边框和内边距对元素尺寸的影响。

CSS Border Box 属性

box-sizing

box-sizing属性用于控制元素的盒模型类型，决定了元素的尺寸如何计算。

• content-box（默认）：将元素的宽度和高度值应用于内容区域，边框和内边距不会被计算在内。
• border-box：将元素的宽度和高度值应用于内容区域，边框和内边距被计算在内。

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

border

border属性用于设置元素的边框样式。

.box {
  border: 1px solid black;
}

padding

padding属性用于设置元素的内边距，即元素内容与边框之间的距离。

.box {
  padding: 10px;
}

示例

.box {
  width: 200px;
  height: 150px;
  border: 1px solid black;
  padding: 10px;
  box-sizing: border-box;
}

在上面的示例里，.box 元素的宽度为200px，高度为150px。边框的宽度为1px，内边距为10px。由于设置了 box-sizing: border-box;，元素的宽度和高度值包括了边框和内边距的占用。

结论

CSS Border Box 是控制元素的盒模型的属性，可以控制元素的尺寸如何计算以及边框和内边距对尺寸的影响。了解和正确使用这些属性可以有效地调整和控制元素的布局和外观。