8.10html&css知识总结

1.超出定宽文本以省略号显示

前提：设置定宽

单行

//不给他换行
white-space : nowrap;
//超出隐藏
overflow:hidden;
//超出部分以省略号显示
text-overflow:ellipsis;

两行或多行

  .ellipsis-2 {
//超出部分隐藏
    overflow: hidden;
//超出文本以省略号显示
    text-overflow: ellipsis;

    display: -webkit-box;
//限制文本为两行
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

2.弹性容器的弹性盒子可以设置宽高

本身是行内元素的标签 例：a \ span \ i \  如果其父级设置了display:flex 则它们都可以设置宽高

注意：

只有其弹性容器的子级可以享受设置宽高的特权，其孙级重孙级不可以；

3.nth-child nth-of-type 区别

nth-child 是倒着找

他会先找box里的第三个div ，其次他是.items  所以他会找到第一个.items

因为上面还有两个div 所以要找到第三个.items  得用nth-child(5)

//.items是div标签 我想找到.items里面的第三个
.box .items:nth-child(3)
//此时box里有section上面还有两个div

nth-of-type

他会先找到box名为.items 的标签 其次再找到他（类名为item）的第三个

4.交集选择器 使用 

在类名(red)后添加一个类名(active)

给其添加与原有类名中更改的样式（类似于hover）

使用：red.active { } 两个类名同时存在时才生效

后续搭配js使用 谁需要更改样式就添加