CSS中的余下百分是指将剩下的空间按百分比分配给元素。例如，在一个包含两个元素的父容器中，第一个元素已经设置了宽度为50%，那么第二个元素如果想占用剩下的空间，就可以使用余下百分来实现。

.parent {
width: 500px;
}
.left {
width: 50%;
float: left;
background-color: red;
}
.right {
width: calc(100% - 50%); /*使用余下百分*/
float: left;
background-color: green;
}

上述代码中，左侧元素已经占用了50%的宽度，即250px。右侧元素使用余下百分来计算宽度，即100%减去左侧元素的宽度，也就是250px，它的宽度也为250px。这样，两个元素横向排列，就占满了整个容器的宽度。

除了在float布局中使用余下百分，还可以在flex布局和grid布局中使用。

/*flex布局*/
.parent {
display: flex;
}
.left {
width: 50%;
background-color: red;
}
.right {
flex: 1; /*使用余下百分*/
background-color: green;
}
/*grid布局*/
.parent {
display: grid;
grid-template-columns: 50% calc(100% - 50%); /*使用余下百分*/
}
.left {
background-color: red;
}
.right {
background-color: green;
}

在flex布局中，通过将右侧元素的flex属性设置为1，就可以让它占据剩余空间。在grid布局中，可以使用grid-template-columns属性，将左侧元素设为50%宽度，右侧元素就可以使用calc()函数来计算余下的宽度。

总之，在页面布局中，余下百分是一种非常实用的技巧，可以帮助我们实现更加灵活、多样化的布局效果。