关于web前端的一些注意事项

关于web前端的一些注意事项

1.css样式不变的时候F12看看 类名是否写错

2.圆形头像可以用背景图片的形式也可以用img的标签插入 但是为了让后台方便传入数据 基本是通过img来做的 background-size可以设置背景图片的大小

3.用ul标签的时候，如果所有的li元素都是用float来定义的 那么最好再ul的class中加入fix的类固定一下可以导入reset.css 或者自己写一个fix的类 如下：

/*浮动清除*/
.fix{*zoom:1;}
.fix:after{
    display:block;
    content:"$";
    height:0;
    clear:both;
    overflow:hidden;
    visibility:hidden;
}

4.在web网页中为了避免不必要的小问题能用padding的尽量用padding 实在不行再用margin
在大屏项目中，body我设置了一个1080p，但是因为body正中心有一个div 而再div中我用margin：415 auto设置，让我居中，结果实际的body的高度就变成了1080+415的高度了，如果在body里面使用padding因为在内部 变动所以还是1080p

5.在一个div中，在确定div的大小正好是我们页面需要的大小的时候，这个时候在将一张图片放在这个div上且恰好能填满这个div并且能够随着div的大小的改变而改变这个时候怎么办
div中一个类设置了div想要的高度跟宽度 然后在images设置一下width：100%；height：100% 这样就可以填满整个div

6.span不设定自身的宽度跟高度的话，就会随着文字的多少而自适应宽度

7.微信小程序的注意点：
（1）不能在scroll-view中使用textarea,mao,canvas,video组件
（2）scroll-init-view的优先级高于scroll-top
（3）onPullDownRefresh事件，无法在scroll-view中触发
（4）若想使用下拉刷新，一定要使用页面的滚动，而不是scroll-view，这样也能通过点击顶部状态栏回到页面顶部
poRankBtn.hitArea = new PIXI.Rectangle(0,0,1.77*newBase*ratio, 0.5*newBase*ratio);
点看1 南塘3 移动2

8.关于flex对于华为浏览器护着uc浏览器兼容差的问题：
display: flex 的写法：

 span{ 
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }

flex: 1; 的写法：

 span{
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            display: block;
            width: 0%;          
        }

注意：给flex添加前缀并不是万能的，其原因是不能用行内元素，要改成block才能更好的支持flex，当元素使用flex:1时，要增加width:0%; 且不能使用margin:0 auto;

align-items: center 的写法

span {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

justify-content: center 的写法：

span {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}

9.关于点击input输入框调起手机键盘时，在页面底部的footer顶上来的解决方法：

（1）用 position:absolute;将footer固定在底部，还要搭配position: relative;使用，不然就会出现上图所示的情况，尽量不要用 position:fixed;

.footer{
          width: 95%;
          text-align: center;
          font-size:0.12rem;
          color:#dddddd;
          position:absolute;  //absolute要与relative搭配使用，不然会出问题
          bottom: 0.1rem;
      }

  (2)用js来控制，jquery中focus用来监听input的聚焦事件，blur为失去焦点事件。当input为focus事件，那么隐藏footer，当为blur事件就显示

    <script>
                 $(function(){
                  $("input").focus(function(){
                      $(".footer").hide();
                  })
                   $("input").blur(function(){
                      $(".footer").show();
                  })
                 });                           
             </script>  

(3)有些时候还会出现调用键盘输入input的值时，背景图片会被键盘顶上去，解决的方法就是奖背景图片的高度height:100% 改为min-height:100% 时背景图片的高度变成最小高度为100%。

10.关于字符溢出隐藏的写法
（1）字符溢出隐藏

.text-overflow-1{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

（2）字符超出一行时隐藏

.text-overflow-one{
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
}

（2）字符超出两行时隐藏

.text-overflow-one{
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

11.关于怎么让table设定的宽度不变，并且当文字溢出时，table的宽度不受内容长度的影响
第一步：table 设置 宽度，绝对宽度和相对都可以table-layout:fixed ;设置了这个属性，其余所有td都是相同的宽度。
问题： 这样操作之后，table是宽度固定了，但是里面的文章如果很长，文字会覆盖
解决方法：在 td 里面 加上 style=”word-wrap:break-word;” 自动换行就好了，如果不想换行，可以将超出内容设为隐藏，并且用省略号代替：

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;