# 什么是尺寸 | Creght 可视化文档

> 选中元素，在右侧设置栏 - 尺寸可以设置元素的尺寸。 宽度的类型有：固定、百分比、填充、自适应。 高度的类型比宽度多一个 “视口“ 类型。 下面我们举例说明每个类型的作用 尺寸的类型 固定 固定尺寸为元素指定一个精准的尺寸，比如宽度设置为…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)帮助文档](/help.md)

[更新历史](/blogs.md)

[AI](/docs/ai/quick-create-first-website.md) [可视化](/docs/get-start.md)

入门

- [两分钟了解 Creght](/docs/get-start.md)
- [如何注册 Creght](/docs/signup.md)
- [快速制作网站](/docs/create-site.md)
- [模板](/docs/tpls.md)

设计

- [编辑器](/docs/editor.md)
- [基本操作](/docs/operating.md)
- [什么是布局](/docs/layout.md)
- [什么是定位](/docs/position.md)
- [什么是尺寸](/docs/size.md)
- [断点](/docs/breakpoint.md)
- [弹窗](/docs/popover.md)
- [组件](/docs/components.md)
- [添加第三方字体](/docs/tp-font.md)
- [副本与深拷贝](/docs/deep-copy.md)

CMS

- [内容管理 \- CMS](/docs/cms.md)
- [CMS 导入微信公众号文章](/docs/wxmp.md)

网站设置

- [页面设置](/docs/page-setting.md)
- [如何升级套餐](/docs/manage-plan.md)
- [SEO 设置](/docs/seo-setting.md)
- [小文件](/docs/verification-file.md)
- [绑定自定义域名](/docs/custom-domain.md)
- [如何进行网站备案](/docs/beian.md)
- [服务器节点说明](/docs/website-node.md)
- [如何切换站点](/docs/pxrp79jqtnyq.md)
- [多语言本地化](/docs/localization.md)

AI

- [关于 Creght AI](/docs/creght-ai.md)

工具

- [从 Figma 设计稿到可交互网站](/docs/figma-to-creght.md)
- [Figma 转响应式布局的 3 大核心指南](/docs/figma-autolayout.md)
- [Figma 设计稿一键转响应式网站](/docs/response-site.md)
- [Figma 转响应式网站-交互篇](/docs/figma03.md)
- [使用 FFmpeg 压缩视频](/docs/ffmpeg.md)
- [如何将 Clarity 添加到您的网站](/docs/clarity.md)
- [按钮 Hover 动效制作教程](/docs/button.md)
- [响应式导航栏制作教程](/docs/nav.md)
- [折叠面板](/docs/collapse.md)

设计/

# 什么是尺寸

选中元素，在右侧设置栏 \- 尺寸可以设置元素的尺寸。

![image.png](https://fsb.huglight.cn/87837258ec653927a8b62181f29e9828/image.png)

宽度的类型有：固定、百分比、填充、自适应。

高度的类型比宽度多一个 “视口“ 类型。

下面我们举例说明每个类型的作用

## 尺寸的类型

### 固定

固定尺寸为元素指定一个精准的尺寸，比如宽度设置为 120px，那么这个元素在任何设备上都是 120px 的宽度。

![image.png](https://fsb.huglight.cn/bf14da4b0bd4c7bb2f632abe0f017715/image.png)

### 百分比

百分比类型设置元素为父元素尺寸的百分比，比如下图宽度设计为 50% 则为父元素的一半宽。

![image.png](https://fsb.huglight.cn/faacb0b65ecbd1abfaddad3356d6a5d2/image.png)

### 填充

**当父元素开启了自动布局**，将子元素宽度设置为填充（1fr）表示填充父元素 **剩下的宽度**。如下图所示，右侧元素的宽度固定为 360 px，左侧蓝色块设置宽度为 1fr 就将占满父容器的剩余宽度。

![image.png](https://fsb.huglight.cn/47602a3ea85ff2440959e03220287ea0/image.png)

下面的示例表示：如果宽度都设置成 填充（1fr），将等分剩余空间，如果其中的 1 项为 2fr 的话，则它所占据的空间是其他的 2 倍。

![image.png](https://fsb.huglight.cn/079dce59bba46d031a6444908c0be240/image.png)

### 自适应

自适应尺寸的元素会自动包裹子元素，常用于文字组件根据文字长短自动调整尺寸。

![image.png](https://fsb.huglight.cn/7ef0724fe4ac1e9a68b04c8d1a641a14/image.png)

### 视口

视口类型的尺寸用视口（浏览器可见区域）高度作为基础尺寸，100vh 表示整个视口高度，50vh 表示一半的视口高度。

![image.png](https://fsb.huglight.cn/50a44580ab11a78e752438060fb0fb6b/image.png)

## 等比

点亮宽度与高度之间的锁则会开启固定等比，等比设置后，当元素发生缩放（如更改浏览器宽度），元素的宽高始终会保持相同比例。

等比常用于完整展示一张图片。

注意：Creght 只支持高度随着宽度变化。

![image.png](https://fsb.huglight.cn/088f846950f04f52d24fe82f089ce0bd/image.png)

本文目录

- [尺寸的类型](#尺寸的类型)
- [固定](#固定)
- [百分比](#百分比)
- [填充](#填充)
- [自适应](#自适应)
- [视口](#视口)
- [等比](#等比)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

此网站使用 [Creght](/) 创建

![微信客服](https://fsu.creght.com/site/2066727200882692096/1785119134612__image.png)

微信客服

## 链接

- [价格](/price.md)
- [解决方案](/solution.md)
- [客户案例](/customers.md)
- [帮助中心](/help.md)
- [联系我们](/contact.md)
- [更新记录 & 博客](/blogs.md)
- [退款说明](/tuikuan.md)

## 资源

- [全部资源](/resources.md)
- [模板](/templates.md)
- [组件库](https://creghtlib.site.creght.com)
- [动效库](/design/effects.md)
- [Figma to Creght](/figma2creght.md)
- [API](/api.md)

## 产品对比

- [对比上线了](/creght-vs-sxl.md)
- [对比凡科建站](/creght-vs-fkw.md)
- [自己写代码 vs Creght](/compare/self-coding.md)
- [外包 vs 自己做](/compare/outsourcing.md)

## 协议

- [用户协议](/legal/terms.md)
- [隐私政策](/legal/privacy.md)
- [可接受使用政策](/legal/acceptable-use.md)

## 社交媒体

- [小红书](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [哔哩哔哩](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)