一個項目的前端佈局給個人思考

內容包括： HTML（講述你不知道的absolute和float關係）和javascript（本身寫的一段原生js實現雙擊切換效果）

最近在一個項目中發現一個本身一直忽視的問題 position 和 float 的混用問題，position定位給咱們前端開發中頁面的佈局帶來了不少的好處，但若是頁面使用過多的position定位，你將會發現，頁面的佈局超出了你的控制，就算是最終通過各類修改嘗試，頁面達到了你的設計效果，可是回過頭來你再審視你的代碼你會不由感慨‘我擦，這是一坨什麼！’。

因此，須要加深基礎的學習，從而簡化佈局工做量，用最少的代碼來實現咱們所須要的佈局效果，經過此次的實踐我發現了本身前端開發中存在知識缺陷問題，因此寫了一篇文章和你們相互學習。

要實現的頁面佈局效果是下面這個樣子的,它由三部分組成菜單按鈕，導航欄，側邊欄，看到這個樣子同窗會不覺得然，‘不就是這麼常見的佈局嗎？貌似也不會有什麼技術含量呀！你不會是在逗我吧’

點擊查看效果示例

最終效果圖

這時我想說，‘no！no no no!各位看官莫急，且聽在下慢慢道來’，咱們若是在每一個模塊加上不一樣顏色的邊框你就會發現不一樣之處，下面圖片中的一些模塊的名稱定義，須要記一下喲，這會更方便你閱讀全文：
點擊查看效果示例

各個模塊加邊框後的顯示效果

1.使用圖文混合的佈局解決導航欄的佈局

<a class="l-link" href="javascript:;">
    <div class="l-float">
        ![](./svg/menu.svg)
    </div>
</a>

<ul class="l-list">
    <li class="l-list-item">首頁</li>
    <li class="l-list-item">分類一</li>
    <li class="l-list-item">分類二</li>
    <li class="l-list-item">分類三</li>
</ul>複製代碼

咱們常見的形式爲：

![](default.jpg)
 <p>這是一個圖文混合佈局</p>複製代碼

是有一個行內元素和一個塊狀元素組成，或者是有inline, inline-block, block轉換的行內元素或者塊狀元素。

2.使用position定位中的 absolute或者fixed的特性，因爲fixed是absolute的擴展，只是定義改變了定位出現的形式，因此fixed繼承了absolute的破壞性和包裹性兩個特性。對於這兩個特性不瞭解的同窗能夠百度相關方面的文章。

百度搜索好文章

在上述代碼結構上加上l-container容器，使用position：fixed，使用fixed的包裹性
效果圖以下：

包裹特性使用後效果圖

使用過圖文混合效果的同窗應該知道，右邊導航欄的高度隨着左邊的高度變化而變化，因此解決l-list 的高度不是內容的高度的方法便是在l-list中加入overflow:hidden;便可作到以下圖的效果：

position-float-5.png

代碼結構以下：

 <div class="l-container">
      <a class="l-link" href="javascript:;">
         ……
      </a>

      <ul class="l-list">
        ……
      </ul>
</div>複製代碼

3.側邊欄和菜單按鈕的佈局（講述你不知道的absolute和float關係）

它們是兄弟關係，都能使元素脫離文檔流（慕課網知識充電），可是還有一層關係你要知道？集中注意力往下看你喲！
如何使導航欄中的菜單按鈕達到更好的用戶觸發使用效果？
因此設計成了如最終效果圖顯示的佈局，
a，增大按鈕的可觸發範圍使之與側邊欄的寬度等距；
b，使菜單按鈕一部分遮擋側邊欄的一部分區域，從而實現更好的切換效果

實現a設計簡單增長寬高樣式，若是不能設置將元素轉化爲行內塊狀元素。
側邊欄的實現不用說就是position：fixed；或者position：absolute；
實現b就要稍微動一下心思。
一般，當咱們寫完代碼後測試發現，效果並非咱們想的樣子，咱們發現實際顯示效果是側邊欄的一部分遮擋住了菜單按鈕，‘我擦，這個難不住機智的咱們’，使用z-index:99999999;可是咱們刷新頁面後發現不是這個樣子的，這是爲何呢？

咱們都知道float ，和 absolute 都能使被修飾的模塊脫離文檔流，可是脫離文檔流後二者的層級關係如何，這個問題有的人想過，可能大部分人都沒有想過，這個我也看過不少文章發現基本沒有人說的明白。可是這並不妨礙我發表一下我的的觀點：
雖然float和absolute都能使元素脫離文檔流，可是absolute脫離文檔流後就不影響原來所處容器內的元素佈局，可是float卻不是，舉一個最多見的例子就是清除浮動，因此，雖說float，absolute都是脫硫文檔流，但嚴格地講float應該稱之爲半脫離文檔流。所以在層級關係上來講absolute的層級更高。 從咱們寫的這個例子來說l-container positon:fixed;
l-menu float:left；樣式後，l-container包裹(理解包裹特性)l-menu也能夠知道absolute的層級高於float的層級。
github下載代碼若是喜歡記得添加個星星^-^
雖然有些同窗不知道這是爲何，可是不妨礙咱們解決問題，那就是將l-container和 l-postion這兩個同根模塊都設置position：absolute或者position：fixed；樣式，對就是這個樣子的，咱們開發的過程當中與到相似的問題，咱們也是採用了‘同一性’的原則，就像咱們在解決不一樣瀏覽器兼容性問題時採用的normal.css同樣，將屬性同一。

這部分的代碼結構是：

<div class="l-container">
      <a class="l-link" href="javascript:;">
         ……  // 菜單按鈕
      </a>

      <ul class="l-list">
        ……  // 導航
      </ul>
</div>

<div class="l-position">
 …… // 側邊欄
</div>複製代碼

附上：js側邊欄實現的js原生代碼：

var flag = true; // 顯隱標識符
var obj = document.getElementsByClassName('l-link')[0]; 
var lPos = document.getElementsByClassName('l-position')[0];

obj.onclick = function(){
    if(flag){
        // 添加選擇器l-active
        objClass = lPos.getAttribute('class') || '';
        lPos.setAttribute('class', objClass + ' l-active');
        return flag = false;
    } else {
        // 去除選擇器l-active
        objClass = lPos.getAttribute('class');
        objArr = objClass.split(/\s+/);
        if(objArr && objClass !== null){
            for(var i=0, len=objArr.length; i<len; i++ ) {
                if(objArr[i] === 'l-active'){
                    objArr.splice(i, 1);
                }
            }
            var objClass2 = objArr.join(' ').replace(/^\s|\s$/g, '');
            lPos.setAttribute('class', objClass2) ；
            return flag = true;
        }
    }
}複製代碼

github下載地址：

本文相關文件爲position-float.html和position-float.html

其餘文件有時間不妨也點一下，相信或多或少會對你有必定的幫助！感謝支持！