90%的前端都会踩的坑，你中了吗？

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;

该文章转载自知乎@子由风，如侵犯权益，请联系我处理。