[分享]css两侧自动撑大

CSS中能够自动撑大两侧的方式主要有两种方法，分别是利用margin和利用transform。下面将详细介绍这两种方法。一、利用margin实现两侧自动撑大.box{ width:200px; hei...

CSS中能够自动撑大两侧的方式主要有两种方法，分别是利用margin和利用transform。下面将详细介绍这两种方法。

一、利用margin实现两侧自动撑大

.box{
   width:200px;
   height:100px;
   margin:0 50px;
} 

在上述代码中，设置了一个容器box，宽度为200px，高度为100px，然后利用margin设置了左右两侧各为50px的边距，这样就实现了两侧自动撑大的效果。

二、利用transform实现两侧自动撑大

.box{
   width:200px;
   height:100px;
   position:relative;
}
.box::before{
   content:"";
   display:block;
   position:absolute;
   top:0;
   bottom:0;
   left:-50px;
   width:50px;
   background:#000;
   transform:translateX(-100%);
}
.box::after{
   content:"";
   display:block;
   position:absolute;
   top:0;
   bottom:0;
   right:-50px;
   width:50px;
   background:#000;
   transform:translateX(100%);
} 

在上述代码中，利用伪元素:before和:after在容器box的左右两侧创建了两个块，然后利用position:absolute将它们定位在了容器box的左右两侧，利用transform:translateX实现了两侧块的自动撑大效果。

以上就是CSS中实现两侧自动撑大的两种方法，大家可以根据自己的实际需求选择其中的一种方法来实现。同时，为了提高代码的可读性和可维护性，建议大家在项目中采用前者方法。