tag css技巧

標籤
貢獻19
65
05:44 PM · Nov 05 ,2025
heath_learning 頭像 http_wenwen 頭像 kestrel_task 頭像 gqkmiss 頭像 zeronofreya_5e391a8a48acc 頭像 smallhuifei 頭像 jsoncode 頭像 zhiyandexia 頭像 yangzw 頭像 senar 頭像 t_61122bcd63bc3 頭像 compose_hub 頭像

@css技巧 / 博客 RSS 訂閱

heath_learning 頭像

heath_learning - CSS BFC特性(塊級格式化上下文)

1、元素的BFC特性 BFC全稱為”Block Formartting Context”，中文為”塊級格式化上下文”。它是頁面中的一塊獨立的渲染環境，並且有一套渲染規則， 它決定了其子元素將如何定位，以及它和其他兄弟元素的關係和相互作用。 BFC佈局規則： 1）bfc內部的元素會在垂直方向，一個接一個地放置 2）盒子垂直方向的距離有margin決定，屬於同一個bfc的兩個相鄰元素的margi

css技巧 , bfc , Css , HTML

收藏 評論

compose_hub 頭像

compose_hub - CSS中的FC到BFC

本文首發國內開源代碼託管平台Gitee 文章地址： https://gitee.com/gooder4j/compose-hub/issues/I4U78Q 覺得不錯的話，你的star是對我最大的支持！ Formatting Context簡單理解，就是定義了佈局規則的一片區域。它的類型包括： Block Formatting Context，簡稱BFC Inl

佈局 , css技巧 , bfc , Css , 前端

收藏 評論

nulidexiaocongmang 頭像

MangoGoing - CSS 技術沉澱

基礎理論 元素的顯示與隱藏 根據不同的需求選擇隱藏方案 如果希望元素不可見，同時不佔據空間，輔助設備無法訪問，同時不渲染，使用script標籤隱藏 script type="text/html" img src="./img/55.png" / /script 獲取數據的方法使用 document.querySelector('script').innerHTML 如果希望元素不可

css技巧 , HTML , 前端

收藏 評論

user_nypdl4ki 頭像

逆風微笑的代碼狗 - 利用css構造邊框三角

繪製三角形 !DOCTYPE html html head meta charset="utf-8" title/title style type="text/css" .triangle_top, .triangle_bottom, .triangle_left, .triangle_right {

css技巧 , Css

收藏 評論

gqkmiss 頭像

月恆 - CSS 小技巧 —— CSS 實現 Tooltip 功能-鼠標 hover 之後出現彈層

CSS 小技巧 —— CSS 實現 Tooltip 功能-鼠標 hover 之後出現彈層 1. 兩個元素實現 !DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" title純 CSS 實現 Tooltip 功能-鼠標 hover 之後出現彈層/title style *{ padding: 0;

css3 , css技巧 , tooltip , 前端

收藏 評論

gqkmiss 頭像

月恆 - CSS 小技巧 —— CSS 實現 ... 的 loading 加載中動畫

CSS 小技巧 —— CSS 實現 ... 的 loading 加載中動畫 1. 前言 需求中想做出個這種效果，這個頁面又是一個單獨的 html 頁面，沒必要再單獨引入其他模塊了 就想着用 CSS 動畫來實現 2. 實現效果 3. 實現思路 3.1. 項目要求 ... 不能使所在的 dom 元素寬度變化，不然加個 . 變寬，少個點變窄，不好看 需要使用 animation 動畫的 infi

loading , css3 , css技巧 , Css , 前端

收藏 評論

bianchengsanmei 頭像

編程三昧 - 前端 CSS 變量簡介及基本使用方法

背景 複雜的網站都會有大量的CSS代碼，通常也會有許多重複的值。 舉個例子，同樣一個顏色值可能在成千上百個地方被使用到，如果這個值發生了變化，需要全局搜索並且一個一個替換，效率不高且容易出錯。 自定義屬性在某個地方存儲一個值，然後在其他許多地方引用它。另一個好處是語義化的標識。比如，--main-text-color 會比 #00ff00 更易理解，尤其是這個顏色值在其他上下文中也被使用到。 概

css3 , css技巧 , css變量var , Css , 前端

收藏 評論

dunizb 頭像

杭州程序員張張 - 使用CSS ::marker的自定義項目符號

現在，在使用 ul 或 ol 時自定義數字或項目符號的顏色，大小或類型很簡單。 感謝CSS ::marker，我們可以更改內容以及項目符號和數字的某些樣式。 瀏覽器兼容性 當Chromium 86發佈時，::marker 將在桌面和Android的Firefox、桌面Safari和iOS Safari以及基於Chromium的桌面和Android瀏覽器中得到支持。有關更新，請參見MDN的瀏覽器兼

css技巧 , Css , 前端

收藏 評論

lizeze 頭像

xx小枱燈 - 分享幾個css生成工具

Neumorphism/Soft UI generator Smooth Shadow generator Fancy Border Radius Generator Easing Gradients Data Viz Color Palette Generator *CSS Grid Generator *CSS Accordion Slider Gen

css技巧 , Css

收藏 評論

kestrel_task 頭像

微芒不朽 - 【CSS進階】使用CSS gradient製作絢麗漸變紋理背景效果

前言 一直對漸變背景這塊比較感興趣，但是因為每天加班實在太忙了，任務也比較多。所以就只能下班的時間研究漸變背景這方面的知識，一來滿足了自己的好奇心，二來可以更加了解這方面的知識。跟更多不斷學習的小夥伴們一起進步，一起汲取新的知識。不斷成長，不斷精進自己的知識。有想一起討論技術，一起成長的夥伴們，也可以加微信一起交流。各微信羣裏面，有很多前端領域的大佬，在他們身上學到了很多，今後也努力向他們看齊。不

css3 , css技巧 , Css , css3動畫 , 前端

收藏 評論

kestrel_task 頭像

微芒不朽 - 【CSS進階】巧用偽元素before和after製作絢麗效果

原創：叫我詹躲躲 來源：思否 鏈接：巧用偽元素before和after製作絢麗效果 所謂‘偽元素’，就是本身不存在的頁面元素，HTML代碼裏並沒有這樣的元素，但在頁面顯示時，你卻能看到這些本來不存在的元素髮揮着作用。本文主要探究偽元素beforce和after的常用使用場景。 CSS :before 選擇器 定義和説明 :before 選擇器向選定的元素前插入內容。

css3 , css技巧 , css選擇器 , Css , css3動畫

收藏 評論

huangruorumeng 頭像

恍若如夢 - 樣式篇 - CSS基礎總結

層疊樣式表 (Cascading Style Sheets，縮寫為 CSS），是一種 樣式表 語言，用來描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之類的 XML 分支語言）文檔的呈現。CSS 描述了在屏幕、紙質、音頻等其它媒體上的元素應該如何被渲染的問題。 CSS 是開放網絡的核心語言之一，由 W3C 規範 實現跨瀏覽器的標準化。CSS節省了大量的工作。 樣式可以

css3 , css技巧 , Css , HTML , 前端

收藏 評論

zeronofreya_5e391a8a48acc 頭像

zeronofreya - CSS用Mask挖掉Div的一部分

谷歌瀏覽器開發，不保證其他瀏覽器工作正常 挖孔用的SVG svg style="position: absolute; width: 0; height: 0;" viewBox="0 0 12 140" xmlns="http://www.w3.org/2000/svg" defs mask id="mask" path transform="t

css技巧

收藏 評論

zaoqidenianqingren_zhao 頭像

早起的年輕人 - CSS水平垂直居中佈局方案概述述

在前端開發中，通過CSS實現佈局容器的居中，也有諸多方法方式，當然也是CSS面試題中的經典面試題，在本文章中會系統的分析綜述 通過 Flexbox 佈局模塊 與 CSS Grid佈局模 實現容器的居中效果。 在傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性來實現基本佈局，包括本文章的居中排列。 ** 你可能需要

react , vue.js , css3 , css技巧 , HTML

收藏 評論

http_wenwen 頭像

波羅丁的菠蘿 - css實現二級菜單

不多廢話，先上預覽 https://codepen.io/Ritr/pen/W... 這一次還是使用input type="checkbox"的選中與否來實現展開、收起二級菜單的。 第一步：初始化 默認二級菜單的li高度為0 選擇一級菜單時，將二級菜單高度設置為20px 這樣設置是為了方便我們以後添加動畫效果 html ul class="menu" li class="mai

css技巧 , css選擇器 , Css

收藏 評論

t_61122bcd63bc3 頭像

T - CSS學習筆記

CSS學習筆記 1.嵌入方式 1）css嵌入到html的頭部的style標籤內 div style="background-color:lightcoral; color: #fff; width: 300px;" hello world /div 2）css嵌入到元素style屬性內 優點：css規則與HTML分離；可以複用 style #one, #two{ b

css3 , css技巧 , css選擇器 , Css

收藏 評論

http_wenwen 頭像

波羅丁的菠蘿 - CSS選擇器那點事

MDN參考鏈接 CSS 選擇器規定了 CSS 規則會應用到哪些元素上。 CSS選擇器分為以下四大類： - 基本選擇器 - 組合選擇器 - 偽類 - 偽元素 基本選擇器 Type（類型）選擇器 也可以稱之為元素選擇器，這種基本選擇器會選擇所有匹配給定元素名的元素。 語法：elename（元素名稱） 例子：span 將會選擇所有的 span 元素。 代碼： HTML: spanHere is a s

css3 , css技巧 , css選擇器 , Css

收藏 評論

senar 頭像

Senar - UnoCSS給了我一個不用tailwindcss的理由

相同的原由 前言 如果你沒有聽説過 tailwindcss 或者 unocss，請先 return 先去了解一下😝。 開發上：可能為你甚至你們的前端團隊節省很多寫樣式的時間，也能讓你或者你們的項目開發體驗有很大提升 生產上：你們的項目打出來的包體積中的樣式代碼佔比將突然驟降然後趨於不變。 書接上回 之前我寫過一篇文章給我一個你不用tailwindcss的理由！，極力推薦使用 tai

vue.js , css技巧 , uno , Css

收藏 評論

yangzw 頭像

JowayYoung - 靈活運用CSS開發技巧

作者：JowayYoung 倉庫：Github、CodePen 博客：官網、掘金、思否、知乎 公眾號：IQ前端 特別聲明：原創不易，未經授權不得轉載或抄襲，如需轉載可聯繫筆者授權 系列 靈活運用CSS開發技巧 請戳這裏，持續更新 靈活運用JS開發技巧 請戳這裏，持續更新 靈活運用PS切圖技巧 請戳這裏，持續更新 前言 何為技巧，意指表現在文學、工藝、體育等方

css3 , css技巧 , css選擇器 , Css , 前端

收藏 評論

heath_learning 頭像

heath_learning - css權重

1、什麼是css權重？css6大基礎選擇器 css權重指的是css6大基礎選擇符的優先級，優先級高的css樣式會覆蓋優先級底的css樣式，優先級越高説明權重越高，反之亦然。 css6大基礎選擇器： a）、id選擇器(#box{}) b）、類選擇器(.box{}) c）、屬性選擇器(a[href="http://www.xxx.com"]) d）、偽類和偽對象選擇器(:hoevr{}和::after

css3 , css技巧 , css選擇器 , css優先級 , Css

收藏 評論

zhiyandexia 頭像

夏哥 - css 記錄

1.設置icon圖標使用字體方式，接着需要icon圖標css類名前綴一致。 [class^="icon-"], [class*=" icon-"] {} ios 使用字體失效，在iconfont.css，將 font-family: 'font_family'; 修改為 @font-face { font-family: 'iconfont'; } 2.變形動畫 transfo

css3 , css技巧 , Css , css3動畫

收藏 評論

jsoncode 頭像

jsoncode - 純css實現一個帶箭頭陰影的手風琴動效

效果如圖： 可以移入展開。 特徵： 1，帶有箭頭 2，箭頭處帶有陰影 3，有交互操作 箭頭，可以用border來實現： width: 0; height: 0; border: 190px solid transparent; border-left: 60px solid transparent; 引用可用box-shadow實現，但是如果是貼合非規則圖形的陰影

css3 , css技巧 , filter , vue3 , box-shadow

收藏 評論

smallhuifei 頭像

smallStone - 使用flex佈局解決經典佈局中overflow必須設置高度才能滾動問題

本文旨在解決經典佈局方案中，左側/頂部/麪包屑/菜單欄收縮，主頁面無法跟隨變化，右側內容界面需要設置高度才能滾動問題。（主頁面內容全自動） 如下圖： 若要實現下圖所示，我們都會使用 “定位” 方式實現。當頂部高度變化，就需要我們調整內容高度。左側欄變化就需要調整右側寬度等。 如今: 我們可以使用flex方法實現這種佈局方案，且無需使用定位方式，所有佈局都是一邊調整，另一邊跟着一起變動，無需通過任

css3 , css技巧 , HTML

收藏 評論