css常用又不好记的样式

margin溢出(重叠)

⼦元素margin-top,导致⽗元素向下移动

解决⽅案

1.给⽗元素设置overflow: hidden;

2. 给⽗元素设置padding-top

3. 给⽗元素设置边框border

多使用 overflow:hidden 但是有些时候会影响其他属性 必要的时候交替使用。

单⾏省略

white-space: nowrap; //先强制⼀⾏显⽰

overflow: hidden; // 溢出隐藏

text-overflow: ellipsis；//对象内⽂本溢出时显⽰省略标记

图片1.png

这个时候需要给元素设置一个固定宽度

多⾏⽂本省略

display: -webkit-box;

转化为⽼弹性盒

-webkit-box-orient: vertical;

排列⽅式为垂直

-webkit-line-clamp: 2;

图片6.png

和单行省略一样需要设置一个固定宽度

<a href="">
    <i></i>
    <p>问答</p>
    <span></span>
</a>

i{
  display:block;
  width: 28px;
  height: 28px;
  margin:0 auto;
  margin-top:10px;
  background-image:url(../img/雪碧图练习.png);
  background-size: 56px 182px;
  background-repeat:no-repeat;
}

图片5.png

不同的位置只需要对该元素设置不同的坐标

具体写法是：bakcground-size: x坐标 y坐标；

这里写到的坐标是该精灵图的 左上顶点的坐标点

坐标值 往下是负值 往右也是负值 请注意！

display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-content: space-between;