css - 收藏集 - 掘金

時間 2019-11-21

標籤 css 收藏欄目 CSS 简体版

原文原文鏈接

CSS 絕對底部 - 前端 - 掘金
來自國外的設計達人，純CSS，能夠實現: 當正文內容不多時，底部位於窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部佈局方案。不知道他有沒有去申請專利:)<!DOCTYPE html> &l...javascript

CSS 自定義屬性 — 使用篇 - 前端 - 掘金
譯者注：抱歉帶來欠佳的閱讀體驗。使用文本代碼沒法成功發佈文章，因此本篇中的代碼暫時所有使用的是圖片。推薦你們閱讀公衆號版本，公衆號版本，公衆號版本！待譯者聯繫到知乎專欄工做人員後再嘗試修改本文。使用篇的翻譯來自兩篇文章，原文分別是 ...css

CSS3 之 3D 動畫製做 - 前端 - 掘金
css3的3d起步要玩轉css3的3d，就必須瞭解幾個詞彙，即是透視(perspective)、旋轉(rotate)和移動(translate)。透視便是以現實的視角來看屏幕上的2D事物，從而展示3D的效果。旋轉則再也不是2D平面上的旋轉，而是三維座標系的旋轉...html

爲元素添加邊框，你有多少種好辦法？ - 掘金
騰訊雲技術社區-掘金主頁持續爲你們呈現雲計算技術文章，歡迎你們關注！做者：莫卓穎背景相信你們在作項目的過程當中會常常遇到這樣的一個需求，鼠標hover到某個元素的時候爲這個元素添加邊框，這個簡單的需求僅需注意添加邊框後不會對原有的位置形成佈局的影響從...前端

CSS 命名方式 --BEM - 前端 - 掘金
原文地址：https://github.com/zhongxia24... 1、背景挺早就據說過BEM了，也大概的知道怎麼用，可是具體 BEM 指啥，具體有啥要求，還不是很清楚，而後今天就學習了下。 2、BEM（Block，Elem...vue

16種方法實現水平居中垂直居中 - 掘金
熟悉水平居中和垂直居中的方法, 不爲別的, 就爲用的時候可以信手拈來. 下面直接步入正題.原文：16種方法實現水平居中垂直居中水平居中 1) 如果行內元素, 給其父元素設置 text-align:center,便可實現行內元素水平居中. 2) 如果塊級元素,...html5

CSS 技巧（二）：形狀 - 前端 - 掘金
形狀本章代碼比較多，能夠訪問倉庫獲取源代碼。 1. 自適應的橢圓背景知識：border-radius屬性的基本用法使用b...java

理解 CSS 命名規範 --BEM - 前端 - 掘金
理解CSS命名規範--BEM 2017-04-05 最近在寫博客主題的時候發現一個很嚴重的問題，因爲css的命名並非很規範，致使本身在後期修改的時候非常頭疼，有些樣式須要在瀏覽器中打開開發者工具去找，非常無奈。因此決定在寫完主題以後...react

5 個技巧避免沒必要要的瀏覽器兼容性問題 - 掘金
本文做者：John Howard 編譯：鬍子大哈翻譯原文：http://huziketang.com/blog/po... 英文鏈接：5 Tricks to Avoid Cro...jquery

CSS 技巧（三）：視覺效果 - 前端 - 掘金
《css揭祕》學習筆記系列，記錄和分享各類實用技巧，共同進步。源代碼可訪問倉庫地址視覺效果 1. 單側投影 1.1 單側投影 ...css3

詳解 CSS 七種三欄佈局技巧 - 前端 - 掘金
三欄佈局，顧名思義就是兩邊固定，中間自適應。三欄佈局在開發十分常見，那麼什麼是三欄佈局？好比我打開某東的首頁：映入眼簾的就是一個常見的三欄佈局：即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。下面圍繞的這樣的目的，即左右...

CSS三欄佈局的四種方法 - 掘金
前言總括：無論是三欄佈局仍是兩欄佈局都是咱們在平時項目裏常用的，也許你不知道什麼事三欄佈局什麼是兩欄佈局但實際已經在用，或許你知道三欄佈局的一種或兩種方法，但實際操做中也只會依賴那某一種方法，本文具體的介紹了三欄佈局的四種方法，並介紹了它的使用場景。 ...

有效解決 css sprite 圖片使用 rem 單位邊角缺失的問題 - 前端 - 掘金
原由在移動端使用 rem 佈局時 sprite 圖片也須要用 rem 單位。但因爲瀏覽器對小數單位精度解析的差別，在不一樣設備上一些圖片看起來會缺了一點點，或者多了一點點.....

談談一些有趣的 CSS 題目（十四）-- 純 CSS 方式實現 CSS 動畫的暫停與播放！ - 前端 - 掘金
開本系列，談談一些有趣的 CSS 題目，題目類型天馬行空，想到什麼說什麼，不只爲了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。解題不考慮兼容性，題目天馬行空，想到什麼說什麼，若是解題中有你感受到生僻的 CSS 屬性，趕忙去...

平時本身項目中用到的 CSS - 掘金
css有些屬性容易忘記，半天不寫就要去查api，有時候api還很差使，因而仍是記下來之後方便用，後續會慢慢補充進來的。 Github: https://github.com/asd0102433...博客長期更新，喜歡的朋友star一下 outline...

使用 css 3 製做長投影 Long Shadow - 前端 - 掘金
在flat design(扁平化的設計)中，Long Shadow （長投影）被看着屢試不爽的設計技能。好比下面這張，很是經典的長投影設計: 攝影師選擇長投影一般是給圖片帶來戲劇效...

flex.css快速入門，極速佈局 - 掘金
什麼是flex.css? css3 flex 佈局相信不少人已經據說過甚至已經在開發中使用過它，可是我想咱們都會有一個共同的經歷，面對它的各類版本，各類坑，傻傻的分不清楚，flex.css就是對flex佈局的一種封裝，經過簡潔的屬性設置就能使得它完美的運行在移...

web 前端之 base.css - 前端 - 掘金
意義統一各個瀏覽器差別、統一團隊開發起始標準、彌補瀏覽器的「缺點」、提供頻繁使用的原子類名。 ...

CSS 五種方式實現 Footer 置底 - 前端 - 掘金
頁腳置底（Sticky footer）就是讓網頁的footer部分始終在瀏覽器窗口的底部。當網頁內容足夠長以致超出瀏覽器可視高度時，頁腳會隨着內容被推到網頁底部；但若是網頁內容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。 ...

你必須記住的 30 個 CSS 選擇器 - 前端 - 掘金
So you learned the base id, class, and descendant selectors—and then called it a day? If so, you're missing out on an enormous lev...

用CSS3來製做倒影（box-reflect） - 掘金
有一句話說的好：「橫當作嶺側成峯，遠近高低各不一樣」，有些時候，咱們須要從不一樣的角度去欣賞mm，以下圖：在早期，要實現這種效果，咱們只能乖乖的找設計去製做，而後在頁面上插入一張圖片，可是隨着CSS3的出現，咱們能夠純代碼實現，如何實現呢？就是經過CSS3的bo...

Flex 佈局應用 - 掘金
CSS3爲咱們提供了一種可伸縮的靈活的web頁面佈局方式-flexbox佈局，它具備很強大的功能，能夠很輕鬆實現不少複雜佈局。然而Flex屬性較多，不便於記憶，而在項目中，佈局使用頻繁，那麼能夠將flex抽離爲一個佈局工具類，簡化使用方式，快速應用於項目，減小...

深刻新版 BS4 源碼探索 flex 和工程化 sass 奧祕 - 前端 - 掘金
你可能已經據說了一個「大新聞」：Bootstrap4 合併了代號爲#21389的PR，宣佈放棄支持IE9，並默認使用flexbox彈性盒模型佈局。這標誌着：1）前端開發全面步入「現代瀏覽器」的時代進一步來臨；2）樣式處理也再一次面向將來，擁抱更加靈活的彈性盒模...

一勞永逸的搞定 flex 佈局 - 掘金
尋根溯源話佈局一切都始於這樣一個問題：怎樣經過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不禁得感受眼前一亮，瓜熟蒂落的聯想到 Word 文檔排版中用到的的左對齊、右對齊和居中對齊，然而很快就失望的發現...

16種方法實現水平居中垂直居中 - 掘金
熟悉水平居中和垂直居中的方法, 不爲別的, 就爲用的時候可以信手拈來. 下面直接步入正題.原文：16種方法實現水平居中垂直居中水平居中 1) 如果行內元素, 給其父元素設置 text-align:center,便可實現行內元素水平居中. 2) 如果塊級元素,...

對比學習 sass 和 stylus 的經常使用功能 - 前端 - 掘金
在衆多的css預處理器語言中，sass和stylus算是十分優秀的兩個。本文主要針對二者的經常使用功能作個簡單的對比分析。在對比中瞭解兩者的差別，同時幫助你們更好的掌握這兩種預處理語言。本文涉及到的sass部分，均來自於阮一峯老師的 ...

彈性盒模型Flex指南 - 掘金
Web layout 是Web UI中的基礎架構, 重要性不言而喻. 傳統的盒模型, 藉助display, position, float 屬性應對普通佈局遊刃有餘, 但針對複雜的或自適應佈局, 經常捉襟見肘. 好比垂直居中, 就是一個老大難的問題, 藉助fl...

CSS: 經常使用的元素居中方法 - 前端 - 掘金
平常工做中經常會遇到元素居中的需求，一般塊級元素的水平居中只需左右margin設爲auto便可。而行間元素的居中則是由父級設置行高(等於父級高度)和 text-align(center)實現。可是若是要求是塊級元素水平垂直居中呢？本文總結了一些經常使用的元素水...

Sticky Footer，完美的絕對底部 - 前端 - 掘金
寫在前面作過網頁開發的同窗想必都遇到過這樣尷尬的排版問題：在主體內容不足夠多或者未徹底加載出來以前，就會致使出現（圖一）的這種狀況，緣由是由於沒有足夠的垂直空間使得頁腳推到瀏覽器窗口最底部。可是，咱們指望的效果是頁腳應該一...

走進網頁虛擬現實 WebVR - 掘金
最近幾年，虛擬現實VR的概念火了一把，各類VR概念的遊戲、設備、視頻受到人們的普遍關注。筆者在逛商場的時候也常常會看到有VR設備體驗的地方讓遊人體驗一把，各類酷炫的頭盔和酷炫的設備着實抓人眼球。可是做爲一個前端工做者，咱們確定也但願在咱們的網頁裏也能看到這麼酷...

CSS 技巧（一）：背景與邊框 - 前端 - 掘金
該系列爲《css揭祕》讀書筆記，概括主要知識點，經過實戰技巧深刻css屬性，加以鞏固。背景與邊框 1.半透明邊框背景知識：rgba/hsla，在rgb/hsl的基礎上增長了Alpha通道,用於設置顏色的不透明度（就是能透過多...

(譯) 編寫整潔 CSS 代碼的黃金法則 - 掘金
原文地址：Golden Guidelines for Writing Clean CSS 原文做者：本文已獲做者 Tiffany Brown 受權譯文出自：掘金翻譯計劃譯者：reid3290 校對者：weapon-xx，bambooom 編寫整潔 C...

Flex 佈局學習筆記 - 前端 - 掘金
Flex 佈局，也稱爲彈性佈局，是爲了適應不一樣的屏幕尺寸和不一樣的設備類型二提出的一種佈局方式。基本概念 ...

黑科技：CSS 定製多行省略 - 前端 - 掘金
什麼是多行省略？當字數多到必定程度就顯示省略號點點點。最初只是簡單的點點點，以後花樣愈來愈多，點點點加下箭頭，點點點加更多，點點點加更多加箭頭...。多行省略就是大段文字後面的花式點點點。同行這麼作： ...

(譯)Gif 在 web 上的優化 - 前端 - 掘金
原文地址： https://bitsofco.de/optimisin... @ireaderinokun 和不少人同樣，我喜歡在本身的站點用gif。能夠很是好的突出某些功能。好比下面模仿 itunes的輪播 ...

瀏覽器亞像素渲染與小數位的取捨 - 騰訊 ISUX - 前端 - 掘金
在響應式項目中，百分比的數值的應用愈來愈多，好比柵格化佈局、背景定位、內邊距等。以往對於這種數值，咱們大都是直接採用計算器計算出來的數值。但這種數值有時會很長，特別是除不盡的數值如23.33333333%。數據不美觀不說，關鍵對於這種小數位的位數應該如何取捨，...

「前端」rem 縮放方案 flexible-js 兼容 375px 方案的思路 - 掘金
本文來自尚妝前端團隊南洋發表於尚妝github博客，歡迎訂閱。移動端H5頁面rem縮放方案flexible.js兼容375px方案的思路參考：移動端高清、多屏適配方案 viewport-and-flexible.js flexible.js git...

CSS hack 合集 - 前端 - 掘金
原本已經拋棄IE6|7|8了，但是最近發現要考慮IE兼容性的網站仍是有很多的，因此這兩天瞭解了一下CSS HACK，在這裏簡單地總結一下！一、何爲HACK？簡單的說，HACK就是隻有特定瀏覽器才能識別這段hack代碼。Hack也能夠說是讓前端最爲頭疼...

沒那麼難，談 CSS 的設計模式 - 前端 - 掘金
什麼是設計模式？曾有人調侃，設計模式是工程師用於跟別人顯擺的，顯得高大上；也曾有人這麼說，不是設計模式沒用，是你尚未到能懂它，會用它的時候。先來看一下比較官方的解釋：」設計模式（Design pattern）是一套被反覆使用、多數人知曉的、通過分類的、代...

CSS3 佈局利器 Flex 詳解 - 前端 - 掘金
傳統的網頁佈局基於盒裝模型，使用display，position，float屬性來達成各類佈局。對於一些特殊的佈局使用這些來實現不是很方便，好比垂直居中。Flex應運而生，它能夠簡便、完整、響應式地實現各類頁面佈局。Chrome 21，FF22，IE 10，S...

flex 佈局基礎 - 閱讀 - 掘金
佈局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊佈局很是不方便，好比，垂直居中就不容易實現。以前的博客中也利用這一解決方案解決過居中佈局等等問題。詳見css--佈局[1]和css--全屏布...

Flex 佈局關於內容均分的那些坑 - 前端 - 掘金
DDFE 實戰經驗...

GitBook《擁抱將來的 CSS 佈局方式：flex 與 grid 佈局》全教程 - 前端 - 掘金
本系列文章爲對CSS中flex佈局與grid佈局的詳細介紹，已在GitHub同步更新，如您在閱讀過程當中發現描述有誤或錯別字的狀況，您能夠向本項目提出issus或Pull Request。本系列文章爲我在深刻研究CSS的佈局方式的過程當中的一些總結。主要是對於C...

Flex 佈局新舊混合寫法詳解（兼容微信） - 前端 - 掘金
flex是個很是好用的屬性，若是說有什麼能夠徹底代替 float 和 position ，那麼確定是非它莫屬了（雖然如今還有不少不支持flex 的瀏覽器）。然而在移動開發中，原本絕大多數瀏覽器（包括安卓2.3以上的自帶瀏覽器）都支持的屬性，恰恰有個例外，就是國...

移動端 flex 佈局神器，兼容微信，UC，webview 等移動端主流瀏覽器，支持 react，vue，angular - 前端 - 掘金
download git clone https://github.com/lzxb/flex.... npm npm install flex.css --save 爲何須要flex.css? 在移動端開發中，並非全部的瀏覽器，webview...

前端切圖神器 avocode - 前端 - 掘金
安裝avocode 前端的基礎工做就是把設計師的設計稿還原成前端頁面，因此切圖是做爲一個前端的基本技能。殺敵要有趁手的兵器，而前端通常都是用photoshop,可是這個兵器很是笨重，可能當你笨拙的揮動的它時，敵人已經揮刀到你的頸部了。畢...

CSS 技巧：使你的 CSS 更加專業 - 前端 - 掘金
一個幫你提高 CSS 技巧的收藏集。對於其餘收藏集合能夠查看 @sindresorhus 建立的收藏集合 Awesome Lists. 目錄專業技巧支...

SVG 新司機開車指南 - 前端 - 掘金
TL,TR 確保你們一小時內能夠開車上路..... 來不及解釋了，快學車..... SVG其相關特性遠比想象中要強，本文首先介紹下SVG的相關定義、優缺點和Demo，接下來會介紹它的...

(譯)CSS Top 10 Articles for the Past Year (v.2017) - 前端 - 掘金
在過去一年裏，咱們對近11000篇CSS3的文章進行了整理，同時從中挑選出能夠幫助你規劃2017年web事業發展前十的內容（0.09%的機率）。這份CSS列表包含了各類話題，例如：REM，架構，網格，Element Querise，display，Backg...

騰訊 AlloyTeam 正式發佈 Canvas 魔幻線條 - curvejs - 掘金
寫在前面 curvejs 中文讀["克js"]，是騰訊AlloyTeam打造的一款魔幻線條框架，讓線條成爲一名優秀的舞者，讓線條們成爲優秀的舞團，HTML5 Canvas就是舞臺。官網：https://alloyteam.github....

前端魔法堂：解祕 FOUC - 前端 - 掘金
前言對於問題多多的IE678，FOUC(flash of unstyled content)——瀏覽器樣式閃爍是一個不可忽視的話題，但對於ever green的瀏覽器就不用理會了嗎？下面嘗試較全面地解密FOUC。到底什麼是FOUC？頁面加載解析時，頁...

有趣的 6 種圖片灰度轉換算法 - 前端 - 掘金
前言黑白照片的時代雖然已通過去，但如今看到之前的照片，是否是有一種回到過去的感受，很cool有木有~ 看完這篇文章，就能夠把彩色照片變成各類各樣的黑白的照片啦。本文完整的在線例子圖片灰度算法例子，例子的圖片有點多，可能有些慢。例子的源碼位於blog/de...

文本動畫, 幾行代碼頁面效果瞬間就提高了 - 前端 - 掘金
animate-text 文字動畫和數字動畫 animate text 查看DEMO...

內容滾動條和子 div 高度自適應 - 前端 - 掘金
寫在前面：老套路有圖有真相，這才叫作分享。本文內容是：一個div裏面，兩個子div高度自適應（平分父div的高度）和元素內容過多的時候，根據需求出現高度滾動條或者寬度滾動條。先放最終效果（在下面會有demo代碼。）： ...

[設計文章：都說是 2016 年國外最火 55 套 PS 實用教程

設計 - 掘金](https://juejin.im/entry/58b6d...
今夜，西元2017年的第一天，又是一個365天的日夜輪迴，成長有所得，生活有所福，時間有所守，工做有所進，慢條斯理即使如樹懶也是一年，風馳電掣就算是天速星神行太保戴宗，一年也終是一年。PS小公舉，仍是阿隨君電腦中打開率最高的軟件之一，這一年，精進有無，愛有無，...

解決 Chrome 中 input 自動填充時會強行設置背景色的問題 - 前端 - 掘金
方法1：box-shadow 方法2：animation...

淺析 js 實現網頁截圖的兩種方式 - 前端 - 掘金
Web端的截圖(生成圖片)並不算是個高頻的需求，資料天然也不算多，查來查去，也不過Canvas 和 SVG兩種實現方案，原理大概類似，都非真正義上的截圖而是把DOM轉爲圖片，然而實現方式卻大相徑庭。 Canvas 實現 ...

(譯) 經過裝飾器來讓你的代碼更整潔 - 前端 - 掘金
原文: Make your Code Cleaner with Decorators ...

前端必備 HTTP 技能之 WebSocket 協議詳解 - 前端 - 掘金
WebSocket是一個計算機通訊協議，經過一個TCP鏈接提供全雙工的通訊頻道。2011年IETF在RFC6455文件中標準化了WebSocket協議，WebSocket的 Web IDL格式的API是W3C標準化的。 ...

前端開發中像素的概念 - 前端 - 掘金
前端開發中像素的概念最近在美柚實習,第一次正式接觸到設計師的設計稿.我相信不少剛涉及移動端設計與開發的同窗基本上會在前端開發中的像素問題上糾結好久，因此寫下這篇筆記，便於本身往後翻閱。若是有啥理解上的錯誤，歡迎你們指正~ 何爲像素咱們看到所顯示...

2017 百度前端技術學院 - 自定義 checkbox/radio - 前端 - 掘金
一. label標籤 1. 概念： HTML <label>元素表示用戶界面中項目的標題。它一般關聯一個控件，或者是將控件放置在label元素內，或者是用做其屬性。這樣的控制稱做lab...

也說css之overflow：細探之下有意想不到的結果 - 掘金
做者：dolymood overflow 是一個很是經常使用的 CSS 屬性，通常來講會認爲很簡單，其實細究以後就會發現他還有不少小特性或者說意想不到的結果；下面就介紹下（在瀏覽器環境下）關於 overflow 的小總結。哪些元素上有效？首先 overflo...

細說CSS中的BFC - 掘金
做者：滴滴公共前端團隊 - 邱蓮 BFC是什麼？ BFC（Block Formatting Context）直譯爲「塊級格式化範圍」。是 W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。當涉及到可...

[[移動端新特性] Passive Event Listeners - 掘金](https://juejin.im/post/585232...
做者：滴滴公共前端團隊 - 小春 Passive Event Listeners 這個東西其實有一段時間了，關注 2016 Google I/O 的 Mobile Talk 的同窗應該有些印象。 PS：建議一些新技術方向探索的同窗關注一下每年的 Goog...

再談自適應垂直居中 - 掘金
做者：滴滴公共前端團隊 - Neurotoxin 新年第一篇，首先祝福你們新年好~ 最近在開發一個 Toast組件時，遇到了一些有趣的問題，首先來看一下需求需求爲寬高不定，上下左右垂直居中，以下圖代碼以下： HTML <div class="toa...

State 設計，Redux 開發第一步 - 前端 - 掘金
State是整個應用的數據，本質上是一個普通對象。State決定了整個應用的組件如何渲染，渲染的結果是什麼。能夠說，State是應用的靈魂，組件是應用的肉體。因此，在項目開發初期，設計一份健壯靈活的State尤爲重要，對後續的開發有很大的幫助。請注意，並不強...

百度前端技術學院－面向大學生的前端技術學習平臺 - 前端 - 掘金
由百度創辦的免費前端技術學習實踐、交流、分享平臺。百度居然幹了件良心事兒...

談談面試與面試題 - 前端 - 掘金
原由，某日電話面試以後滿心鬱悶的我發了兩條微博：面試的時候問個css的position屬性能刷掉一半的人這是啥狀況…… 其實這問題我原本打算的是能夠順着一路扯到normal flow、containing block、bfc、margin ...

[[英] 你有多瞭解 CSS 的 display 屬性 - 前端 - 掘金](https://juejin.im/entry/577e0...
display 屬性是咱們使用 CSS 進行網頁佈局時最重要的屬性之一，雖然你可能已經對 block、inline 的用法已經很是熟悉了，咱們仍是在這篇文章裏再好好了解一下這些屬性的用法吧。...

2016 年至今最受歡迎的 14 篇 CSS 文章 - 前端 - 掘金
We’ve taken a look through all the stats for the 20 issues of HTML5 Weekly (our front-end development newsletter) published so far...

粘連 Footer 的 5 種方法 | CSS-Tricks - 前端 - 掘金
一個簡短的歷史，若是你願意那樣說的話。粘連 footer 的目的是讓它「支撐」在瀏覽器窗口的底部。但不老是在底部，若是有足夠的內容將頁面撐開，footer 能夠被撐到網頁下方去。可是，若是頁面的內容很短，粘連 footer 仍然會出如今瀏覽器窗口的底部。 ...

CSS background 深刻理解及應用 - 前端 - 掘金
Background background屬性的簡寫用法, 常見背景屬性的理解以及神奇的漸變色。目錄 background屬性的簡寫用法 ...

手把手帶你用原生js實現css屬性的set和get - 掘金
做者：Icarus原文連接：手把手帶你用原生js實現css屬性的set和get 上一篇博文介紹了getComputedStyle方法，接下來，咱們就來實現一個簡易版的小插件，可以在不借助jQuery的狀況下實現css屬性的獲取和設置。 Let's start ...

CSS基本功從頭練之Selector - 掘金
CSS一直是個人短板，歷來沒有系統學過，一直都是使用第三方的樣式庫，或者在網上找點資料copy。最近感受應該系統的梳理一下，不然不少概念仍是不太清晰。仍是屬於邊學邊寫的資料，不免各類漏洞，但願你們多指正。 Selector（選擇器）爲何會有選擇器這個概念？...

CSS 基礎知識總結 - 前端 - 掘金
一般咱們在學習CSS的時候，感受語法很容易掌握，實際應用中卻碰到各式各樣難以處理的問題，爲避免你們受到一樣的困惑與不解，本文詳細講解了CSS中優先級和Stacking Context等高級特性，讓你更深刻了解CSS。 ...

動態加載 css 方法實現和深刻解析 - 前端 - 掘金
1、方法引用來源和應用此動態加載css方法 loadCss，剝離自Sea.js，並作了進一步的優化（優化代碼後續會進行分析）。由於公司項目須要用到懶加載來提升網站加載速度，因此將非首屏渲染必需的css文件進行動態加載操做。...

【譯】CSS 動畫之工具、框架和教程 - 前端 - 掘金
在這篇文章中，咱們將不討論使用 CSS 動畫的好處，也不會談論 JS 動畫是否比 CSS 動畫更快，而是與你分享一些 CSS 工具，框架和教程。它們將有助於緩解你在學習 CSS 動畫中的困擾，並幫助你節省一些時間。 CSS 動畫工具和...

Css margin 百分比 - 前端 - 掘金
你可能從沒注意過它在 margin系列之keyword auto 中，說過了 margin 值爲 auto 的狀況，此次要聊的是值爲百分比的情形。我必須認可這是一個很是基礎的知識點，但有一段時間我發現不少人對此有錯誤的認知。...

CSS 多行文本溢出省略顯示 - 前端 - 掘金
CSS多行文本溢出省略顯示文本溢出咱們常常用到的應該就是text-overflow:ellipsis了，相信你們也很熟悉，可是對於多行文本的溢出處理確接觸的不是不少，最近在公司羣裏面有同事問到，而且本身也遇到過這個問題，因此專門研究過這個問題。首先咱們回顧...

2017 年要去學的 3 個 CSS 新屬性 - 前端 - 掘金
Feature Query, Grid Layout, Native Variable。前端的親們大家顫抖了嗎？...

用 css3 製做旋轉加載動畫的幾種方法 - 前端 - 掘金
以WebKit爲核心的瀏覽器，例如Safari和Chrome，對html5有着很好的支持，在移動平臺中這兩個瀏覽器對應的就是IOS和Android。最近在開發一個移動平臺的web app，那麼就有機會利用css3去實現一些很酷的效果，這些效果原來更多的是利用圖...

2017 年要學習的三個 CSS 新特性 - 前端 - 掘金
新的一年，咱們有一系列新的東西要學習。儘管 CSS 有不少新的特性，但有三個特性令我最激動並進行學習。...

前端鮮爲人知的一面——前端冷知識集錦 - 前端 - 掘金
（點擊上方公衆號，可快速關注）做者：伯樂在線專欄做者 - 劉哇勇若有好文章投稿，請點擊 → 這裏瞭解詳情如需轉載，發送「轉載」二字查看說明前端已經被玩兒壞了！像console.log()能夠向控制檯輸出圖片等炫酷的...

獲取元素 CSS 值之 getComputedStyle 方法熟悉 - 前端 - 掘金
1、碎碎念~前言咱們都用過jQuery的CSS()方法，其底層運做就應用了getComputedStyle以及getPropertyValue方法。對於那些只想混口飯吃的人來說，曉得CSS()如何使用就足夠了。對於但願在JS道路上越走越遠的來人說，簡單瞭解...

個人職業是前端工程師：入門不是應該很簡單嗎？ - 前端 - 掘金
入門前端，是一件很難的事嗎？在今天，我也沒有想好一個答案，也不知道怎樣給出一個答案。這個問題並不取決於前端，而是取決於不一樣人的需求。究竟是想要快得一步登天呢，仍是一點點的慢慢來，去享受前端帶來的樂趣。對於不一樣領域的學者來講，都會有一個類似的問題：如何從入...

(譯)CSS 書寫模式 - 前端 - 掘金
因爲你可能沒有那麼多的時間，因此我將從結論開篇。你能夠使用一個不常見，可是很是重要的CSS屬性來使文字垂直顯示，像下面這樣。除了讓文字垂直顯示以外，你也可讓圖標和入口按鈕以這樣的方式呈現。固然，可讓你頁面上的任何內容按這樣方式呈現。我寫的css讓瀏...

Tips-移動端滑動固頂效果(position: sticky) - 掘金
先放個圖看看滑動固頂是啥效果：中間那個 tab 條，日常的時候是固定的，等到頁面滑上去的時候，又像 fixed 同樣貼在頂部。position: sticky 就是用來實現這個效果的，元素不脫離文檔流，仍然保留高度，因此這個屬性真是人畜無害啊，並且效果如絲...

CSS：Grid 佈局 - 前端 - 掘金
CSS Grid佈局，是一個基於網格的二維佈局系統，目的是用來優化用戶界面設計。不過，目前任何瀏覽器默認是不支持Grid佈局的，但幸運的是，咱們能夠設置Chrome、Opera或者Firefox的特殊標誌來啓用它。在Chrome或Opera中，在地址欄中輸...

詳解 CSS 居中佈局技巧 - 前端 - 掘金
水平居中元素：通用方法，元素的寬高未知方式一：CSS3 transform .parent { position: relative; } .child { position: absolute...

前端優化不徹底指南 - 前端 - 掘金
篇幅可能有點長，我想先聊一聊閱讀的方式，我但願你閱讀的時候，可以把我看成你的競爭對手，你的夢想是超越我。你想超越我，就得了解我懂什麼對吧，好，開始閱讀~ ~ 哈哈哈 ~ ~ ~ 歷時144000000毫秒出山的前端優化篇，若你問我有什麼感悟？那我告訴你，看到毫...

關於 DOCTYPE 的一個小發現 - 前端 - 掘金
本文來自個人筆記小札，找工做整理了出來<!DOCTYPE html> 對於前端開發工程師（好吧，其實作 Web 都懂）而言，實在是太熟悉的一個東西了，由此引伸的瀏覽器的各類模式也是一個老生常談的坑。然而我在乎外中居然找到了一個不爲人知的點，實在是驚...

CSS 並不簡單 -- 一我的性化輸入框的實踐 - 前端 - 掘金
此次經過這個個性化的輸入框，給你們介紹一些容易忽略的知識點。(新手注意：本文的html採用的是jade，css採用的sass，js採用的vue) 1、效果你們...

:before 僞類妙用 + 打造一個假的輸入框 - 前端 - 掘金
記一次之前從未注意的:before僞類之content屬性和用div模仿輸入框案列–ofo的車牌輸入框整個佈局大致分爲上中下觀察輸入框 1 輸入內容爲黑色 2 閃爍的光標爲黃色就奇怪在輸入框的光標...

CSS 常見佈局解決方案 - 前端 - 掘金
提及css佈局，那麼必定得聊聊盒模型，清除浮動，position，display什麼的，但本篇本不是講這些基礎知識的，而是給出各類佈局的解決方案。水平居中佈局首先咱們來看看水平居中 1.margin + 定寬 <di...

管理 CSS 層疊_w3cplus - 前端 - 掘金
編輯推薦：掘金是一個高質量的技術社區，從 CSS 到 Vue.js，性能優化到開源類庫，讓你不錯過前端開發的每個技術乾貨。點擊連接查看最新前端內容，或到各大應用市場搜索「掘金」下載APP，技術乾貨盡在掌握中。瞭解CSS的同窗都應該知...

玩轉 animate.css，提升動畫開發效率 - 前端 - 掘金
整了一個 animate.css 動畫效果的插件，能夠實時預覽動畫效果並同步生成對應動畫效果的 CSS 代碼，助你動畫開發一臂之力。...

CSS 中的浮動和清除浮動，梳理一下！ - 前端 - 掘金
從業三年，項目無數，如今回過頭來，想要把一些重要的知識用白話整理出來：這個東西是什麼？怎樣纔是最佳實踐？但願對本身知識體系有梳理做用，也但願對你們有些許幫助。前端技術棧更新太快，眼花繚亂，你們一個勁攬過來學習的時候，別忘了回頭看看那些已經掌握的基礎知識。 ...

《你不知道的 CSS》之等比例縮放的盒子 - 前端 - 掘金
你確定已經知道，對於一個 img 元素而言，你能夠單獨地修改它的 width 或者 height 屬性來設置它的大小，同時圖片的比例還可以保持不變。以下圖所示，最上面是原始大小的圖片，下面兩張則分別是設置了 width: 50% 和 height: ...

haorooms 總結提升你 css 技能的 css 開發技巧 - 前端 - 掘金
前言說到css開發技巧，其實我前面全部關於css的文章，都是css的一些小的技巧！感興趣的能夠查看：http://www.haorooms.com/tag/css 還有值得一提的是，我以前關於css，分別寫了css經常使用效果總結 ...

前端基礎知識整理之頁面佈局 - 前端 - 掘金
引用：「資深的前端開發能把absolute和relative弄混，這樣的人不要也罷，由於團隊須要的是：你這我的具備能夠依靠的才能」最近以爲本身應該好好檢討一下，連最基礎的問題都回答不上來，家裏人不要面子的啊。要有一個好的頁面佈局的話首先咱們要了解一個...

【譯】CSS 很棒，只是真的太難了 - 前端 - 掘金
原文地址：CSS is Fine, It’s Just Really Hard 原文做者：Jordan Scales ...

純 CSS 實現網站經常使用的五角星評分和分數展現交互效果 - 前端 - 掘金
最近作的一個項目涉及到評分和展現分數的模塊，UI設計師也給了幾個切好的圖片，實現五角星評分方式不少，本質愛折騰的精神和對性能追求以及便於維護的考慮，蒐集和嘗試了不少方式，最終採用了純css驅動的實現方式完成評分和展現分數的功能，沒有js,也就意味着沒判斷邏輯，...

談談一些有趣的 CSS 題目（十三）-- 巧妙地製做背景色漸變更畫！ - 前端 - 掘金
開本系列，談談一些有趣的 CSS 題目，題目類型天馬行空，想到什麼說什麼，不只爲了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。解題不考慮兼容性，題目天馬行空，想到什麼說什麼，若是解題中有你感受到生僻的 CSS 屬性，趕忙去...

基於 vw 等 viewport 視區相對單位的響應式排版和佈局 « 張鑫旭 - 鑫空間 - 鑫生活 - 前端 - 掘金
by zhangxinxu from http://www.zhangxinxu.com/wor... 本文全文轉載需購買版權(500¥)，摘要引流則免費，具體參見這裏 1、什麼是視區相對單位？就是相對於瀏覽器viewport尺寸的單位...

CSS 選擇器整理 - 前端 - 掘金
不少人都以爲CSS特別簡單，但其實真正寫好CSS並不容易，CSS的每一點其實內容都不少，就拿選擇器來講，CSS選擇器大概能夠分爲五類： ...

2015 年學習 CSS3 的 15 個高級免費教程 - 前端 - 掘金
若是你想學習建立炫酷的css3效果，這些由專業人士所寫的2015年的高級CSS3教程會是你的最佳選擇。 CSS 3D雲這是一個demo應用程序，你能夠生成一個與現實生活如出一轍的雲，並能夠對其進行調整。這個demo的代碼比較複雜，它運用了CSS3 3...

[[英] 使用 CSS 網格佈局處理元素的七種方法 - 前端 - 掘金](https://juejin.im/entry/583fe...
使用 CSS 網格佈局處理元素的七種方法...

[[英] CSS 繼承深度解析 - 前端 - 掘金](https://juejin.im/entry/583fe...
CSS 繼承深度詳解，減小你的代碼量。...

CSS3初體驗之奇技淫巧 - 掘金
自CSS3流行以來，雖然之前看過一遍全部的新增屬性，但其實在實際項目中用到的少之又少。因此沒有造成系統性的認識，以及看到效果立馬就能想到解決方案的能力。而後最近正好遇到一個須要繪製大量動畫的需求，因此決定趁此機會好好研究一下這個既熟悉又陌生的css3。在正式...

CSS 居中：徹底指南 - 前端 - 掘金
譯自CSS-TRICKS上的一篇文章：Centering in CSS: A Complete Guide。如下爲譯文： CSS的居中是衆多CSS難點的表明。爲啥用CSS居中這麼難呢？可是我認爲這個問題其實並無那麼難啦，就是有不少種不一樣的方式能夠達到居中的目...

實現 web 下劃線的 7 種方式 - 前端 - 掘金
本文來自css-tricks，介紹了在不一樣的場景下實現下劃線的7種方式。簡介有許多種不一樣的方式來實現下劃線，你也許還記得Crafting link underlines on Medium這篇文章。Medium也不是想作什麼瘋狂的事情，他們只是想讓他們的文字...

CSS 絕對底部 - 前端 - 掘金
來自國外的設計達人，純CSS，能夠實現: 當正文內容不多時，底部位於窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部佈局方案。不知道他有沒有去申請專利:)<!DOCTYPE html> &l...

26 個純 CSS 構建的 Web 項目 - 前端 - 掘金
英文原文：26 Impressive web projects built with CSS only譯者：IT程序獅譯文源自：http://www.jianshu.com/p/b321... 在本文中，咱們將分享26個純CSS構建地開源Web項目。...

(譯)一個健壯且可擴展的 CSS 架構所需的 8 個簡單規則 - 前端 - 掘金
原文地址：8 simple rules for a robust, scalable CSS architecture 原文做者：Jarno Rantanen 譯文出自：掘金翻譯計劃譯者：linpu.li 校對者：galenyuan，StarCrew...

前端常見佈局方式實現 - 前端 - 掘金
武功山頂寫在前面因爲知識有限，有的內容可能有點小錯誤什麼的，僅供參考參考，歡迎大佬們指正，小花在這裏謝過~ 小貼士（...

【CSS 常見問題】三分鐘解決 CSS 中 float 引發的父元素高度塌陷問題 - 前端 - 掘金
CSS 前言相信不少同窗在網頁佈局過程當中都用過float浮動佈局，float可讓咱們很方便的去佈局，可是同時也帶來了不少的問題，雖然如今不少人都推薦用Flex佈局來替代浮動佈局（不...

range滑塊自定義樣式，步驟詳解以及實際應用 - 掘金
寫在前面：本文的主要內容包括：type="range"屬性介紹，修改range默認css樣式以及在js中的實際應用。本文面向前端小白，寫的很差之處，請多多見諒。文末有demo連接，能夠自行復制到本地進行試驗。相關：自定義 range r...

關於 CSS 的零碎知識點 - 掘金
寫在前面：這篇文章是本人學習過程當中遇到css的零碎知識點2（就是之前本身不知道的），我都記下來了，須要的朋友能夠過來參考下，喜歡的能夠點個贊，但願對你們有所幫助。本文的受衆是前端小白，大手子能夠跳過。 1.scss編譯css文件使用中文註釋出現亂碼：在文...

(乾貨)css自定義 range radio select的樣式滑輪，按鈕，選擇框 - 掘金
寫在前面：以前踩坑css的時候，遇到滑輪，按鈕，選擇框這類型的東西，爲了頁面效果，老是須要自定義他們的樣式，而不使用他們的默認樣式。當時寫的時候，我也是蠻頭疼的，弄了個demo，連接在下面。對此作個總結。本文是面向前端小白的，大手子能夠跳過，寫的很差之處多多...

神器！解放你的雙手——UI 設計稿全自動切圖和標註的一些工具推薦 - 前端 - 掘金
原文收錄在個人 GitHub博客 (https://github.com/jawil/blog) ，喜歡的能夠關注最新動態，你們一塊兒多交流學習，共同進步，以學習者的身份寫博客，記錄點滴。工欲善其事，必先利其器。前不久在掘金上看到一篇文章，前端 PS...

前端 PS 切圖方法，圖文詳細 - 掘金
寫在前面：本文主要內容是目前我所知道的切圖技巧結合網上的資料，寫出來分享一波。圖文教程，多圖！！ BB：不少人都會說，切圖這個活倒底分給UI仍是分給前端。雖然好的UI會給咱們把圖切好，可是他們切的圖不必定百分之百符合咱們的需求，因此我一直都以爲這是頁面仔必需要...

分享一下我製做 H5 婚禮邀請函用到的技術要點 - 前端 - 掘金
前言不少網上的婚紗攝影公司，或者婚慶公司，或者一些h5製做平臺，均可以作一些婚禮邀請函，可是這樣的婚禮邀請函千篇一概。沒有什麼特點，僅僅是圖片展現。在某人的強烈要求之下，我製做了一個h5婚禮邀請函（目前源碼暫時不公開吧，過段時間再說）。用到了...

CSS 技巧（三）：視覺效果 - 前端 - 掘金
《css揭祕》學習筆記系列，記錄和分享各類實用技巧，共同進步。源代碼可訪問倉庫地址視覺效果 1. 單側投影 1.1 單側投影 ...

吹毛求疵的追求優雅高性能JavaScript - 前端 - 掘金
SpinKit 是一套網頁動畫效果，包含8種基於 CSS3 實現的很炫的加載動畫。藉助 CSS3 Animation 的強大功能來建立平滑，易於定製的動畫。SpinKit 的目標不是提供一個每一個瀏覽器都兼容的解決方案，而是給現代瀏覽器提供更優的技術實...

CSS 技巧（二）：形狀 - 前端 - 掘金
形狀本章代碼比較多，能夠訪問倉庫獲取源代碼。 1. 自適應的橢圓背景知識：border-radius屬性的基本用法使用b...

小 Tip：margin 負值詳解 - 前端 - 掘金
先看看 margin margin： CSS外補白，外邊距，是從自身邊框到另外一個容器邊框之間的距離。四個方向： ...

使用 CSS 變量（CSS Variables）來實現一個 3D 動畫效果 - 前端 - 掘金
這篇文章來學習下關於CSS變量（CSS Variables）這個還在開發中的新的API，簡單來了解下它的概念和一些用途。使用CSS變量（CSS Variables）這個特性來完成下圖所示的一個3D旋轉的功能。 CSS變量概念以及用法...

CSS 變換、過渡、動畫實現案例 - 前端 - 掘金
如下全部效果的實現方式均爲我的看法，若有不對的地方還請一一指出。目錄方塊「Z」字形運動線段圍繞盒子運動餅圖[動圖, 固定比例，如20%] 移動端錄音旋轉小按鈕效果實現漸變色方塊「...

CSS Grid Layout 從入門到入門 - 前端 - 掘金
CSS 的 Grid Layout 已經開始在瀏覽器上有資詞啦！能夠看到在 FF 的52版本以上已經支持了，Chrome 從57開始支持，若是用 dev 版本或者 canary 版本均可以了，safari 包括10.1和 t...

使用 css3 實現圓形進度條 - 前端 - 掘金
在開發微信小程序的時候，遇到圓形進度條的需求。使用canvas繪圖比較麻煩：一、爲了實如今不一樣屏幕上面的適配，必須動態的計算進度條的大小；二、在小程序中，canvas的畫布具備最高的層級，不易於擴展。但使用css3...

手把手教你擼出跑男動畫 CSS3-Animation抽絲剝繭 - 掘金
做爲一名真正的前端開發者，咱們不能只關注前端邏輯部分。畢竟「水銀泄地」般的頁面設計和「炫酷逼真」的動畫效果，是咱們區別於其餘程序員所特有的優點之一。儘可能百分之百的還原視覺稿，爲UE設計靈感和用戶視覺享受架起一座橋樑：正所謂「晉帝時祭北郊，更祝版，工人削之，筆...

不簡單的前端性能優化 - 前端 - 掘金
本文主要介紹「關鍵渲染路徑」與「網絡」兩個方面的性能優化並提供 demo，篇幅較長建議電腦觀看。前端優化的方面太多，本文介紹的僅僅是其中的一部分，力求涵蓋「關鍵渲染路徑」的方方面面，及一些不常被提到的「網絡優化」部分。...

譯：能夠用什麼方法清除浮動？ - 前端 - 掘金
原文連接：http://stackoverflow.com/a/16... 根據正在生產中的設計，如下每一個 clearfix CSS 解決方案都有本身的優點。「...

rem 佈局原理 - 前端 - 掘金
REM兼容性首先，在介紹 rem 以前，咱們先看看 em em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置...

「自適應」高度的 textarea 文本輸入框 - 前端 - 掘金
還在不斷增長中的動車高鐵票寫在前面那啥，在個人那個很安靜的一個 CSS 羣（羣號：82991297）忽然看到有人在問一個問題。使用 css 如何實現：textarea 如何實現高度自適應？當時看到這個問題的時候，我腦中只有一個想法，這個百度...

welogger 開發筆記 1 - react 中如何處理彈層 - 前端 - 掘金
welogger.com正在如火如荼的開發中，其中遇到的一些問題和經驗在這裏作一些筆記，分享給你們。也許有不許確或者還有能作得更好的地方，歡迎評論指正。 1. 背景 welogger用的react.js作的前端渲染，涉及到比較多用戶交...

5 個技巧避免沒必要要的瀏覽器兼容性問題 - 掘金
本文做者：John Howard 編譯：鬍子大哈翻譯原文：http://huziketang.com/blog/po... 英文鏈接：5 Tricks to Avoid Cro...

教你如何在 web 應用程序中使用本地文件•上傳圖片file✔ - 前端 - 掘金
使用在HTML5中添加到DOM的File API，如今可讓Web內容要求用戶選擇本地文件，而後讀取這些文件的內容。此選擇能夠經過使用HTML ) 元素用來建立基於web表單的可交互控件."><input> 元素或...

理解 CSS 命名規範 --BEM - 前端 - 掘金
理解CSS命名規範--BEM 2017-04-05 最近在寫博客主題的時候發現一個很嚴重的問題，因爲css的命名並非很規範，致使本身在後期修改的時候非常頭疼，有些樣式須要在瀏覽器中打開開發者工具去找，非常無奈。因此決定在寫完主題以後...

縱向排列文字以及禁止文字選中 - 前端 - 掘金
寫在前面：內容包括demo代碼，應用和定義，以及參考文獻，本文主要內容是本人學習過程當中遇到css的零碎知識點1（就是之前本身不知道的），我都記下來了，須要的朋友能夠過來參考下，喜歡的能夠點個贊，但願對你們有所幫助。 writin...

[[英] 使用 CSS 選擇器來檢驗 HTML 代碼 - 前端 - 掘金](https://juejin.im/entry/58c62...
檢驗 HTML 代碼是否符合 W3C 標準，經常使用工具是 W3C 官方的 Markup Validation Service。這篇文章介紹了使用 CSS 一些不爲人知的選擇器來標記 HTML 中那些不符合 W3C 要求的寫法。...

發佈（Publish）/ 訂閱（Subscribe）模式 - 前端 - 掘金
簡稱pub/sub，pub/sub模式是咱們平時業務中常常會使用到的，sub會監聽一類消息來達到pub發佈的時候進行相應的邏輯處理舉個例子，好比頁面上有個列表，當咱們點擊刷新的時候要更新列表，當咱們添加一個數據的數據的要更新列表，當咱們刪除一個...

跟着寫一個 CSS 柵格佈局 - 前端 - 掘金
咱們常在諸如Bootstrap的前端框架中見到css柵格系統，若是僅僅爲了使用柵格佈局而引入一個前端框架是很不明智的行爲。因此，這篇文章就是幫助你從零打造一個CSS Grids～什麼是柵格系統柵格系統（CSS Grids）是一種運...

(譯) 再談 CSS 中的代碼味道 - 掘金
原文地址：Code Smells in CSS Revisited 原文做者：Harry 譯文出自：掘金翻譯計劃譯者：IridescentMia 校對者：rccoder, Germxu 再談 CSS 中的代碼味道回到 2012 年，我寫了一篇關於潛在 ...

Javascript 高性能動畫與頁面渲染 - 前端 - 掘金
No setTimeout, No setInterval 若是你不得不使用setTimeout或者setInterval來實現動畫，那麼緣由只能是你須要精確的控制動畫。但我認爲至少在如今這個時間點，高級瀏覽器、甚至手機瀏覽器的普及程度足夠讓你有理由有條件在實...

如何用 css 實現古代人讀的豎排的文字 - 前端 - 掘金
最近須要實現一個文字豎排的效果，相似下圖這種效果，因此研究了一下css的writing mode，順便翻譯了一篇文章若是你沒有太多時間，我就從結果開始，來點餐前小菜。你能夠用一些不爲人知的，可是很重要的並且很強大...

「等一下，我碰！」——常見的 2D 碰撞檢測 - 前端 - 掘金
「碰乜鬼嘢啊，碰走曬我滴靚牌」。想到「碰」就天然聯想到了「麻將」這一偉大發明。固然除了「碰」，洗牌的時候也充滿了各類『碰撞』。好了，不廢話。直入主題——碰撞檢測。在 2D 環境下，常見的碰撞檢測方法以下： ...

我的 css 糾錯思路 - 前端 - 掘金
每當寫完大量的樣式代碼的時候，由於css自己的層疊性，在觀察其顯示出的效果，由於某些緣由可能出現了與以前設想有些出入的地方，該從那些地方如說去查找下這些問題來源。在這裏，我說說本身的想法思路。不過在這以前，你須要對css屬性有些...

談談 css3 的 transition - 前端 - 掘金
屬性何其多，精通一個受益終身（在不被新時代廢除的狀況下）。今兒咱們就來探討一下css3的transition這個變換過渡的屬性。都知道經過過渡transition，可讓web前端開發人員不須要javascript就能夠實現簡單的動畫交互效果。過渡屬性看似簡...

你不知道的 CSS 祕密：margin 篇 - 前端 - 掘金
本篇講解的是主要是BFC 能夠解決的 margin 重疊問題 ,如對你有幫助，請點個贊給個鼓勵，謝謝~ 先來一張W3C標準盒模型的圖片. margin 屬性介紹 margin 的幾種使用方法,簡單帶過. margin : t...

前端灰度效果的實現（filter:grayscale()）兼容全部瀏覽器 - 前端 - 掘金
分享一個最近在工做中遇到的新需求以及解決方案，但願對開發的朋友門有幫助，鄙人能力有限，有不妥的地方還請你們多多指教。需求直接看圖，須要在某種狀態時將B.2模塊總體置灰。一開始想直接處理全部圖像，可是涉及東西太多，尤爲是icon得從新切圖，從新合成，工做...

【譯】建立漂亮的 CSS 按鈕的 10 個代碼片斷 - 前端 - 掘金
若是你正在尋找一些高質量的 CSS 按鈕的示例，那麼這篇文章必定是你的「菜」。在本文中，咱們從 CodePen 上收集了 10 個獨特的 CSS 按鈕合集，並附有它們的代碼片斷，方便你將它們應用在你的 Web 項目上。網頁設計師已經沒必要再依賴 Photosh...

flex 與 margin 之間的基情 - 前端 - 掘金
flex 與 margin 之間的基情...

解決 Chrome 中 input 自動填充時會強行設置背景色的問題 - 前端 - 掘金
方法1：box-shadow 方法2：animation...

深刻理解滾動 scroll - 前端 - 掘金
前面的話前面兩篇博文分別介紹過偏移大小、客戶區大小。本文介紹元素尺寸中內容最多的一部分——滾動scroll 滾動寬高 scrollHeight scrollHeight表示元素的總高度，包括因爲溢出而沒法展現在網頁的不可見部分 scro...

CSS 絕對定位 absolute 詳解 - 前端 - 掘金
以前介紹過CSS浮動float詳解，本篇介紹的絕對定位absolute和浮動float有部分類似性。若是能理解浮動float，對理解絕對定位absolute會大有幫助。先說absolute和float的類似處：包裹性和高度...

CSS 面試題解答 - 前端 - 掘金
問：什麼是CSS reset 在不一樣瀏覽器之間，默認樣式有着諸多差別和問題，而爲了在不一樣瀏覽器之間具有相同的視覺效果，開發人員每每會在樣式表文件中引入一段CSS代碼，如http://meyerweb.com/eric/tool...

CSS3 transform 屬性及應用 - 前端 - 掘金
在介紹有關transform相關的知識以前，先來說一下transform-origin的用法以及關於<angle>角度的幾種取值單位。另外，在使用時，爲了兼容各個瀏覽器，可加上瀏覽器的私有前綴［－moz- -webkit -ms-］。 transf...

動態加載 / 刪除 css 文件以及圖片預加載 - 前端 - 掘金
最近，工做中遇到了一個比較奇葩的需求：要在一個頁面（PC端）增長一個功能模塊，可是這個頁面在不久以後要重構，爲了新增長的模塊能夠繼續複用，必須作到這個模塊的樣式對頁面其餘模塊不能形成影響，舊版頁面使用bootstrap樣式，新版模塊只使用normalize.c...

【譯】CSS Flexbox 學習指南、工具與框架 - 前端 - 掘金
Flexbox 是一種更有效的佈局方式，它能更好的分配容器空間，並控制項目的對齊。雖然，掌握它的理論有些複雜，但幸運的是，咱們能夠藉助開放的網絡來學習並逐步掌握它。在本文中，咱們整合了一些最佳的 Flexbox 學習資源，它們能夠幫助你瞭解Flexb...

css-protips - 讓你的 CSS 代碼更加專業 - 前端 - 掘金
提示的收集，以幫助提高你的CSS技巧。對於其餘大名單退房 @sindresorhus的策展的名單真棒名單. ...

各類姿式教你寫手風琴式摺疊菜單 - 前端 - 掘金
手風琴菜單在寫後臺管理頁面的時候，編寫摺疊菜單是一個比較常見的應用場景。那麼今天咱們就來學習一下怎麼使用各類姿式寫出手風琴式的摺疊菜單。寫以前先看一下效果，插件來源於jQuery之家，演示效果能夠點擊這裏摺疊菜單。jquery...

[[佈局概念] 關於CSS-BFC深刻理解 - 掘金](https://juejin.im/post/5909db...
寫在前面好記性不如爛筆頭，研究了一下BFC，發現裏面比較細的東西也是不少的！關於BFC，不少人可能都據說過BFC這個東西，大概知道這是個啥東西，相信不少人對此並無一個很是細緻的瞭解，本文預計篇幅較長，認真，耐着性子看，應該都可以比較深刻的理解BFC這個概念...

一個項目的前端佈局給個人思考 - 掘金
內容包括： HTML（講述你不知道的absolute和float關係）和javascript（本身寫的一段原生js實現雙擊切換效果）最近在一個項目中發現一個本身一直忽視的問題 position 和 float 的混用問題，position定位給咱們前端開發中...

CSS 深刻理解 vertical-align 和 line-height 的基友關係 - 前端 - 掘金
本文地址：http://www.zhangxinxu.com/wor... 1、想死大家了幾個星期沒有寫文章了，好忙好癢；個把月沒有寫長篇了，好忙好想；半個季度沒在文章中嘮嗑了，好癢好想。後面一棟樓有對夫妻在吵架，聲音雄渾有力，交鋒...

談談一些有趣的 CSS 題目（十五）-- 談談 CSS 關鍵字 initial、inherit 和 unset - 前端 - 掘金
開本系列，談談一些有趣的 CSS 題目，題目類型天馬行空，想到什麼說什麼，不只爲了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。解題不考慮兼容性，題目天馬行空，想到什麼說什麼，若是解題中有你感受到生僻的 CSS 屬性，趕忙去...

UI 設計師進階技能——CSS3 之樣式篇 - 設計 - 掘金
由於近期項目沒有壓力，主要工做就是一些涉及功能增刪相關的界面的小工做，修修補補，搞個圖標之類，設計師小夥伴們都懂的，很輕鬆，基本就是比着葫蘆畫瓢這樣，因此有時間的話就會看看CSS3的相關知識，本身也在邊學邊作，並沒有限感慨CSS3真是太強大了，幾乎能夠徹底告別「...

block，inline 和 inline-block 的實際應用 - 前端 - 掘金
整體概念 block和inline這兩個概念是簡略的說法，完整確切的說應該是 block-level elements (塊級元素) 和 inline elements (內聯元素)。block元素一般被現實爲獨立的一塊，會單獨換一行；...

web 低多邊形 3d 動態交互背景生成，相似 QQ 輕聊版登陸框 - 前端 - 掘金
demo1 demo2 demo3 ...

Flexbox 語法清單 - 前端 - 掘金
Flexbox Cheat Sheet displayw3.org/TR/css-flexbox-1/#flex-containers ...

【譯】CSS Grid VS Flexbox：實例對比 - 前端 - 掘金
DEMO 地址：http://t.cn/RXIyh0v 示例下載地址：http://t.cn/RXIyZnb 不久之前，全部 HTML 頁面的佈局還都是經過 tables、floats 以及其餘的 CSS 屬...

Sass 快速入門 - 前端 - 掘金
因爲工做須要，最近在使用Ionic3 + Angular4，發現使用CLI建立的新項目裏對於CSS樣式都是使用Sass，因此學習了一下Sass。這裏主要記錄了Sass的主要用法，免得每次使用都去翻官網。 Sass是什麼？ Sass 是一款強化 CSS 的輔...

微信面試題 - 獲取元素的最終 background-color - 前端 - 掘金
1、題目用JS代碼求出頁面上一個元素的最終的background-color，不考慮IE瀏覽器，不考慮元素float狀況。 2、題目解析 1.考察底層Java...

CSS 技巧：使你的 CSS 更加專業 - 前端 - 掘金一個幫你提高 CSS 技巧的收藏集。對於其餘收藏集合能夠查看 @sindresorhus 建立的收藏集合 Awesome Lists. 目錄專業技巧支...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。