-
CSS flex gap 属性设置子元素间隙
gap gap属性设置在父元素样式上，表示flex布局中子元素之间的间隙。 左右两边的子元素是没有margin-left和margin-right的。 flex-direction: column上
2025-08-29, Views: 11 , Topics: CSS
-
CSS flex 布局子元素高度没有被撑开
示例代码 id=middle的子元素没有顶部对齐。 <div style="display: flex;align-items: center"> <div>123<br>123<br>12
2025-08-27, Views: 20 , Topics: CSS
-
CSS flex: 1 子元素占据父元素剩余空间
场景 row横向实现：左右两个图片，中间文字的布局。 column纵向实现：底部栏永远在屏最底下，即使高度不够时也在屏幕底部。（高度够时需滚动才展示） 代码 横向：中间文字使用flex: 1占据剩余
2025-08-26, Views: 30 , Topics: CSS
-
CSS 左右两边始终各占50%
场景 左右两边是两张产品图片，即使右边部分不可见，左边也只占屏幕宽度的50%，不铺满。 思路 右边加一个空的元素，包裹需要控制隐藏或显示的元素。 代码 主要代码：子元素设置flex: 1，且按需显示
2025-08-26, Views: 36 , Topics: CSS
-
CSS 实现部分图片在弹框外
需求 背景图片一半在弹框外。 实现 使用position: absolute绝对定位，设置top为负数即可。 .popup-content { display: flex; flex
2025-08-24, Views: 43 , Topics: CSS
-
CSS 设置背景透明色
半透明 使用rgba，设置alpha的值为0.5。 .bg { color: white; padding: 20px; background-color: rgba(0,
2025-08-24, Views: 61 , Topics: CSS
-
CSS 字体下划线 text-decoration 属性
代码 text-decoration设置为underline。 <div style="text-decoration: underline;">点击</div> text-underline
2025-08-23, Views: 67 , Topics: CSS
-
CSS box-sizing 属性
border-box 元素的width和height包含：内容区域、padding、border，但不包含margin。 给一个设置了width: 100px的元素加padding: 10px，元素
2025-08-21, Views: 71 , Topics: CSS
-
uni-app button 自定义样式
代码 <template> <button class="auth-btn" hover-class="none" type="default" open-type="getPhoneNum
-
uni-app image 元素在 flex column 布局下宽度为 0 的问题
现象 在flex column布局中，image元素指定了width: 100%，但实际渲染时宽度变为0了。 去掉width: 100%，图片就有实际宽度了。 原因 在flex-direction:
-
uni-app CSS 内置变量：系统状态栏高度、NavigationBar 的高度、TabBar 的高度
变量 变量 描述 小程序 H5 --status-bar-height 系统状态栏高度 25px 0 --window-top 内容区域距离顶部的距离 0 NavigationBar
-
uni-app image 图片组件不同 mode
代码 默认mode为scaleToFill。 默认宽度320px、高度240px。 <image src="/static/a.jpg" mode="scaleToFill"></image> 常
-
CSS 网站信息标签放置于浏览器底部
需求 对于网站信息的元素块，当页面元素不足以填充满整个浏览器高度时，仍然需要置于底部。 flex 布局 使用flex-direction: column及fle
2024-02-11, Views: 887 , Topics: CSS
-
CSS 绝对定位
position 绝对定位使用absolute关键字，表示依赖于同级标签或父标签定位，元素本省脱离文档流不占据空间。 position: absolute; 定
2024-02-10, Views: 968 , Topics: CSS
-
支付宝小程序使用 CSS 自定义智能客服组件的页面布局
布局 <view class="contact-box"> <text>这是客服按钮</text> <cont
-
CSS flex 布局实现层叠效果
需求 图片一右边的上方叠加图片二。 实现 使用flex实现垂直方向的居中对齐。 使用absolute绝对布局，让图片二脱离文档流。 完整代码 <!DOCT
-
CSS 解决 HTML 大段文本没有换行问题
问题 有一大段说明文字，已经分段落和换行好了，但是页面上去没有换行，而且空格也被去掉了。 解决方法 使用white-space的pre-wrap样式。 whit
-
HTML 输入框 input 清空按钮
CSS input[type=search]::-webkit-search-cancel-button { -webkit-appearance: n
-
HTML 使用 CSS 移除 input datalist 下拉箭头
需求 input配置了datalist后，输入框尾部会带一个下拉箭头，需要去掉。 样式 [list]::-webkit-calendar-picker-indi
-
HTML 使用 CSS 改变文本选中颜色
代码 color：选中后的文字颜色。 background：背景色。 ::selection { background:#4CAF50; col