amis-rpc-design/libs/amis/packages/amis-ui/scss/helper/layout/_box-sizing.scss
2023-10-07 19:42:30 +08:00

52 lines
1.3 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*!markdown
---
title: Box Sizing
---
Box Sizing 相关样式,主要区别在于设置宽高的时候,是否包含了 padding 和 border 的大小。
| Class | Properties |
| ----------- | ------------------------ |
| box-border | box-sizing: border-box; |
| box-content | box-sizing: content-box; |
## 用法
比如这个例子:左侧是 box-border 类型,整体高宽 128px。而右侧只是内容区域是 128px + 边框(2 * 4px) + padding 2 * 16px 一共160px。
```html
<div class="flex space-x-6">
<div class="box-border h-32 w-32 p-4 border-4 border-blue-400 bg-blue-200 rounded-md">
<div class="h-full w-full bg-red-400"></div>
</div>
<div class="box-content h-32 w-32 p-4 border-4 border-blue-400 bg-blue-200 rounded-md">
<div class="h-full w-full bg-red-400"></div>
</div>
</div>
```
## 响应式设计
不支持 [「响应式设计前缀」](../../../docs/style/responsive-design.md),有需求请提 [issue](https://github.com/baidu/amis/issues)。
## 状态前缀
不支持[「状态前缀」](../../../docs/style/state.md),有需求请提 [issue](https://github.com/baidu/amis/issues)。
*/
@mixin make-box-sizing($prefix: '.') {
#{$prefix}box-border {
box-sizing: border-box;
}
#{$prefix}box-content {
box-sizing: content-box;
}
}
@include make-box-sizing();