微信小程序CSS-父盒子跟子盒子之间的缝隙问题

本文主要是介绍微信小程序CSS-父盒子跟子盒子之间的缝隙问题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

时间：2021-10-27

问题：
父子盒子结构中，父级盒子有border时，子盒子不能完全和父盒子边框重合，会有一个小的缝隙；

注：微信小程序真机环境下测试，父级盒子有border时出现的问题，无border时就没了该问题。

原因：
暂时不清楚。

解决方法：
border从父级盒子移至子盒子上，子盒子和之前一样正常排版。

其他：
搜索栏样式，后面的小放大镜和前面的搜索栏若原本是大盒子(容器盒子)嵌套小盒子(搜索input和放大镜)结构，且大盒子有border，若是出现小盒子无法和大盒子border完全重合，可以使用拼接方式，修改为同级结构，进行拼接。

截图：

<!-- 套餐1 -->
  <view wx:if="{{1}}" class="bs_bb pl_40 pr_40">
    <view class="font_000 fs_36 fw_b mb_30">选择套餐1</view>
    <view class="flex_r flex_aic flex_jcsb">
      <!-- 边框在父盒子 -->
      <view wx:for="{{member_combo}}" wx:key="member_combo"
        class="position_r mi_tc bs_bb h_220 br_10 of_h b_2s_dde6f2 {{selected_combo_id == item.id ? 'mi_tc_selected' : ''}}"
        bindtap="chooseMemberCombo" data-id="{{item.id}}" data-price="{{item.price}}">
        <view wx:if="{{item.mark && selected_combo_id == item.id}}"
          class="mi_mark position_a bbrr_10 font_fff fs_20 pl_10 pr_10 h_30 bg_ff5e5e">限时优惠
        </view>
        <view class="flex_c flex_aic flex_jcsb bs_bb h_p_100 w_p_100 pt_36 pb_30">
          <view class="mi_time font_333 fs_30">3天</view>
          <view class="mi_money fw_b">
            <text class="fs_30">￥</text>
            <text class="fs_44">2.99</text>
          </view>
          <view class="fs_22 font_95a0b9">每天仅需1.0元</view>
        </view>
      </view>
    </view>
  </view>

  <!-- 套餐2 -->
  <view wx:if="{{1}}" class="bs_bb pl_40 pr_40">
    <view class="font_000 fs_36 fw_b mb_30">选择套餐2</view>
    <view class="flex_r flex_aic flex_jcsb">
      <!-- 去除父级盒子边框-b_2s_dde6f2 -->
      <view wx:for="{{member_combo}}" wx:key="member_combo" class="position_r mi_tc bs_bb h_220 br_10 of_h"
        bindtap="chooseMemberCombo" data-id="{{item.id}}" data-price="{{item.price}}">
        <view wx:if="{{item.mark && selected_combo_id == item.id}}"
          class="mi_mark position_a bbrr_10 font_fff fs_20 pl_10 pr_10 h_30 bg_ff5e5e">限时优惠
        </view>
        <!-- 边框在子盒子 -->
        <view
          class="flex_c flex_aic flex_jcsb bs_bb h_p_100 w_p_100 pt_36 pb_30 br_10 of_h b_2s_dde6f2 {{selected_combo_id == item.id ? 'mi_tc_selected' : ''}}">
          <view class="mi_time font_333 fs_30">3天</view>
          <view class="mi_money fw_b">
            <text class="fs_30">￥</text>
            <text class="fs_44">2.99</text>
          </view>
          <view class="fs_22 font_95a0b9">每天仅需1.0元</view>
        </view>
      </view>
    </view>
  </view>

.mi_tc {
  width: 28%;
  box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.05);
}

.mi_tc_selected {
  border: 2rpx solid #FF5E5E;
}

.mi_tc_selected .mi_time {
  color: #FF5E5E;
}

.mi_tc_selected .mi_money {
  color: #FF5E5E;
}

.bs_bb {
  box-sizing: border-box;
}

.pl_40 {
  padding-left: 40rpx;
}

.pr_40 {
  padding-right: 40rpx;
}

.font_000 {
  color: #000;
}

.fs_36 {
  font-size: 36rpx;
}

.fw_b {
  font-weight: bold;
}

.mb_30 {
  margin-bottom: 30rpx;
}

.h_220 {
  height: 220rpx;
}

.br_10 {
  border-radius: 10rpx;
}

.of_h {
  overflow: hidden;
}

.bbrr_10 {
  border-bottom-right-radius: 10rpx;
}

.font_fff {
  color: #fff;
}

.fs_20 {
  font-size: 20rpx;
}

.pl_10 {
  padding-left: 10rpx;
}

.pr_10 {
  padding-right: 10rpx;
}

.h_30 {
  height: 30rpx;
}

.bg_ff5e5e {
  background-color: #ff5e5e;
}

.w_p_100 {
  /* width_percentage_100% */
  width: 100%;
}

.h_p_100 {
  /* height_percentage_100% */
  height: 100%;
}

.pt_36 {
  padding-top: 36rpx;
}

.pb_30 {
  padding-bottom: 30rpx;
}

.b_2s_dde6f2 {
  border: 2rpx solid #dde6f2;
}

.font_333 {
  color: #333;
}

.fs_30 {
  font-size: 30rpx;
}

.fs_44 {
  font-size: 44rpx;
}

.fs_22 {
  font-size: 22rpx;
}

.font_95a0b9 {
  color: #95a0b9;
}

.position_r {
  /* 相对定位 */
  position: relative;
}

.position_a {
  /* 绝对定位 */
  position: absolute;
}

.flex_c {
  display: flex !important;
  flex-direction: column;
}

.flex_aic {
  align-items: center;
}

.flex_jcc {
  justify-content: center;
}

.flex_jcsb {
  justify-content: space-between;
}

这篇关于微信小程序CSS-父盒子跟子盒子之间的缝隙问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！