随笔分类 - 前端 / CSS
摘要：.tab-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; .custom-scroll(); } .wrap { min-height: 100%; .a { /* ... *
阅读全文
摘要：目标效果 实现 <div class="pop triangle-border">Hello</div> /* 气泡框类*/ .pop { ... } /* 气泡尖角伪元素*/ .triangle-border:before { content: ''; position: absolute; to
阅读全文
摘要：在 body 标签上加，以下的 style: filter: invert(80%); // 色弱模式 filter: grayscale(1); // 灰色模式
阅读全文
摘要：一、Demo <!-- 补录身高与体重 --> <script lang="ts" setup> import { ref } from 'vue'; const isShow = ref(true); const height = ref(); const weight = ref(); </sc
阅读全文
摘要：原始状态 <html> <head> <meta charset="utf-8"> <style> #main { width:300px; height:300px; border:1px solid black; } .a1, .a3 { height: 50px } .a2 { height:
阅读全文
摘要：在网页布局中，理解如何控制元素的位置是至关重要的。脱离文档流是其中一种常用的技术，能够实现更加灵活和复杂的布局。本文将介绍几种常见的 CSS 脱离文档流的方法，并探讨它们的应用场景和优缺点。 1. 使用 position 属性 1.1 position: absolute 当元素设置为 positi
阅读全文
摘要：什么是媒体查询 @media ？ 概念：为不同尺寸的屏幕设定不同的CSS样式 示例： @media screen and (min-device-width:100px) and (max-device-width:300px) { #div0 {...} } @media screen and (
阅读全文
