css 盒子模型

作者：′残花败落° 发布日期:2025-10-30 浏览:40

/* CSS 盒子模型示例代码 */

/* 定义一个盒子 */
.box {
  width: 300px; /* 盒子的宽度 */
  height: 200px; /* 盒子的高度 */
  padding: 20px; /* 内边距，内容与边框之间的距离 */
  border: 5px solid black; /* 边框，设置为黑色实线，宽度为5px */
  margin: 10px; /* 外边距，盒子与其他元素之间的距离 */
  background-color: lightblue; /* 背景颜色 */
}

/* 解释说明：
- width 和 height 定义了内容区域的尺寸。
- padding 是内容与边框之间的空间。
- border 是围绕内容和内边距的线条。
- margin 是盒子与其他元素之间的外部空间。
- 总宽度 = width + (padding-left + padding-right) + (border-left + border-right) + (margin-left + margin-right)
- 总高度 = height + (padding-top + padding-bottom) + (border-top + border-bottom) + (margin-top + margin-bottom)
*/

上一篇：css相邻兄弟选择器

下一篇：css去除下划线