CSS是一门用来设置网页样式的语言，其中的父子元素关系是一个重要的概念。通过设置父元素和子元素的样式，我们可以实现网页中不同元素的布局和排列方式。下面是一些关于如何设置父子元素样式的示例。

/*设置父元素样式*/
.parent {
width: 500px;
height: 300px;
background-color: #ccc;
display: flex; /*设置父元素为弹性盒子*/
justify-content: center; /*水平居中对齐*/
align-items: center; /*垂直居中对齐*/
}
/*设置子元素样式*/
.child {
width: 100px;
height: 100px;
background-color: #f00;
border-radius: 50%; /*设置为圆形*/
margin: 10px; /*设置子元素与相邻元素之间的距离*/
}

上述代码展示了如何设置一个父元素和两个子元素的示例。父元素是一个弹性盒子，子元素按照默认的flex-direction: row方向排列，而justify-content和align-items属性可以控制元素的水平居中和垂直居中。子元素的margin属性可以设置子元素与相邻元素之间的距离。

除了flex布局，还可以使用CSS Grid布局来实现父子元素的布局。下面是一个使用CSS Grid布局的示例：

/*设置父元素样式*/
.parent {
display: grid; /*设置父元素为网格布局*/
grid-template-columns: repeat(3, 1fr); /*设置父元素为3列等宽*/
grid-template-rows: 100px 100px; /*设置父元素为2行高度为100px*/
gap: 10px; /*设置网格之间的距离*/
}
/*设置子元素样式*/
.child {
background-color: #f00;
border-radius: 50%; /*设置为圆形*/
}

上述代码展示了一个设置父元素为网格布局的示例，网格布局可以通过设置grid-template-columns和grid-template-rows属性来实现多行多列的排列方式。通过设置网格之间的距离可以调整子元素之间的间距。

总之，通过设置父子元素的样式，我们可以实现网页元素之间的布局和排列方式，更好地展现网页的设计和视觉效果。