一、一個按鈕背后的故事
接着上節關於前端常見的2種開發模式結尾，試着來理解看似一個平淡、簡潔、漂亮UI設計(UI Design)的按鈕背后的一些故事。。。。。。
通常情況下，前端應該都熟知，用戶瀏覽一個網頁或者這里一個按鈕站在用戶的角度來看通常是平面的（好像只存在x、y軸 如下）
但本質上是三維的（或者說存在x軸、y軸、z軸）主要取決於用戶看網頁的視角，好比生活中我們看到三維建築的立體牆面站得越遠，越感覺他是平面的，實際上是三維的。
你或許會問？如何證明一個按鈕是三維的呢？請接着繼續往下看哈。。。
A.正常情況下通常是這樣的（如下圖所示）效果請點擊，
B.將一個按鈕元素繞x軸旋轉45度后如下，效果請點擊
C.將一個按鈕元素繞x軸旋轉45度后,父級元素設置成 perspective 透視(眼睛看物體是呈現的方式近大遠小的效果)值為100后如下 效果請點擊：
（標注：css3 perspective 屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。
當為父元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。）
綜上ABC三點充分得出一個結論： 一個按鈕（或說用戶瀏覽的網頁按鈕）是立體的（或說是三維的)。 而不是平面（或說不是二維的）。
（標注：記得有一次一個生成的header網頁頭部明明positon屬性值設置絕對定位 fixed后（positon:fixed相對於瀏覽器窗口定位），拖動滾動條后和正常元素一樣不見了，感覺fixed貌似失效了。
用三維坐標知識點來理解 fixed仍然是生效的，只是父級元素body設置成 perspective:100; -webkit-perspective:100; /* Safari and Chrome */ 不在用戶的視野中了，所以感覺fixed貌似失效了 。效果請點擊。）
那么此時或許你會又拋出一個疑問，既然一個按鈕（或說用戶瀏覽的網頁按鈕）是立體的 （注：CSS著名層疊模型也能很好說明按鈕是立體的，這里不再贅述）。那么究竟構成立體元素是什么呢？請接着繼續往下看。。。
二、將一個按鈕按PS圖層的概念來進行分層，通過面向對象編程思維設計
以上第一點說明一個按鈕是三維的（或者說立體的），通過可視化（可視化指眼睛能夠看到的）那構成這個按鈕元素有哪些呢？
大概分析一下，得出通用的共性，簡單羅列大致如下：
1、一個按鈕存在寬高（就像一個盒子一樣） 2、存在描述這個按鈕功能的文本（如：登錄、狀態切換等） 3、有通用事件 （如點擊事件、鼠標滑過【移入、移除等效果】） 4、按鈕設計尺寸與網頁瀏覽尺寸的轉換計算 5、瀏覽按鈕適配效果 6、豐富多彩、多樣化的按鈕 7、......
如下圖所示
通過以上大概就知道，——— 一個立體按鈕構成組成部分 。
然后將這些構成這個按鈕的組成部分，通過按照面向對象（抽象類、實現類）的編程思維方式，可能設計如下：
這種設計模式實現UI組件最大的好處就是組件之間可以自由組合、靈活而敏捷，具有很強的可遷移性 。缺點是起初開發速度較慢~。。。ps
作者：Avenstar
出處：https://www.cnblogs.com/zjf-1992/p/10201587.html
關於作者：專注於WEB前端開發、知識管理提高學習效率、執行效率
本文版權歸作者所有,轉載請標明原文鏈接
如果您覺得我的文章對您有用，請隨意打賞。
微信打賞
https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/