【建议收藏】90%的前端都会踩的坑,你中了吗?(上)

简介: 移动开发时代,前端同学刚刚送别了让人头秃的IE浏览器,却发现憧憬已久的移动互联网时代并不是想象中那般美好。各种棘手的系统兼容问题和浏览器兼容问题怎么也让人高兴不起来。作为一名工作不足3年的前端程序媛,始终相信好记性不如烂笔头。每次在项目开发过程中踩到的坑,都习惯性地记录了下来。昨日一瞥竟积少成多,稍感诧异。因此分享出来,希望对大家能有所帮助。

样式问题


1、父元素设置了border-radius,子元素应用了transform,并且父元素设置了overflow:hidden,但是却失效?


// 给父元素设置 
{
    position:relative;
    z-index:1;
}


2、设置input 文本框的 placeholder 的颜色


input::-webkit-input-placeholder{
    color:rgba(144,147,153,1);
}


3、如何设置body背景色,height:100%,不生效?


同时设置html,body的高度
html,body{
    height:100%;
} 
body{
  height: 100vh; // 代表占屏幕100%
}


4、一像素边框的问题


.row {
  position: relative;
  &:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    border-bottom:1px solid #e6e6e6;
    color: red;
    height: 200%;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    pointer-events: none; /* 防止点击触发 */
    box-sizing: border-box;
  }
}


5、css属性touch-action:none;


该属性会导致安卓页面无法滚动,慎用!


6、去除ios 手机端input输入框的内阴影


input{ 
    -webkit-appearance: none; 
}


7、安卓手机端div里面在包一层div,文字展示不居中的问题。


最好给div设置padding ,不固定高度和不设置line-height;


8、iOS端input输入框光标错位


是由于fixed定位引起的,改成absolute就解决了。


.box{
    position: absolute; 
}


9、div实现背景色和背景图片同时存在


{
    background-color: #fff;
    background-image:url('../../assets/img/model-bg.png');
    background-repeat: no-repeat;
}


10、css 制作椭圆


border-radius可以单独设置水平和垂直的半径,只需要用一个斜杠(/)分隔这二个值就行。


此外我们还要知道border-radius不仅可以接受长度值还可以接受百分比值。


{
    width: 150px;
    height: 100px;
    border-radius: 50%/50%; //简写属性:border-radius:50%
    background: brown;
}


11、图片居中显示


object-fit: cover;
相关文章
工作失误后怎么办,哪些坑必不能踩
本次分享的是工作失误后不能做的事。
|
程序员
程序员创业踩过的10个坑
我在之前的文章《程序员如何行稳致远》和《程序员是否适合创业》中跟朋友们提过,程序员要早点积累自己的生产资料,尽早尝试轻创业。但是创业有很多坑,我总结了这些年自己踩过的10个坑,希望对你有帮助。
|
Shell Python
这些年,你们一起踩过的坑(2)
上次我们踩坑总结文章 这些年,你们一起踩过的坑(1) 受到了不少同学的认可。我也确信文中所涉及的问题是非常具有普遍性的,对绝大多数初学者都会有帮助。
|
9月前
|
前端开发 JavaScript 网络协议
2023我的前端面试准备
2023我的前端面试准备
|
安全 程序员 测试技术
【程序员有哪些绝对不能踩的坑】
【程序员有哪些绝对不能踩的坑】
|
人工智能
小白也可以做智慧大屏?我来帮你踩踩坑!
小白也可以做智慧大屏?我来帮你踩踩坑!
174 0
小白也可以做智慧大屏?我来帮你踩踩坑!
|
IDE Shell 开发工具
这些年,你们一起踩过的坑(1)
今天就把平常被提问频率较高的一些问题整理出来,再次统一回答。基本都是非常早期阶段的问题,其中一定有你遇到过或将会遇到的。已经有一定基础的同学也可以对照下,这些问题涉及的概念,自己是否都已清楚。
|
存储 安全 前端开发
|
JSON 前端开发 JavaScript
HTML+CSS+JS实现【别踩鸡块】,含(源码+思路)
HTML+CSS+JS实现【别踩鸡块】,含(源码+思路)
499 0
HTML+CSS+JS实现【别踩鸡块】,含(源码+思路)
|
SQL 数据库连接 Go
【锦囊妙计】我做PHP开发时踩的坑
这篇文章整理了我在开发过程中遇到的一些问题,比如“如何更好的比较字符串”,“什么场景下应该用什么函数读取文件”。
121 0