web蓝桥杯真题：新鲜的蔬菜

最新推荐文章于 2024-09-20 20:46:20 发布

原创最新推荐文章于 2024-09-20 20:46:20 发布 · 510 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

博客介绍了前端的两个知识点。一是flex布局中align - self可控制子项在侧轴的排列方式，需写在子元素里；二是:nth - child(n)选择器，它能返回指定父元素下第n个特定子元素，而非子元素的子元素。

代码：

.box {
  display: flex;
}
#box1 {
  align-items: center;
  justify-content: center;
}

#box2 {
  justify-content: space-between;
}
#box2 .item:nth-child(2) {
  align-self: end;
}

#box3 {
  justify-content: space-between;
}
#box3 .item:nth-child(2) {
  align-self: center;
}
#box3 .item:nth-child(3) {
  align-self: end;
}

知识点：

1.flex布局

align-self控制子项自己在侧轴的排列方式（单个） //写在子元素里

2.:nth-child(n)

<span>
<div>1</div>
<div>2</div>
</span>
div:nth-child(n) //返回div父元素(span)下第n个div元素，！！而不是div的子元素