amis-rpc-design/libs/amis/packages/amis-ui/scss/helper/layout/_box-sizing.scss

52 lines
1.3 KiB
SCSS
Raw Normal View History

2023-10-07 19:42:30 +08:00
/*!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();