CSS 五種方式實現 Footer 置底 - 前端 - 掘金
頁尾置底（Sticky footer）就是讓網頁的footer部分始終在瀏覽器視窗的底部。 當網頁內容足夠長以至超出瀏覽器可視高度時，頁尾會隨著內容被推到網頁底部；但如果網頁內容不夠長，置底的頁尾就會保持在瀏覽器視窗底部。 ...
CSS 中的浮動和清除浮動，梳理一下！ - 前端 - 掘金
從業三年，專案無數，現在回過頭來，想要把一些重要的知識用白話整理出來：這個東西是什麼？怎樣才是最佳實踐？希望對自己知識體系有梳理作用， 也希望對大家有些許幫助。 前端技術棧更新太快，眼花繚亂，大家一個勁攬過來學習的時候，別忘了回頭看看那些已經掌握的基礎知識。 ...
你必須記住的 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...
2017 年要學習的三個 CSS 新特性 - 前端 - 掘金
新的一年，我們有一系列新的東西要學習。儘管 CSS 有很多新的特性，但有三個特性令我最激動並進行學習。...
網頁中實現正六邊形的 N種姿勢 - 前端 - 掘金
經常在別人家的網頁上看到各中好看圖形，其中就有正六邊形和組合的蜂窩狀圖形。今天我們來盤點一下，網頁上有哪些姿勢實現這個效果姿勢1css的border/css/ .lb01 { position: relative; width: 200px; ...
文字兩側加橫線的解決方案 - 前端 - 掘金
文字兩側加橫線的需求你遇到過嗎？在參與的專案中我遇到過這種需求，總結了一下,目前分為兩種:一，文字所在的背景是純色，單一顏色；檢視圖片二，文字所在背景是花色，或者是背景圖片檢視圖片給你一些時間，思考一下：檢視圖片腦海閃過了什麼？定位，浮動，背景圖片，偽元素。。...
前端 CSS 一些小細節 - 前端 - 掘金
英文原文：Peter Gasston ，翻譯：vivien chen 未來的CSS太讓人興奮了：一方面，是全新的頁面佈局方式；另一方面，是酷炫的濾鏡、顏色等視覺效果。這些CSS，受開發者追捧，被雜誌和部落格文章鋪天蓋地地介紹。 如果說這些特性是CSS華麗的一面，...
CSS 魔法堂：深入理解 line-height 和 vertical-align - 前端 - 掘金
前言 一直聽說line-height是指兩行文字的基線間的距離，然後又說行高等於行距，最近還聽說有個叫行間距的傢伙，@張鑫旭還說line-height和vertical-align基情四射，貴圈真亂啊。。。。。。於是通過本篇來一探究竟:) line-heigh...
前端面試題目大全 - 前端 - 掘金
HTML面試題 1.XHTML和HTML有什麼區別 HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言最主要的不同： XHTML 元素必須被正確地巢狀。 XHTML 元素必須被關閉。 標籤名必須用小寫字母。 XHTML 文件必須擁有...
(譯) 3 分鐘掌握 CSS Flexbox - 前端 - 掘金
原文地址：Learn CSS Flexbox in 3 Minutes 本文已獲得原作者 Per Harald Borgen 的授權 譯文出自：掘金翻譯計劃 譯者：Gran 校對者：mypchas6fans, MAYDAY1993 ...
談談一些有趣的 CSS 題目（八）-- 純 CSS 的導航欄 Tab 切換方案 - 前端 - 掘金
本系列，談談一些有趣的 CSS 題目，題目型別天馬行空，想到什麼說什麼，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。對提升 CSS 水平大有裨益。...
CSS 進階：提高你前端水平的 4 個技巧 - 前端 - 掘金
本文由 伯樂線上 - 小謝 翻譯。未經許可，禁止轉載！英文出處：Jonathan Z. White。歡迎加入翻譯組。譯者注：隨著 Node.js 、react-native 等技術的不斷出現，和網際網路行業的創業的層出不窮，瞭解些前端知識，成為全棧攻城師，快速的...
CSS 佈局的未來：網格佈局 · 張小倫愛學習 - 前端 - 掘金
在這片文章中，我們一起來探索 CSS 網格佈局的美妙世界。網格佈局是 W3C 規範中相對較新的部分，已經在瀏覽器中開始綻放屬於自己的光芒。 在我們深入研究這項新鮮的 CSS 技術之前，讓我們先快速的複習 grid 原理的相關知識。 網格佈局的簡短介紹 原作者的...
You Don't Know CSS（二） - 前端 - 掘金
Float positioning schemefloat本來是用於實現文字環繞圖片效果，但是其卻成為了現代柵格佈局的基礎。一旦你理解normal flow是如何工作和inline formatting context是如何切割成line box的，float...
(譯) 148 個資源讓你成為 CSS 專家 - 前端 - 掘金
迄今為止，我已經收集了100多個精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的佈局設計脫穎而出。 CSS3 資源 20個學習CSS3的有用資源 CSS3 風暴 — 提示, 訣竅 和 技巧 20個非常有用的CSS3教程 令人激動的CS...
【譯】60 個有用 CSS 程式碼片段 - 前端 - 掘金
1、垂直對齊 如果你用CSS，則你會有困惑：我該怎麼垂直對齊容器中的元素？現在，利用CSS3的Transform，可以很優雅的解決這個困惑： .verticalcenter{ position: relative; top: 50%; ...
CSS Modules 入門 Ⅰ：它是什麼？為什麼要使用它？ - 前端 - 掘金
原文連結：What are CSS Modules and why do we need them?作者：ROBIN RENDLE最近我對CSS模組特別感興趣，要是你以前還從未聽說過CSS Modules，那麼這個系列就是專門寫給你的。首先我們會介紹一下CSS...
You Don't Know CSS（一） - 前端 - 掘金
本文主要內容來自於learn CSS layout 和CSS2.1 spec 和深入理解CSS系列 和《CSS權威指南》，主要講解一些核心的css概念(起這麼個名字感覺會被人打）你可能聽說過CSS常規流(norm flow)中的inline和block。但是你...
魔法哥 2013 前端筆試題曝光（附完整解答） - 前端 - 掘金
簡介這是我在 2013 年整理的一套筆試題，用於在面試前快速判斷候選人的綜合素質，要麼快速了斷，要麼為後續的面談提供切入點。為滿足 “快速” 的要求，題型以選擇題為主，確保候選人可以在 30 分鐘內做完。顯然，其中有些內容已經過時了。儘管如此，我相信這套題還是...
(譯)一個健壯且可擴充套件的 CSS 架構所需的 8 個簡單規則 - 前端 - 掘金
原文地址：8 simple rules for a robust, scalable CSS architecture 原文作者：Jarno Rantanen 譯文出自：掘金翻譯計劃 譯者：linpu.li 校對者：galenyuan，StarCrew...
CSS 居中：完全指南 - 前端 - 掘金
譯自CSS-TRICKS上的一篇文章：Centering in CSS: A Complete Guide。以下為譯文： CSS的居中是眾多CSS難點的代表。為啥用CSS居中這麼難呢？但是我認為這個問題其實並沒有那麼難啦，就是有很多種不同的方式可以達到居中的目...
三列布局面試題延伸 - 前端 - 掘金
昨日和 @喻木大大聊面試的時候聊到了這個話題，其實這個問題挺常見的，不過自己面試到還沒問過，問過自適應的等比正方形佈局。不過聊到這個問題，下面就詳細的說下解決思路和考察要點。希望下次不要被榆木童鞋刷掉了?。 解決這個問題，先簡單描述下具體的需求吧： 給出三...
CSS三欄佈局的四種方法 - 掘金
前言 總括： 不管是三欄佈局還是兩欄佈局都是我們在平時專案裡經常使用的，也許你不知道什麼事三欄佈局什麼是兩欄佈局但實際已經在用，或許你知道三欄佈局的一種或兩種方法，但實際操作中也只會依賴那某一種方法，本文具體的介紹了三欄佈局的四種方法，並介紹了它的使用場景。 ...
(譯) CSS 繼承深度解析 - 前端 - 掘金
原文地址：CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends 原文作者：H...
Top10: 11 月份最值得閱讀的 CSS 文章 - 掘金
這是我在? Medium關注的一個系列文章，分類收集了來個各個不同社群優秀的文章和專案，每個月選出其中最好的十個, 由於Medium在牆外，所有我進行簡單的翻譯和整理到Github ❤️ Rank 1 CSS參考：圖解CSS屬性 有個這個網站，媽媽再也不用...
CSS 高階佈局技巧 - 前端 - 掘金
隨著 IE8 逐漸退出舞臺，很多高階的 CSS 特性都已被瀏覽器原生支援，再不學下就要過時了。 用 :empty 區分空元素 相容性：不支援 IE8 Demo 假如我們有以上列表： <div class="item">a&l...
關於CSS一些細節問題 - 掘金
本文是2016年的最後一篇文章，主要是將一些CSS細節問題整理一下。 background-position取值為百分比的計算方式 margin相鄰摺疊問題 position的absolute和relative定位top、left、right、bottom問...
外刊君談中國第三屆 CSS 大會 - 掘金
歡迎關注我們的微信公眾號，前端外刊評論，如果搜尋異常，請搜尋，FrontendMagazine。 2016年12月17日，中國第三屆CSS大會在廣州天虹錦都酒店酒店舉行，外刊君同其他幾位同事也參加了這屆CSS大會。本文將對大會進行一個總結，談談外刊君的見聞和...
再談自適應垂直居中 - 掘金
作者：滴滴公共前端團隊 - Neurotoxin 新年第一篇，首先祝福大家新年好~ 最近在開發一個 Toast元件時，遇到了一些有趣的問題，首先來看一下需求 需求為寬高不定，上下左右垂直居中，如下圖 程式碼如下： HTML <div class="toa...