css收纳盒

1.grid 栅格布局

.main {
  width: 100%;
  height: 100%;
  display: grid;//栅格
  box-sizing: border-box;
  grid-template-columns: repeat(2, 1fr);//横向 分为2格
  grid-template-rows: repeat(2, 1fr);//竖向分为2格
  gap: 0.5rem;//每隔之间得间距
}}

2.CSS文本平衡排版 text-wrap:balance 浏览器将自动计算单词数并将它们平均分配到两行

加了text-wrap:balance之后的展示

3.ul > li子代选择(里面如果还是ol下面的li,是不会被继承样式的)

4.h1 + p邻接兄弟选择:是指紧挨着h1元素下面的第一个元素p

h1 + p {
  font-weight: bold;
  background-color: #333;
  color: #fff;
  padding: 0.5em;
}

5.关系选择器:想选中为<ul>的直接子元素的带有“a”类的列表项

ul > li[class="a"] {

}

文档参考## 子代关系选择器