关于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顶上来的解决方法：
关于web前端的一些注意事项

（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>

秒客网

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

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

相关文章