內(nèi)容包括： HTML（講述你不知道的absolute和float關(guān)系）和javascript（自己寫的一段原生js實(shí)現(xiàn)雙擊切換效果）
最近在一個項(xiàng)目中發(fā)現(xiàn)一個自己一直忽視的問題 position 和 float 的混用問題，position定位給我們前端開發(fā)中頁面的布局帶來了很多的好處，但如果頁面使用過多的position定位，你將會發(fā)現(xiàn)，頁面的布局超出了你的控制，就算是最終經(jīng)過各種修改嘗試，頁面達(dá)到了你的設(shè)計(jì)效果，但是回過頭來你再審視你的代碼你會不禁感慨‘我擦，這是一坨什么！’。
所以，需要加深基礎(chǔ)的學(xué)習(xí)，從而簡化布局工作量，用最少的代碼來實(shí)現(xiàn)我們所需要的布局效果，通過這次的實(shí)踐我發(fā)現(xiàn)了自己前端開發(fā)中存在知識缺陷問題，所以寫了一篇文章和大家相互學(xué)習(xí)。
要實(shí)現(xiàn)的頁面布局效果是下面這個樣子的,它由三部分組成菜單按鈕，導(dǎo)航欄，側(cè)邊欄，看到這個樣子同學(xué)會不以為然，‘不就是這么常見的布局嗎？貌似也不會有什么技術(shù)含量呀！你不會是在逗我吧’
這時我想說，‘no！no no no!各位看官莫急，且聽在下慢慢道來’，我們?nèi)绻诿總€模塊加上不同顏色的邊框你就會發(fā)現(xiàn)不同之處，下面圖片中的一些模塊的名稱定義，需要記一下喲，這會更方便你閱讀全文：
點(diǎn)擊查看效果示例
1.使用圖文混合的布局解決導(dǎo)航欄的布局
<a class="l-link" href="javascript:;">
<div class="l-float">
</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>
我們常見的形式為：
<p>這是一個圖文混合布局</p>
是有一個行內(nèi)元素和一個塊狀元素組成，或者是有inline, inline-block, block轉(zhuǎn)換的行內(nèi)元素或者塊狀元素。
2.使用position定位中的 absolute或者fixed的特性，由于fixed是absolute的擴(kuò)展，只是定義改變了定位出現(xiàn)的形式，所以fixed繼承了absolute的破壞性和包裹性兩個特性。對于這兩個特性不了解的同學(xué)可以百度相關(guān)方面的文章。
在上述代碼結(jié)構(gòu)上加上l-container容器，使用position：fixed，使用fixed的包裹性
效果圖如下：
使用過圖文混合效果的同學(xué)應(yīng)該知道，右邊導(dǎo)航欄的高度隨著左邊的高度變化而變化，所以解決l-list 的高度不是內(nèi)容的高度的方法即是在l-list中加入overflow:hidden;即可做到如下圖的效果：
代碼結(jié)構(gòu)如下：
<div class="l-container">
<a class="l-link" href="javascript:;">
……
</a>
<ul class="l-list">
……
</ul>
</div>
3.側(cè)邊欄和菜單按鈕的布局（講述你不知道的absoute和float關(guān)系）
它們是兄弟關(guān)系，都能使元素脫離文檔流（慕課網(wǎng)知識充電），但是還有一層關(guān)系你要知道？集中注意力往下看你喲！
如何使導(dǎo)航欄中的菜單按鈕達(dá)到更好的用戶觸發(fā)使用效果？
所以設(shè)計(jì)成了如最終效果圖顯示的布局，
a，增大按鈕的可觸發(fā)范圍使之與側(cè)邊欄的寬度等距；
b，使菜單按鈕一部分遮擋側(cè)邊欄的一部分區(qū)域，從而實(shí)現(xiàn)更好的切換效果
實(shí)現(xiàn)a設(shè)計(jì)簡單增加寬高樣式，如果不能設(shè)置將元素轉(zhuǎn)化為行內(nèi)塊狀元素。
側(cè)邊欄的實(shí)現(xiàn)不用說就是position：fixed；或者position：absolute；
實(shí)現(xiàn)b就要稍微動一下心思。
通常，當(dāng)我們寫完代碼后測試發(fā)現(xiàn)，效果并不是我們想的樣子，我們發(fā)現(xiàn)實(shí)際顯示效果是側(cè)邊欄的一部分遮擋住了菜單按鈕，‘我擦，這個難不住機(jī)智的我們’，使用z-index:99999999;但是我們刷新頁面后發(fā)現(xiàn)不是這個樣子的，這是為什么呢？
我們都知道float ，和 absolute 都能使被修飾的模塊脫離文檔流，但是脫離文檔流后兩者的層級關(guān)系如何，這個問題有的人想過，可能大部分人都沒有想過，這個我也看過很多文章發(fā)現(xiàn)基本沒有人說的明白。但是這并不妨礙我發(fā)表一下個人的觀點(diǎn)：
*雖然float和absolute都能使元素脫離文檔流，但是absolute脫離文檔流后就不影響原來所處容器內(nèi)的元素布局，但是float卻不是，舉一個最常見的例子就是清除浮動，所以，雖然說float，absolute都是脫硫文檔流，但嚴(yán)格地講float應(yīng)該稱之為半脫離文檔流。因此在層級關(guān)系上來說absolute的層級更高。
*從我們寫的這個例子來講l-container positon:fixed;
l-menu float:left；樣式后，l-container包裹(理解包裹特性)l-menu也可以知道abso的層級高于float的層級。
github下載代碼如果喜歡記得添加個星星-
雖然有些同學(xué)不知道這是為什么，但是不妨礙我們解決問題，那就是將l-container和 l-postion這兩個同根模塊都設(shè)置position：absolute或者position：fixed；樣式，對就是這個樣子的，我們開發(fā)的過程中與到類似的問題，我們也是采用了‘同一性’的原則，就像我們在解決不同瀏覽器兼容性問題時采用的normal.css一樣，將屬性同一。
這部分的代碼結(jié)構(gòu)是：
<div class="l-container">
<a class="l-link" href="javascript:;">
…… // 菜單按鈕
</a>
<ul class="l-list">
…… // 導(dǎo)航
</ul>
</div>
<div class="l-position">
…… // 側(cè)邊欄
</div>
附上：js側(cè)邊欄實(shí)現(xiàn)的js原生代碼：
var flag = true; // 顯隱標(biāo)識符
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;
}
}
}
本文相關(guān)文件為position-float.html和position-float.html
其他文件有時間不妨也點(diǎn)一下，相信或多或少會對你有一定的幫助！感謝支持！
