-
CSS Margin 塌陷
Margin Collapse 垂直方向上，两个相邻的块级元素（或者父子元素）的margin会重叠，取较大值作为最终生效的margin，若有负的Margin则取绝对值最大的，正负抵消后计算。 相邻块
2025-09-05, Views: 713 , Topics: CSS
-
CSS BFC 块级格式化上下文
BFC Block Formatting Context：独立的渲染区域，内部的块级元素会按照特定规则布局，且这个区域的内容与外部元素的布局完全隔离，不会相互影响。 触发条件 满足其一即可。 根元素
2025-09-04, Views: 706 , Topics: CSS
-
CSS 解决绝对布局没有在父容中定位而是在根节点定位问题
现象 根节点设置了flex: column布局，其中有一个子元素，在子元素中需要使用绝对布局，将子元素的子元素定位在右上角。 但使用了position: absolute子元素的子元素定位在了根节点
2025-09-03, Views: 751 , Topics: CSS
-
CSS float 与 position absolute 区别
相同点 float和position: absolute都会脱离文档流。 但是float脱离文档流的垂直排列规则。 float float元素脱离垂直流，但保留水平占位（宽度占位）。 对于文字、行内
2025-09-02, Views: 671 , Topics: CSS
-
CSS 清除浮动导致的影响
高度塌陷 当父元素的子元素浮动（所有子元素），父元素会因为没有内容支撑而高度塌陷 代码 可以看到父元素是没有高度的，页面上看不到背景色为红色的区域。 <div style="background-c
2025-09-01, Views: 698 , Topics: CSS
-
CSS 文字环绕图片效果
代码 使用float属性 <div style="background-color: blue;"> <span style="width: 100px; height: 40px;back
2025-08-31, Views: 543 , Topics: CSS
-
CSS 实现左右箭头图片
代码 通过border实现。 .btn { width: 20rpx; height: 20rpx; border-left-color: red; border-l
2025-08-30, Views: 525 , Topics: CSS
-
CSS flex gap 属性设置子元素间隙
gap gap属性设置在父元素样式上，表示flex布局中子元素之间的间隙。 左右两边的子元素是没有margin-left和margin-right的。 flex-direction: column上
2025-08-29, Views: 540 , Topics: CSS
-
CSS flex 布局子元素高度没有被撑开
示例代码 id=middle的子元素没有顶部对齐。 <div style="display: flex;align-items: center"> <div>123<br>123<br>12
2025-08-27, Views: 513 , Topics: CSS
-
CSS flex: 1 子元素占据父元素剩余空间
场景 row横向实现：左右两个图片，中间文字的布局。 column纵向实现：底部栏永远在屏最底下，即使高度不够时也在屏幕底部。（高度够时需滚动才展示） 代码 横向：中间文字使用flex: 1占据剩余
2025-08-26, Views: 530 , Topics: CSS
-
CSS 左右两边始终各占50%
场景 左右两边是两张产品图片，即使右边部分不可见，左边也只占屏幕宽度的50%，不铺满。 思路 右边加一个空的元素，包裹需要控制隐藏或显示的元素。 代码 主要代码：子元素设置flex: 1，且按需显示
2025-08-26, Views: 534 , Topics: CSS
-
CSS 实现部分图片在弹框外
需求 背景图片一半在弹框外。 实现 使用position: absolute绝对定位，设置top为负数即可。 .popup-content { display: flex; flex
2025-08-24, Views: 548 , Topics: CSS
-
CSS 设置背景透明色
半透明 使用rgba，设置alpha的值为0.5。 .bg { color: white; padding: 20px; background-color: rgba(0,
2025-08-24, Views: 569 , Topics: CSS
-
CSS 字体下划线 text-decoration 属性
代码 text-decoration设置为underline。 <div style="text-decoration: underline;">点击</div> text-underline
2025-08-23, Views: 544 , Topics: CSS
-
CSS box-sizing 属性
border-box 元素的width和height包含：内容区域、padding、border，但不包含margin。 给一个设置了width: 100px的元素加padding: 10px，元素
2025-08-21, Views: 519 , Topics: CSS
-
Vue TDesign Select 选择器自定义 Tag 标签
自定义 Tag 使用#valueDisplay="{ value }"这个slot插槽（valueDisplay的值固定为value）。 这样可以根据option中的item，自定义每一个Tag标签
-
抖音小程序 getUserProfile 和 getPhoneNumber 报错 api scope is not declared in the privacy agreement
错误信息 tt.getUserProfile failed getUserProfile:fail api scope is not declared in the privacy agreeme
2025-08-20, Views: 1003 , Topics: 小程序
-
uni-app 避坑指南
注意点 编译到小程序平台时，如果有使用到Vue的directive指令会编译不通过。 获取用户信息时button不是同步执行，导致小程序报错：不是由用户手势发起的授权 uni-popup默认的
2025-08-19, Views: 425 , Topics: uni-app
-
uni-app 条件编译不同平台编写不同代码
条件编译 条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。 使用方法 以#ifdef或#ifndef加%PLATFORM%开头，以#endif结尾。 #
2025-08-18, Views: 614 , Topics: uni-app
-
uni-app data-eventsync=true 属性
eventsync uni-app中为解决Vue3中部分小程序，button事件触发报错添加的属性。 示例代码 <view @click="getUserProfile" data-eventsyn
2025-08-17, Views: 436 , Topics: uni-app