EveryLike/pages/CSS/layout/width.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
  <view style="flex-grow: 1;">
    <view>
      <text>width: 250px</text>
      <view class="common" style="width: 250px;"></view>
    </view>

    <view style="width: 250px;">
      <text>width: 50%</text>
      <view class="common" style="width: 50%;"></view>
    </view>

    <view>
      <text>width: 250rpx</text>
      <view class="common" style="width: 250rpx;"></view>
    </view>

    <view class="container">
      <text>嵌套子元素测试 v-deep width: 150rpx</text>
      <child-width-uvue></child-width-uvue>
    </view>
  </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  import childWidthUvue from "./child-width.uvue";
  export default {
    components: {
      childWidthUvue
    }
  }
</script>

<style>
  .common {
    height: 250px;
    background-color: red;
  }

  .container ::v-deep .box {
    width: 150px;
    height: 150px;
  }
</style>