设置了margin后宽度超出屏幕？？？？

  Row() {
      Text("盒子模型")// .width('100%')
        .size({ width: 'calc(100% - 20vp)' })
        .height(100)// .margin("20vp")
        .margin({
          left: "10vp",
          top: "30vp",
          right: "10vp",
          bottom: "30vp"
        })
        .padding("10vp")
        .border({ width: "10px", style: BorderStyle.Solid, color: "#0000ff" })
        .backgroundColor("#00ff00")
        .textAlign(TextAlign.Center)
        .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
          console.log('gxh', '旧的： ' + oldValue.width + ';' + oldValue.height)
          //100%  387.6923076923077
          //367.6923076923077
          console.log('gxh', '新的： ' + newValue.width + ';' + newValue.height)
        })
    }.backgroundColor("#ff0000")
    .width('100%')

    /**
     * 1、父布局 设置width('100%')，子组件设置width('100%') 并且设置margin左右边距，肯定会超出屏幕！！
     * 2、子组件不要设置margin，让父布局设置width('100%')，并且padding左右边距
     * 3、我偏要给子组件设置margin呢？？那么可以计算一下子组件的宽度  .size({ width: 'calc(100% - 20vp)' })
     *    把margin左右边距减去，不要直接用width('100%')了。但是这样会不会有性能问题？
     */