CSS study

1.实现两条横线中间插文字

<div className={styles.pickPathStart}>
     <div className={styles.tip}>PICK A PATH TO START</div>
</div>

.pick-path-start {
   width: 678px;
   margin: 0 auto;
   background-image: linear-gradient(transparent 9px, var-gray-8 10px, transparent 1px);     
}
.tip {
   color: var-gray-4;
   font-size: var-fs-down-1;
   width: 184px;
   text-align: center;
   background-color: var-white;
   margin: 0 auto;
   letter-spacing: 0.7px;
}

2. 实现网格布局

    这里实现的是一个三列平均分布的网格布局，80.7px为每行的高

background-image: repeating-linear-gradient(0deg, var-gray-8 1px,transparent 3px,transparent 80.7px),

repeating-linear-gradient(90deg, var-gray-8 0px,transparent 2px,transparent 33.3%);

    所以最终出现的效果，如果要在里面放图片，则需要为每张图片设置固定的高height:80px，宽为width:33.3%

   

   再给个例子

background: repeating-linear-gradient(90deg,rgba(237, 234, 230, 0.9) 1px, transparent 3px, 

transparent 50%), repeating-linear-gradient(180deg,rgba(237, 234, 230, 0.9) 1px, transparent 3px, 

transparent 112.8px);

  效果：

3.一个盒子，不需要边框，有立体的效果，给div添加box-shadow

div {
   box-shadow:0 1px 8px 0 rgba(0,0,0,0.12);
}
div:hover {
   box-shadow:0 1px 4px 0 rgba(0,0,0,0.12);
}

    效果图：

    

4. Solve the issue of image compression

1) use <img/> 图片会形状正常，图片缩放根据图片大小等比例

width: auto;
height: auto;
max-width: 100%;
max-height: 100%;

或者：

width: auto;
height: auto;
background-size: 100% 100%;

例子：

<div className={styles.cardImageContainer}>
  <img data-image-url alt={props.name} src={transform(props.imageUrl, 'rs', 'w', 220)} />
</div>

.card-image-container {
  top: 0;
  left: 0;
  width: 100%;
  height: 220px;
  img {
    margin: auto;
    top: 0;
    bottom: 0;
    height: auto;
    max-height: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
}

2)use background-image  这种情况图片会失真，虽然图片形状正常显示，因为最大边会铺满整个盒子，小边根据大边自适应长短，但不会铺满

background-image: url("icon-house.svg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;

5.由于IE不能兼容position，可以根据margin去调位置

6.IE不能实现....省略(文本隐藏)，只能使用line-height 或者 height让其显示多少行

  其他浏览器：text-overflow：ellipsis（超出带省略号...）

  单行文本：white-space: nowrap

  多行文本：-webkit-line-clamp: 2;(显示行数)     -webkit-box-orient: vertical;

7.实现按情况添加样式

import classNames from 'classnames/bind';  //动态绑定样式
import styles from './styles.scss';
let cx = classNames.bind(styles);

<div data-add-store-card className={cx('addStoreCard',{
    large: props.length == 1,
    medium: props.length == 2,
    small: props.length > 2,
})}
>

.add-store-card {
    height: 251.8px;
    min-width: 294px;
    &.large, &.medium {
      .icon-plus {
        display: block;
        width: 50px;
        height: 50px;
        margin: 0 auto 10px;
        vertical-align: -4px;
      }
    }
}

    &. 后面跟着的样式名称是和外面那层并排的

    <div data-add-store-card="true" class="add-store-card--bf3ff medium--5bce3"></div>

8.字符间的间距大小

letter-spacing:   0.6px;  (汉字，英文)          word-spacing: 0.6px;  (英文)