[分享]css3包含元素

CSS3中的包含元素主要指的是通过一些属性的设置，让某个元素成为其他元素的包含器。这些属性可以让我们在布局和样式上更加灵活自由。.container { display: flex; / 设置为弹性布...

CSS3中的包含元素主要指的是通过一些属性的设置，让某个元素成为其他元素的包含器。这些属性可以让我们在布局和样式上更加灵活自由。

.container {
  display: flex; /* 设置为弹性布局 */
  flex-wrap: wrap; /* 换行 */
  justify-content: flex-start; /* 沿主轴左对齐 */
  align-items: center; /* 沿交叉轴居中 */
  gap: 10px; /* 设置元素之间的间隔 */
} 

上面的代码中，.container元素被设置为弹性布局，并且通过flex-wrap属性设置了换行。同时，通过justify-content和align-items属性分别设置了沿主轴左对齐和沿交叉轴居中。最后，使用gap属性设置元素之间的间隔。

.box {
  display: grid; /* 设置为网格布局 */
  grid-template-columns: repeat(3, 1fr); /* 列数为3，每一列占1fr */
  grid-template-rows: 100px 200px; /* 行高为100px和200px */
  grid-gap: 10px; /* 设置元素之间的间隔 */
} 

上面的代码中，.box元素被设置为网格布局，并且通过grid-template-columns和grid-template-rows属性分别设置了列数和行高。最后，使用grid-gap属性设置元素之间的间隔。

.parent {
  position: relative; /* 设置相对定位 */
}
.child {
  position: absolute; /* 设置绝对定位 */
  top: 0;
  left: 0;
} 

上面的代码中，.parent元素被设置为相对定位，而.child元素被设置为绝对定位。通过设置.top和.left属性，.child元素就可以相对于.parent元素的左上角进行定位。

总之，通过掌握CSS3中的包含元素，我们可以更加灵活自由地实现网页布局和样式设置。