CSS:使用内边距时,解决宽随之改变问题

一、效果图

1、未调整padding的效果

2、加入padding

发现加入padding之后宽被撑开了

3、解决问题后

加入**box-sizing:border-box;**属性值解决了该问题

二、代码

1、wxml

html 复制代码
<view class="list_all flex flex-center">
  <view class="list_item">
    1
  </view>
</view>

2、wxss

css 复制代码
.list_all{
  margin-top:10px;
  width:100%;
}
.list_item{
  width:90%;
  padding:2%;
  box-sizing:border-box;
  background-color:white;
  box-shadow: 2px 2px 2px rgb(0,0,0,0.1);
}
.flex{
  display: flex;
}
.flex-center{
  justify-content:center;
  align-items: center;
}
相关推荐
前端小巷子1 分钟前
Vue 2 渲染链路剖析
前端·vue.js·面试
Mintopia22 分钟前
🧠 AI 本地自由之路:Ollama 教程指南
前端·javascript·aigc
Mintopia32 分钟前
🧠 从像素到现实:用 Three.js + Cesium 构建数字孪生系统
前端·javascript·three.js
xyphf_和派孔明1 小时前
关于Web前端安全防御CSRF攻防的几点考虑
前端·安全·csrf
stars1 小时前
数字人开发02--前端服务配置
前端·人工智能
懋学的前端攻城狮1 小时前
Next.js + TypeScript + Shadcn UI:构建高性能懒加载与无限滚动系统
前端·react.js·前端框架
宋辰月2 小时前
Vue2的进阶Vue3
前端·javascript·vue.js
酷飞飞3 小时前
C语言的复合类型、内存管理、综合案例
java·c语言·前端
姜太小白4 小时前
【前端】CSS Grid布局介绍及示例
前端·css
风继续吹..7 小时前
后台管理系统权限管理:前端实现详解
前端·vue