疑难杂症

那些你可能或许会遇到的疑难病症～

CSS

移动端下的不符合预期的点击反馈态

疑难杂症之iOS下 异常点击反馈

// html
<div class="dv" id="div">添加div点击
    <input type="checkbox">
</div>
// css
.dv {
    padding: 20px;
    cursor: pointer;
}

// 解决方案
/* 方案一 */
cursor: default;(或者 none 等)
/* 方案二 */
-webkit-tap-highlight-color: transparent;

flex中宽度被压缩

(1)所有的子元素添加flex-shrink:0;

(2) 将所有的子元素添加min-width;

图片等比例展示

（1）padding-top

（2）aspect-ratio

aspect-ratio: 1/1;
object-fit: cover;
object-position: center;

画边缘框

box-shadow

<div class="con top">上</div>
<div class="con bottom">下</div>
<div class="con left">左</div>
<div class="con right">右</div>

.con {
  width: 100px;
  height: 100px;
}
.top { box-shadow: 0 -9px 0 -8px red; }
.bottom {  box-shadow: 0 9px 0 -8px green; }
.right {  box-shadow: 9px 0 0 -8px blue; }
.left {  box-shadow: -9px 0 0 -8px ; }