前端的一些技巧2

是看视频有感的，也是记录一下，这些很奇特的技巧

“权重”问题

之前敲代码的时候没有关注这个事情，比方说一个div有个class为nav，然后里面又套了个class为content的控件，然后又套了个class为inner的控件，然后".nav .content .inner"打这么一长串意图不明的CSS设置(要是为了设置定位倒也能理解)，但今天明白了，就是设置“权重”，比方说有个控件我想设置padding为20px，刷新之后，发现根本就没有实现效果，就可以考虑是不是这个问题了，我这里的例子如图：

例图.png

在左边和右边的控件都有一个小三角，我给他的定义是

/*左边控件*/
<i class="a"><s><s><i>
/*右边控件*/
<i class="b"><s><s><i>

要是单纯设置这个class，然后设置它们的内边距或者外边距，会发现没有效果，通过审查元素发现，不知为啥，设置的内容被“划掉”了，分析过后才发现这就是“权重”问题，如果不像“.xxx .xxx .xxx”设置那么长一串的话，可能会被判定无效

并列样式

也是针对这一张图，两边都想设置一样的，不想写重复代码，又方便管理，怎么办？可以考略并列样式，就好比一个样式，可以多个类使用，

.shortcut .dt,
.fr li.fore
{
   /*设置右左(按照“上右下左”的格式)两个内边距，因为点击上去的时候左右有空隙*/
   padding: 0 25px 0 10px;
   position: relative;
}
.dt i,
.fore i
{
  /*400是font-weight,是加粗的程度 bold是700的参数，这里是用数字写了*/
  /*15px/15px 字体大小/行高 */
  font: 400 15px/15px "宋体";
  
  /*设置定位*/
  position: absolute;
  right: 7px;
  top: 13px;
  /*只需要“菱形”的一半高度即可*/
  height: 7px;
  /*超出的部分都隐藏*/
  overflow: hidden;
  /*如果运行之后没有看见小三角那设置宽度*/
  width: 15px;
}
.dt i s,
.fore i s
{
   /*设置为绝对定位*/
   position: absolute;
   top: -8px;
   left: 0;
}

虚线模式

/*顶部是“点式”虚线*/
border-top:1px dotted #E4E4E4;
/*底部是下滑线虚线)*/
border-bottom: 1px dashed #E4E4E4;

一列四个盒子的设计模式

如图

需求.png

思路:在生活服务里一行里有四个盒子的思路:1.由于要有线,肯定是要有border的,此时肯定248px宽度肯定不够
所以可以让顶部和左边都移动一个px间距,也就是-1px来调试2.此时一行还是只有三个盒子,那可以考虑是宽度问题
那可以在限定宽度的基础上,再找一个盒子或者控件,来重新设置一下宽度,然后把超出的部分减掉即可
这里由于父盒子news限定了248px的宽,所以可以在li的父亲,也就是ul就可以把宽度拉长,然后在ul的父盒子把拉长
之后超出的部分减掉,即可完成一行四个盒子的需求

实现功能的代码(.html文件就是ul和12个li就不多写了，只是解释一下需要用到的"盒子")
1.leftservice:整个生活服务模块的盒子
2.dt：生活服务标题那一列位置的盒子
3.dd：包裹ul和li的盒子
4.news包裹着lifeservice的父盒子,它是参考后续布局的重要输出
实现:

.news{
    width: 248px;
    height: 451px;
    border:1px solid #E4E4E4;
    /*设置右浮动*/
    float: right;
    margin-top:12px;
}
.lifeservice{
    height: 251px;
    width: 248px;
    overflow: hidden;
}
/*修复针对如果顶部没有虚线的处理方式*/
.lifeservice .dd{
    border-top:1px dotted #E4E4E4;
    overflow: hidden;
    height: 251px;
}
.lifeservice .dd ul{
   /*要想一行四个盒子的必要步骤，“盒子”里的“盒子”要变“宽”*/
    width: 253px;
}
.lifeservice .dd ul li{
   /*经过fireworks测量，宽度就是这么多*/
    width: 62px;
    height: 70px;
    border:1px solid #E4E4E4;
    /*左浮动,让li顺序排布*/
    float: left;
   /*设计间距，让边线看上去“更清晰”，让需求更贴近*/
    margin:-1px 0 0 -1px;
}

封装class类（针对浏览器适配问题的)

            //进一步封装自己的类名 -- 如果classname上面包裹了一个id为xxx的盒子时
            function improvedGetClassName(classname,id){
                //也判定支持和不支持的条件
                if (document.getElementsByClassName){
                    //有id的情况
                    if (id){
                        var eleId = document.getElementById(id);
                        return eleId.getElementsByClassName(classname);
                    }else{//没有id的情况
                        return document.getElementsByClassName(classname);
                    }
                }
                //不支持的情况
                if (id)
                {
                    var eleId = document.getElementById(id);
                    //有id的话,就获得id下面所有标签的元素
                    var dom = eleId.getElementsByTagName("*");
                }else{
                    var dom = document.getElementsByTagName("*");
                }
                var arr = [];
                for(var i=0;i<dom.length;i++){
                    //分隔数组
                    var textArr = dom[i].className.split(" ");
                    for(var j=0;j<textArr.length;j++){
                        if(textArr[j] == classname){
                            arr.push(dom[i]);
                        }
                    }
                }
                return arr;
            }