## 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