开发中样式常见问题解决办法

父容器display:flex column后，子元素的内部元素height:100%无效解决方法。

父类容器position:relative;子元素：position:absolute;width:100%,height:100%;

CSS flex布局最后一行左对齐,只写一种

父元素：grid布局，justify-content:space-between;
      grid-tempalte-columns:repeat(auto-fill,200px);
子元素：width:200px;
//第二种，或者说最好的方法
父元素：grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
子元素：不需要设置

img标签图像cors跨域获取资源

<img src='xxx' crossorigin='anonymous' >
npm i html2canvas导出成图片的时候图片不是本地图片，需要加这个

css中给子元素添加margin-top影响到父元素

1.父元素加border
2.父元素加padding值
3.父元素添加overflow:hidden
4.父元素添加float

消除浏览器对input的自动填充

出现原因：设置 input 的 type 属性为 password 后，当页面进行过提交，并且允许浏览器记住密码后，
        那么再次加载该页面时，此时 password 及附近的 input 就会被自动填充。
解决办法：auto-complete='new-password';
        autocomplete='off'/autocomplete='new-password'
        都试一下，单个不行就排列组合一下。

uni-app中switch与点击事件冲突，阻止冒泡。

<view @tap="toEditPage">
    <view @tap.stop.prevent>
        <switch @change.stop="" />
    </view>
</view>

table表格border合并问题,css解决

border-collapse: collapse;

-webkit-text-stroke文字描边方案

.title33 {
  text-align: center;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 1.52px;
  color: #efd6bb;
  -webkit-text-stroke-width: 6px;//只会展示3px的描边
  //因为webkit-text-stroke-width中心点是在文字的线段的最外面。
  //因此要用一个伪元素覆盖住里面的描边
  -webkit-text-stroke-color: #334d2c;
  position: relative;
  &::after {
    content: '春日焕活轻食集';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #efd6bb;
    -webkit-text-stroke-width: 0;
  }
}

关于scroll滚动的样式基础

  scroll-snap-type: x mandatory;
  anchor-name: --carousel;
  .item{
    scroll-snap-align: start;
  }
  &::scroll-button(left) {
    content: '◄';
  }
  &::scroll-button(right) {
    content: '►';
  }
  &::scroll-button(*) {
    align-self: anchor-center;
    position-anchor: --carousel;
  }