• HOME
  • SEARCH
  • TOPICS
  • DATA

  • CSS BFC 块级格式化上下文

    BFC Block Formatting Context:独立的渲染区域,内部的块级元素会按照特定规则布局,且这个区域的内容与外部元素的布局完全隔离,不会相互影响。 触发条件 满足其一即可。 根元素

    2025-09-04, Views: 11 , Topics: CSS

  • CSS 解决绝对布局没有在父容中定位而是在根节点定位问题

    现象 根节点设置了flex: column布局,其中有一个子元素,在子元素中需要使用绝对布局,将子元素的子元素定位在右上角。 但使用了position: absolute子元素的子元素定位在了根节点

    2025-09-03, Views: 17 , Topics: CSS

  • CSS float 与 position absolute 区别

    相同点 float和position: absolute都会脱离文档流。 但是float脱离文档流的垂直排列规则。 float float元素脱离垂直流,但保留水平占位(宽度占位)。 对于文字、行内

    2025-09-02, Views: 22 , Topics: CSS

  • CSS 清除浮动导致的影响

    高度塌陷 当父元素的子元素浮动(所有子元素),父元素会因为没有内容支撑而高度塌陷 代码 可以看到父元素是没有高度的,页面上看不到背景色为红色的区域。 <div style="background-c

    2025-09-01, Views: 32 , Topics: CSS

  • CSS 文字环绕图片效果

    代码 使用float属性 <div style="background-color: blue;"> <span style="width: 100px; height: 40px;back

    2025-08-31, Views: 36 , Topics: CSS

  • CSS 实现左右箭头图片

    代码 通过border实现。 .btn { width: 20rpx; height: 20rpx; border-left-color: red; border-l

    2025-08-30, Views: 35 , Topics: CSS

  • CSS flex gap 属性设置子元素间隙

    gap gap属性设置在父元素样式上,表示flex布局中子元素之间的间隙。 左右两边的子元素是没有margin-left和margin-right的。 flex-direction: column上

    2025-08-29, Views: 37 , Topics: CSS

  • CSS flex 布局子元素高度没有被撑开

    示例代码 id=middle的子元素没有顶部对齐。 <div style="display: flex;align-items: center"> <div>123<br>123<br>12

    2025-08-27, Views: 52 , Topics: CSS

  • CSS flex: 1 子元素占据父元素剩余空间

    场景 row横向实现:左右两个图片,中间文字的布局。 column纵向实现:底部栏永远在屏最底下,即使高度不够时也在屏幕底部。(高度够时需滚动才展示) 代码 横向:中间文字使用flex: 1占据剩余

    2025-08-26, Views: 63 , Topics: CSS

  • CSS 左右两边始终各占50%

    场景 左右两边是两张产品图片,即使右边部分不可见,左边也只占屏幕宽度的50%,不铺满。 思路 右边加一个空的元素,包裹需要控制隐藏或显示的元素。 代码 主要代码:子元素设置flex: 1,且按需显示

    2025-08-26, Views: 57 , Topics: CSS

  • CSS 实现部分图片在弹框外

    需求 背景图片一半在弹框外。 实现 使用position: absolute绝对定位,设置top为负数即可。 .popup-content { display: flex; flex

    2025-08-24, Views: 63 , Topics: CSS

  • CSS 设置背景透明色

    半透明 使用rgba,设置alpha的值为0.5。 .bg { color: white; padding: 20px; background-color: rgba(0,

    2025-08-24, Views: 80 , Topics: CSS

  • CSS 字体下划线 text-decoration 属性

    代码 text-decoration设置为underline。 <div style="text-decoration: underline;">点击</div> text-underline

    2025-08-23, Views: 83 , Topics: CSS

  • CSS box-sizing 属性

    border-box 元素的width和height包含:内容区域、padding、border,但不包含margin。 给一个设置了width: 100px的元素加padding: 10px,元素

    2025-08-21, Views: 90 , Topics: CSS

  • uni-app button 自定义样式

    代码 <template> <button class="auth-btn" hover-class="none" type="default" open-type="getPhoneNum

    2025-08-15, Views: 135 , Topics: uni-app CSS

  • uni-app image 元素在 flex column 布局下宽度为 0 的问题

    现象 在flex column布局中,image元素指定了width: 100%,但实际渲染时宽度变为0了。 去掉width: 100%,图片就有实际宽度了。 原因 在flex-direction:

    2025-08-10, Views: 132 , Topics: uni-app CSS

  • uni-app CSS 内置变量:系统状态栏高度、NavigationBar 的高度、TabBar 的高度

    变量 变量 描述 小程序 H5 --status-bar-height 系统状态栏高度 25px 0 --window-top 内容区域距离顶部的距离 0 NavigationBar

    2025-08-07, Views: 271 , Topics: uni-app CSS

  • uni-app image 图片组件不同 mode

    代码 默认mode为scaleToFill。 默认宽度320px、高度240px。 <image src="/static/a.jpg" mode="scaleToFill"></image> 常

    2025-08-02, Views: 244 , Topics: uni-app CSS

  • CSS 网站信息标签放置于浏览器底部

    需求 对于网站信息的元素块,当页面元素不足以填充满整个浏览器高度时,仍然需要置于底部。 flex 布局 使用flex-direction: column及fle

    2024-02-11, Views: 899 , Topics: CSS

  • CSS 绝对定位

    position 绝对定位使用absolute关键字,表示依赖于同级标签或父标签定位,元素本省脱离文档流不占据空间。 position: absolute; 定

    2024-02-10, Views: 977 , Topics: CSS

  • Prev
  • 1
  • 2
  • Next Last

©2025 沪ICP备18012661号-1 阿里云

Messages Sitemap GitHub