问题成因

在正常的文档流中，父元素的高度默认会根据其包含的子元素内容自动调整，以包裹住所有子元素。不过，当子元素设置了 float 属性（如 float: left 或 float: right）后，这些子元素会脱离正常的文档流，不再占据原有的空间。此时，父元素在计算自身高度时，会忽略这些浮动的子元素，进而导致父元素高度变为 0 或者只包含非浮动子元素的高度，这就是高度塌陷问题。

表现示例

分类: CSS标签: CSS

日期: 2025/7/26

用CSS实现点九图效果

.content{
  border-image-source: url(data:image/png;base64,...); // 图片路径
  border-image-slice: 10 10 10 10 fill; // 每个区域截取宽度为 10px
  border-image-width: 10px 10px 10px 10px; // 设置各个区域的图片宽度
  border-image-repeat: repeat; // 图片重复或拉伸模式
  border-image-outset: 10px 10px 10px 10px; // 
}

分类: CSS标签: CSS

日期: 2021/10/1

CSS: 自定义滚动条

&::-webkit-scrollbar-button{
    background-color: #074337;
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
    &:horizontal {
      &:start:decrement{ // 水平左侧(垂直上侧)“减”按钮
        display: block;
        background-image: url("~@/assets/images/icon/icon_sanjiao_left.png"); 
      }
      &:start:increment{ // 水平左侧(垂直上侧)“加”按钮
        display: none;
      }
      &:end:decrement{ // 水平右侧(垂直下侧)“减”按钮
        display: none;
      }
      &:end:increment{ // 水平右侧(垂直下侧“加”按钮
        display: block;
        background-image: url("~@/assets/images/icon/icon_sanjiao_right.png");
      }
    }

  }
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    height: 2rem;
    display: block;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    background   : #097b64;
    border-bottom: solid 2px #074337;
    border-top: solid 2px #074337;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    padding: 2px 0;
    background   : #074337;
  }

分类: CSS标签: CSS

日期: 2021/10/1

CSS: 外边距塌陷问题

现象：

现有两个div,上面的div设置margin-bottom:200px,下面的设置margin-top:100px,最终两个div距离却是200px。

原因：

当两个在标准流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，但只有上下外边距会发生塌陷。计算方式： 1. 两个块margin都为正，取其较大的一个 2. 两个块magin都为负，取其绝对值较大的一个 3. 一个块为负，一个块为正，取两个块margin之和

分类: CSS标签: CSS

日期: 2021/11/21

CSS实现垂直水平居中的七种方法

在CSS布局中，垂直水平居中是一个非常常见的需求，但也是让很多开发者头疼的问题。本文将介绍七种常用的CSS垂直水平居中方法，帮助您在不同场景下选择最合适的解决方案。

1. Flexbox布局（推荐）

Flexbox是最现代且强大的居中方法，兼容性良好，使用简单。

<div class="container">
  <div class="item">居中元素</div>
</div>

分类: CSS标签: CSS

日期: 2025/9/28

Less中使用calc()问题

height:calc(100% - 32px);

分类: CSS标签: CSS

日期: 2021/12/21

方案一：多列布局

Multiple-column layout 文档

实现步骤

设置父容器（content）的column-count用来指定列数，接着将子容器的img标签宽和高均设置为100%

示例

在线示例 样式（less）

分类: CSS标签: CSS

日期: 2022/6/29

Electron：绕过B站防盗链验证

原理:将头部referer字段修改为网站信任的白名单，比如：百度

import { app, BrowserWindow, shell, session } from 'electron'

const filter = {
    urls: ['*.hdslb.com/*']
  }
  session.defaultSession.webRequest.onBeforeSendHeaders(filter, (details, cb) => {
    console.log(details)
    details.requestHeaders['referer'] = 'https://www.baidu.com'
    let data = { requestHeaders: details.requestHeaders }
    cb(data)
  })

分类: Electron标签: CSS

日期: 2021/12/21