margin溢出(重疊)

?元素margin-top,導(dǎo)致?元素向下移動

解決?案

1.給?元素設(shè)置overflow: hidden;

2. 給?元素設(shè)置padding-top

3. 給?元素設(shè)置邊框border

多使用 overflow:hidden 但是有些時候會影響其他屬性 必要的時候交替使用。

單?省略

white-space: nowrap; //先強制??顯?

overflow: hidden; // 溢出隱藏

text-overflow: ellipsis；//對象內(nèi)?本溢出時顯?省略標(biāo)記

圖片1.png

這個時候需要給元素設(shè)置一個固定寬度

多??本省略

display: -webkit-box;

轉(zhuǎn)化為?彈性盒

-webkit-box-orient: vertical;

排列?式為垂直

-webkit-line-clamp: 2;

圖片6.png

和單行省略一樣需要設(shè)置一個固定寬度

<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/雪碧圖練習(xí).png);
  background-size: 56px 182px;
  background-repeat:no-repeat;
}

圖片5.png

不同的位置只需要對該元素設(shè)置不同的坐標(biāo)

具體寫法是：bakcground-size: x坐標(biāo) y坐標(biāo)；

這里寫到的坐標(biāo)是該精靈圖的 左上頂點的坐標(biāo)點

坐標(biāo)值 往下是負(fù)值 往右也是負(fù)值 請注意！

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