一个项目的前端布局给个人思考

内容包括： 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

其余文件有时间不妨也点一下，相信或多或少会对你有必定的帮助！感谢支持！