跳至主要內容

盒模型属性

Kpsmart2025年3月4日大约 5 分钟

盒模型属性

与盒模型相关的属性，包括 margin、padding、border、width、height 等。

属性列表

下面是盒模型属性的完整列表，点击属性名可跳转到 MDN 文档查看详细信息。

尺寸属性

属性名描述语法
width设置元素的宽度width: auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)
height设置元素的高度height: auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)
min-width设置元素的最小宽度min-width: auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)
min-height设置元素的最小高度min-height: auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)
max-width设置元素的最大宽度max-width: none | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)
max-height设置元素的最大高度max-height: none | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)
box-sizing定义元素的尺寸计算方式box-sizing: content-box | border-box

外边距属性

属性名描述语法
margin设置元素的外边距margin: <length> | <percentage> | auto
margin-top设置元素的上外边距margin-top: <length> | <percentage> | auto
margin-right设置元素的右外边距margin-right: <length> | <percentage> | auto
margin-bottom设置元素的下外边距margin-bottom: <length> | <percentage> | auto
margin-left设置元素的左外边距margin-left: <length> | <percentage> | auto
margin-inline设置元素的行内方向外边距margin-inline: <length> | <percentage> | auto
margin-inline-start设置元素的行内起始外边距margin-inline-start: <length> | <percentage> | auto
margin-inline-end设置元素的行内结束外边距margin-inline-end: <length> | <percentage> | auto
margin-block设置元素的块级方向外边距margin-block: <length> | <percentage> | auto
margin-block-start设置元素的块级起始外边距margin-block-start: <length> | <percentage> | auto
margin-block-end设置元素的块级结束外边距margin-block-end: <length> | <percentage> | auto

内边距属性

属性名描述语法
padding设置元素的内边距padding: <length> | <percentage>
padding-top设置元素的上内边距padding-top: <length> | <percentage>
padding-right设置元素的右内边距padding-right: <length> | <percentage>
padding-bottom设置元素的下内边距padding-bottom: <length> | <percentage>
padding-left设置元素的左内边距padding-left: <length> | <percentage>
padding-inline设置元素的行内方向内边距padding-inline: <length> | <percentage>
padding-inline-start设置元素的行内起始内边距padding-inline-start: <length> | <percentage>
padding-inline-end设置元素的行内结束内边距padding-inline-end: <length> | <percentage>
padding-block设置元素的块级方向内边距padding-block: <length> | <percentage>
padding-block-start设置元素的块级起始内边距padding-block-start: <length> | <percentage>
padding-block-end设置元素的块级结束内边距padding-block-end: <length> | <percentage>

边框属性

属性名描述语法
border设置元素的边框border: <line-width> || <line-style> || <color>
border-width设置元素的边框宽度border-width: <line-width>{1,4}
border-style设置元素的边框样式border-style: <line-style>{1,4}
border-color设置元素的边框颜色border-color: <color>{1,4}
border-top设置元素的上边框border-top: <line-width> || <line-style> || <color>
border-right设置元素的右边框border-right: <line-width> || <line-style> || <color>
border-bottom设置元素的下边框border-bottom: <line-width> || <line-style> || <color>
border-left设置元素的左边框border-left: <line-width> || <line-style> || <color>
border-radius设置元素的边框圆角border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?
border-top-left-radius设置元素的左上角边框圆角border-top-left-radius: <length-percentage> [ <length-percentage> ]?
border-top-right-radius设置元素的右上角边框圆角border-top-right-radius: <length-percentage> [ <length-percentage> ]?
border-bottom-right-radius设置元素的右下角边框圆角border-bottom-right-radius: <length-percentage> [ <length-percentage> ]?
border-bottom-left-radius设置元素的左下角边框圆角border-bottom-left-radius: <length-percentage> [ <length-percentage> ]?

轮廓属性

属性名描述语法
outline设置元素的轮廓outline: <outline-color> || <outline-style> || <outline-width>
outline-width设置元素的轮廓宽度outline-width: <line-width>
outline-style设置元素的轮廓样式outline-style: auto | <line-style>
outline-color设置元素的轮廓颜色outline-color: <color> | invert
outline-offset设置元素的轮廓偏移outline-offset: <length>

使用示例

/* 基本盒模型示例 */
.box {
  /* 尺寸 */
  width: 300px;
  height: 200px;
  box-sizing: border-box;
  
  /* 外边距 */
  margin: 20px;
  
  /* 边框 */
  border: 2px solid #333;
  border-radius: 8px;
  
  /* 内边距 */
  padding: 15px;
  
  /* 轮廓 */
  outline: 1px dashed red;
  outline-offset: 5px;
}

/* 逻辑属性示例 */
.logical-box {
  margin-inline: 20px;
  padding-block: 15px;
  border-inline-start: 2px solid blue;
}

浏览器兼容性

大多数现代浏览器都支持这些盒模型属性。逻辑属性（如 margin-inline、padding-block 等）在较新的浏览器中得到支持。具体兼容性信息请参考各属性的 MDN 文档。

相关资源