css 两边延伸

在网页设计中，我们经常会遇到需要让某个元素的背景色或背景图像延伸至页面的两侧的情况，这就需要用到CSS两边延伸的技巧。

.container {
    background: url(bg.jpg) repeat-x;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-left: 50vw;
    padding-right: 50vw;
}
    

在如上代码中，我们使用了负的margin和正的padding值达到了两边延伸的效果。其中，margin-left和margin-right的值为负的50vw，即视窗宽度的一半；padding-left和padding-right的值为正的50vw，即视窗宽度的一半。这样，容器的实际宽度就是视窗宽度的100%加上两侧各50vw的距离。

通过这种方式实现两边延伸的好处是，可以让元素的背景图像或背景色始终完整地展示在视窗中，而不会被裁剪掉。另外，由于使用了padding而不是直接修改宽度，所以也不会影响到元素内部的布局。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！