## PC宽度  此功能主要是为了帮助那些对样式单位(px, %, rem, vw, vh, calc)和布局方式(flex横向和纵向布局)并不太了解的用户, 构建自适应网站用 当然对于很简单的需求, 会有自适应的整站模板和组件模板来帮助用户完成 IT专业用户, 也可以使用自定义样式来构建, 这些都不在此问题范围内, 可以略过 大部分用户制作网站时候, 都是在一台显示器上, 一个分辨率下制作, 比如大部分分辨率可能是1920px 普通用户制作好后的站点, 在一台分辨率1344px的笔记本上看, 可能就会原有偏差, 如果用户不熟悉样式单位和布局方式 最简单的做法自然是增加一个1344的宽度, 然后在这个宽度上重新拖动调整下页面内容就好 ## [](https://mb.ybvips.cn/docs/pc/index.html#/Next#%E9%A1%B5%E9%9D%A2%E7%BB%84%E4%BB%B6%E5%B1%82%E6%AC%A1)页面组件层次  此功能位于页面右上角 更多菜单里 当页面结构复杂, 内容比较多时, 因为组件上下覆盖的原因, 鼠标点击组件进行选择的方式可能不是那么好用 这时候可以使用页面组件层次功能 点击组件层次树里的组件, 会自动点选该组件, 页面也会自动滚动到此组件的位置 在页面内点击组件, 组件层次树里也会跟着选中, 方便用户了解当前操作的组件, 在整个页面中处于什么位置 ## [](https://mb.ybvips.cn/docs/pc/index.html#/Next#%E6%A0%B7%E5%BC%8F%E5%8D%95%E4%BD%8D)样式单位  网站制作中, 会用到多种样式单位, 下面简单介绍下本系统中各个样式单位 ### [](https://mb.ybvips.cn/docs/pc/index.html#/Next#px)px 最常见的样式单位, 不会根据外部条件改变, 设置多少就是多少 ### [](https://mb.ybvips.cn/docs/pc/index.html#/Next#rem)rem 相对于页面根元素字体大小的单位, 本系统中 1rem = 16px ### [](https://mb.ybvips.cn/docs/pc/index.html#/Next)% 相对与参照值的比例大小, 例如父容器宽度是1000px 子容器宽度设为10%, 子容器的实际宽度就是 1000px x 10% = 100px ### [](https://mb.ybvips.cn/docs/pc/index.html#/Next#vw)vw 相对于浏览器窗口宽度的大小, 100vw = 浏览器窗口宽度, 10vw = 浏览器窗口宽度 x 10% ### [](https://mb.ybvips.cn/docs/pc/index.html#/Next#vh)vh 相对于浏览器窗口高度的大小, 100vh = 浏览器窗口高度, 10vh = 浏览器窗口高度 x 10% ### [](https://mb.ybvips.cn/docs/pc/index.html#/Next#calc)calc 严格来说这个并不是一个样式单位, 而是一个可使用算式计算的样式方法 比如一个组件的宽度设定为 calc(100vw - 50px) 就表示这个组件宽度是 浏览器窗口宽度 - 50px 以上就是本系统中, 所有已预置的可下拉选择使用的样式单位, 用户可以根据实际情况, 选择使用 ## [](https://mb.ybvips.cn/docs/pc/index.html#/Next#%E5%B8%83%E5%B1%80%E6%96%B9%E5%BC%8F)布局方式 布局方式就是一个容器内, 子元素的排列方式, 目前系统中, 可以手动选择的布局方式有以下三种 ### [](https://mb.ybvips.cn/docs/pc/index.html#/Next#%E8%87%AA%E7%94%B1%E5%B8%83%E5%B1%80)自由布局  内部元素可以随意拖动放置, 元素之间不会自动对齐, 需要用户自己手动对齐 ### [](https://mb.ybvips.cn/docs/pc/index.html#/Next#%E6%A8%AA%E5%90%91%E5%B8%83%E5%B1%80)横向布局  横向排列内部元素, 内部元素不可随意拖动位置 元素之间会自动对齐, 横向和纵向各有五种对齐方式, 共25种组合排列方式, 用户可以根据情况选择使用 超出父容器的子组件, 会自动换到下一行 可以设置自动宽高, 会根据容器内子组件的内容, 自动变换容器的宽高 ### [](https://mb.ybvips.cn/docs/pc/index.html#/Next#%E7%AB%96%E5%90%91%E5%B8%83%E5%B1%80)竖向布局  竖直方向排列内部元素, 内部元素不可随意拖动位置 元素之间会自动对齐, 横向和纵向各有五种对齐方式, 共25种组合排列方式, 用户可以根据情况选择使用 可以设置自动宽高, 会根据容器内子组件的内容, 自动变换容器的宽高 ## [](https://mb.ybvips.cn/docs/pc/index.html#/Next#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%B7%E5%BC%8F)自定义样式  系统已经最大限度的提供了各个组件可diy的样式, 大多数情况下, 用户并不需要自己手动去处理样式代码 当然对于个别特殊的样式和效果, 系统也提供了可以手动添加样式代码的功能 可以给组件添加样式class, 设置样式class的代码 以下就是一个简单的自定义样式的示例, 设定样式class为 aaaa 的容器内 样式class为 bbbb 的组件的样式为 宽度为aaaa的25%, 背景色为#abcdef, 圆角为30px