css3 宽度100%-30px

CSS3 中的宽度设定是一个重要的属性，常用的方法是将宽度设定为百分比。当我们需要给一个元素设定宽度为100%的时候，常常需要注意到边框的宽度。如果不注意，元素会自动增加横向滚动条。

/* 添加边框 */.element{
      width: 100%;
      border: 1px solid #000;
}

为了避免出现滚动条，我们可以使用CSS3的calc()函数计算元素的宽度。比如我们需要让一个宽度为100%的元素，左右两侧各有30px的间隔：

.element{
      width: calc(100% - 60px);
      margin: 0 30px;
      box-sizing: border-box;
}
    

这里涉及到了box-sizing属性，设定为border-box可以让元素的实际宽度包含了边框的宽度。

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