一、技術不難、意識很難

有些東西的東西的實現，難的不是原料、技術；而是想不到，或者說意識不到。

例如下面這個簡單而又神奇的魔術：

是吧。搞通了，才發現，哦~原來這么回事，很簡單的嘛，我也可以實現的！其實，簡單嗎？不簡單，很難，難在你想不到這個魔術idea, 雖然看上去實現很簡單。

同樣的，在CSS布局的世界里，也有類似的情況。有些東西并不是實現有多難，而是想不到、意識不到。

記住，重要的是意識。

二、簡單的開胃菜-裝飾元素可缺省

花里胡哨的東西在靠譜的網站已不常見，因此，要找個很純粹的裝飾性元素我還是好好折騰了一把。
所謂“裝飾性元素”，指頁面主體內容并沒有多大的必然聯系，更多作用是美化，引導的元素。在布局這些元素的時候，我們要把它看成“外來者”，排擠，可缺省，要讓其存在與否仿佛與頁面沒關系一樣。

什么意思，就是，讓這些元素直接從頁面上delete掉，頁面毫無反應，好比地球上死了一只螞蟻，上帝壓根感覺不到。

例如，下面的對比，以及下面的下面的對比：

通過上面的“找你妹”，可以發現這些站點的這類元素都是可缺省的。但其實（可缺省的實現）可能并不是有這個意識，而是，技術實現使然——不使用絕對定位，我搞不定哈！

OK，全然正面的例子顯然不具有說服力，拿偉大的網站12306舉例(//zxx: 鑒于12306.cn無可匹敵的考古價值，平時我根本舍不得拿出來給大家觀摩的)：

上圖箭頭標示的“書環”效果是相當正宗的裝飾性元素，OK，我們現在把這個裝飾性元素刪掉，看看結果如何？

我擦！好大一塊牛皮癬啊！！裝飾性的東西承擔了房屋結構的責任，顯然是糟糕的。刪不了，加不了，動個皮毛也要很多折騰——旁邊的主體背景什么的也要一起改。

按照本文的觀點，這些環環效果應該是可缺省的，如何處理之，很簡單，就跟上面對比圖中的元素一樣，提出之，定位之。

您可以狠狠地點擊這里：火車票網站某裝飾元素可缺省demo

點擊頁面上的按鈕，就可以看到裝飾性元素或無或錦上添花的效果，這就是可缺省。

于是，無論我們是后期修改內容背景、或修改裝飾效果（如扁平或刪除），潛在的工作開銷就會小很多。實際上，裝飾元素可缺省的布局設計在實現成本上并不大，關鍵要有這個意識，知道這么回事。

三、重點難點-關聯模塊可缺省

裝飾性元素一般都是絕對定位實現的，運氣也好、必然也好，不管怎樣，其就是可缺省的（與周圍環境UI無耦合、存在與否不影響布局）。但是，對于功能性的元素或模塊，你是否有可缺省的意識呢？

OK，舉個例子，參見下面截圖：


如果是你，你會怎么實現（指布局！UI效果什么的先扔在一邊）？

是浮動、浮動、浮動，或是絕對定位、定位、絕對定位或是其他組合？我相信，不管怎樣，諸位的實力要實現這個效果是松松的。

走遍千山萬水，終于在拍拍首頁找到類似交互的搜索：

拍拍這里是如何實現的，一查看，是“下拉塊浮動、輸入框塊浮動、搜索按鈕塊浮動”。

我們將下拉小模塊對應的HTML刪除，結果長這個樣子了：

留白了，不好看了哈！

看到此處，可能有人會拍案而起了：“你這不明擺著沒事找茬嘛！我捅你一，你身上難道沒有個窟窿嗎？再說了，哪個混蛋會沒事把頁面上某個元素刪掉哈！”

這位兄臺，息怒，無風不起浪，無事不成文，我還就遇到了捅刀子的情況。

話說，沒過幾天，又來個張圖，下面這個樣子的，據說是企業用戶使用的時候呈現的：

同一個頭部，不同性質的用戶進來呈現的不一樣——→下拉小模塊有或沒有。

此時，如果下拉模塊是可缺省的，你會不會很開心，前端這邊可以不用改，直接嘴皮子動兩下：“你們直接不輸出那段就好了！”然后喝茶、微博、把妹……后臺輕松，測試輕松，大家都輕松，團隊都輕松，氛圍大好，世界多美好。

但是，如果是拍拍那個樣子，兄弟，不是動嘴皮子就可以的了。為了兼容，以前的布局肯定要改，HTML、CSS輪番修改，哦，我想想就覺得辛苦；后臺那邊也累，跟著一起改動；測試也累，不同用戶測來測去，大家都忙，大家都加班，大家都煩躁，放假多美好。

平時我們寫這些模塊的時候，想得多的是性能、兼容性以及效果實現；如果這些你都可以輕松應對，試著加一條——可缺省性。

口水多沒用，可能傳播的是口氣，我們進入老少皆宜的demo頁面，開看看關聯布局中的可缺省效果，您可以狠狠地點擊這里：關聯布局中的可缺省效果demo

默認進來這樣子，有下拉模塊：

點擊下面的應對產品經理需求按鈕讓下拉模塊隱藏，結果，文本框自動補位，這就是關聯元素間的可缺省布局：

至于后面的“搜索按鈕有無切換”按鈕屬于獨立無關聯可缺省，類似上面裝飾元素；“寬度可變切換”按鈕屬于自適應布局。以上3個按鈕代表三種降低后期潛在維護成本的方法。即使你是固定布局、或是響應布局控，其中的思想也是可以有所借鑒的。

四、本想說優點，寫著寫著成結語了

你永遠不知道產品經理需要什么東西，因此，在頁面布局的時候，一定要有強烈的意識：要是產品經理看這里不爽，把這里這部分干掉怎么辦？如果干掉了，我是不是只要張個嘴讓后臺那邊把這部分HTML注釋或刪掉就可以呢！

如果真能做到這樣，哪有那么多加班？哪有改動恐懼癥？哪有各種不滿的吐槽？你應該有更多的時間去學習其他新的或者深的東西，而不是被本可以什么都不要做的改動折騰掉N多的時間和精力。前者久而久之良性循環，疾馳與他人之前；后者原地循環，跑步機上死命奔跑。

一句話，后期維護很輕松。裝飾性元素自然必須可缺省，而且一點都不能影響布局；而功能性元素，也應該有強烈的可缺省意識，這樣，或組裝，或添加，或刪除的時候，我們只要響應的HTML拖移、粘貼或刪除就可以了。而且，布局可缺省，本身的容錯能力也是相當強的。以柔克剛，萬變歸宗。

然而，就像諸葛亮的空城技能，三國殺有俗語：為了空城而空城的諸葛亮不是好諸葛亮。同樣，不能為了缺省而缺省，要權衡：一是實現成本，二是實現必要，三是可訪問性（可缺省布局可能會改變HTML元素應該的順序，會導致tabindex混亂）等。

但是，無論如何，在布局的時候，時候保持這個意識肯定是沒有問題的。記住：意識與比技術重要。籃球場上搶籃板最多的肯定是籃板意識最好的，而不是跳得最高的。

拋磚引玉，歡迎挑刺、飛鞋。資質有限，如有表述不準確的地方，歡迎指正。非常希望可以有針鋒相對的討論。

恩，就這些，感謝閱讀！

原創文章，轉載請注明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=3097

（本篇完）

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的可缺省的CSS布局——张鑫旭的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。