--- title: '通用样式' description: '通用样式，即所有组件都可以支持的样式' lastUpdated: 2025-02-20T12:02:23.000Z --- 通用样式，即所有组件都可以支持的样式它们均与 css 的属性样式用法保持一致，开发者可写在`内联样式`或` ``` ## 属性列表 **注**：通用样式均为非必填项。 | 名称 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | width | `` | `` | \- | 未设置时使用组件自身内容需要的宽度 | | height | `` | `` | \- | 未设置时使用组件自身内容需要的高度 | | padding | `` | 0 | 简写属性，在一个声明中设置所有的内边距属性，该属性可以有 1 到 4 个值，具体请参考[MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding)文档 | | padding-\[left|top|right|bottom\] | `` | 0 | 设置一个元素的某个方向的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。 | | margin | `` | 0 | 简写属性，在一个声明中设置所有的外边距属性，该属性可以有 1 到 4 个值，具体请参考 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin)文档 | | margin-\[left|top|right|bottom\] | `` | 0 | 设置一个元素的某个方向的外边距，该属性不能为负值 | | border | \- | 0 | 简写属性，在一个声明中设置所有的边框属性，可以按顺序设置属性 width style color，不设置的值为默认值 | | border-\[left|top|right|bottom\] | \- | 0 | 简写属性，在一个声明中设置对应位置的所有边框属性，可以按顺序设置属性 width style color，不设置的值为默认值 | | border-style | solid | solid | 暂时仅支持 1 个值，为元素的所有边框设置样式 | | border-width | `` | 0 | 简写属性，在一个声明中设置元素的所有边框宽度，或者单独为各边边框设置宽度，具体请参考 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-width) 文档 | | border-\[left|top|right|bottom\]-width | `` | 0 | 为元素的某个方向的边框设置边框宽度 | | border-color | `` | black | 简写属性，在一个声明中设置元素的所有边框颜色，或者单独为各边边框设置颜色，颜色值的填入请参考 [颜色配置](/component/common/color) | | border-\[left|top|right|bottom\]-color | `` | black | 颜色值的填入请参考 [颜色配置](/component/common/color) | | border-radius | `` | `` | 0 | border-radius 属性允许你设置元素的外边框圆角。设置时需要同时设置 border-width、border-color，单独设置 border-\[left|top|right|bottom\]-width，border-\[left|top|right|bottom\]-color 时 border-radius 无效 | | border-\[top|bottom\]-\[left|right\]-radius | `` | `` | 0 | 设置四个角的圆角弧度 | | background | `` | \- | 暂时不能与 background-color、background-image 同时使用 | | background-color | `` | \- | 颜色值的填入请参考 [颜色配置](/component/common/color) | | color | `` | \- | 颜色值的填入请参考 [颜色配置](/component/common/color) | | background-image | `` | \- | 暂时不支持与 background-color，border-color 同时使用；支持本地图片资源；暂不支持网络图片资源 | | background-size | contain | cover | auto | `` | `` | auto auto | 设置背景图片大小 | | background-repeat | repeat-x | repeat-y | no-repeat | repeat | repeat | 设置是否及如何重复绘制背景图像 | | background-position | `` |``| left | right | top | bottom | center | 0px 0px | 描述了背景图片在容器中绘制的位置，支持 1-4 个参数 | | opacity | `` | 1 | opacity 属性指定了一个元素的透明度。 | | display | flex | none | flex | 蓝河应用只支持 flex 布局；将当前元素的 display 设置为 none 蓝河应用页面将不渲染此元素 | | visibility | visible | hidden | visible | visibility 属性控制显示或隐藏元素而不更改文档的布局 | | flex-direction | column | row | column-reverse | row-reverse | row | 默认为横向`row`，父容器为`

、`时生效 | | align-items | stretch | flex-start | flex-end | center | flex-start | align-items 定义了伸缩项目可以在伸缩容器的当前行的侧轴上对齐方式。flex-start(默认值)：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。center：伸缩项目的外边距盒在该行的侧轴上居中放置。stretch：伸缩项目拉伸填充整个伸缩容器。 | | justify-content | flex-start | flex-end | center | space-between | space-around | flex-start | justify-content 定义了伸缩项目沿着主轴线的对齐方式。flex-start(默认值)：伸缩项目向一行的起始位置靠齐。flex-end：伸缩项目向一行的结束位置靠齐。center：伸缩项目向一行的中间位置靠齐。space-between：伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置，最后一个伸缩项目在一行中最终点位置。space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。 | | position | fixed | absolute | relative | relative | 父容器为`、`时不生效，scroll 不支持。 | | \[left|top|right|bottom\] | `` | \- | 一般配合`fixed`或`absolute`布局使用 | **注意**： flex 布局仅支持上面列出的样式，w3c 中的其他标准切勿使，如 `flex: 1;`，否则将会产生无法预知的布局问题。