iT邦幫忙

css相關文章
共有 702 則文章

技術 【CSS筆記】實現等高欄位

第一種:border 解說:利用中間欄位的border-left與border-right來實現視覺上的等高效果,但缺點很明顯:「左右兩邊內容超出中間欄位時,會...

技術 要開始使用 Bootstrap 4 前,我們先了解幾個它的通用模式吧

前情提要:讓我們站在巨人的肩膀上,如何在專案中導入 Bootstrap 4 並客製它 ★首先這篇文章適合以下背景的人閱讀: 熟悉 HTML、CSS 知道如何...

技術 淺談BEM CSS

淺談BEM CSS-CSS設計模式與架構 前言 BEM是Block Element Modifier的縮寫, BEM 是一種為了讓CSS Class 更好維...

技術 讓我們站在巨人的肩膀上,如何在專案中導入 Bootstrap 4 並客製它

程式設計的世界有一句俗話叫做,不要重複造輪子,意思就是說,別人已經寫好了的程式,就不要再自己重複寫了,除非是想要練習,想要了解原理,讓自己將來也有機會為別人造...

鐵人賽 Modern Web DAY 30
重新認識 CSS 系列 第 30

技術 重新認識 CSS - 總結 & 系列目錄

前言 「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加...

鐵人賽 自我挑戰組 DAY 30
從門外漢到前端新手 系列 第 30

技術 Day30 CSS:Transform: translate

Transform是CSS中,用來改變視覺格式化模型(visual formatting model)的各種型態,且它具有三維的概念,可以聲明元素的三維視覺效果...

鐵人賽 Modern Web DAY 30

技術 學習路徑懶人包 - CSS 選取器學習地圖

經歷了29天的 CSS 選取器的洗禮,感謝各位的訂閱、支持與觀看,不知道大家對於 CSS 選取器是否有變的更加熟悉了呢?今天就讓我們來快速地回顧一下這 29 天...

鐵人賽 Modern Web DAY 29

技術 :root 根目錄選取器 - 叫你阿爸出來講

這個選取器應該是所有選取器裡面最特別的了,且目前這個選取器使用的地方還滿受限的,先來瞭解一下這個選取器的名字吧,root 顧名思義就是「根」的意思,網頁的「根」...

鐵人賽 影片教學 DAY 29

技術 金魚都能懂的這個網頁畫面怎麼切 : 拼拼版重構

大家好~ 我是 Amos,這次要跟大家分享的是切版的教學,如果您本身對於 HTML & CSS 的基礎還不了解的話,建議您可以先看去年鐵人的基礎教學 本...

鐵人賽 Modern Web DAY 29
重新認識 CSS 系列 第 29

技術 重新認識 CSS - z-index & stacking context

前言 「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加...

鐵人賽 自我挑戰組 DAY 29
前端新手進化史 系列 第 29

技術 flex 7

flex 有自己專屬的對齊屬性,vertical-align、text-align 甚至 float 都是叫不動 flex items 的。想要讓 flex...

鐵人賽 自我挑戰組 DAY 29
每天來點 CSS Specification 系列 第 29

技術 話說 Media Query 是什麼呢?(下)

Media feature 以下列出各種面向的 Media feature,一般來說較常使用的可能是有關於設備的顯示區域大小,應用在響應式網站時非常有用,除此以...

鐵人賽 自我挑戰組 DAY 29
從門外漢到前端新手 系列 第 29

技術 Day25 CSS:Position

position是用來定位元素的屬性。它是指定top、left、right、bottom的數值,來決定元素的位置。而它的定位是依照基準來位移,基準依positi...

鐵人賽 影片教學 DAY 28

技術 金魚都能懂的這個網頁畫面怎麼切 : 快速版面拼拼樂

大家好~ 我是 Amos,這次要跟大家分享的是切版的教學,如果您本身對於 HTML & CSS 的基礎還不了解的話,建議您可以先看去年鐵人的基礎教學 本...

鐵人賽 Modern Web DAY 28
重新認識 CSS 系列 第 28

技術 重新認識 CSS - visibility

前言 「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加...

鐵人賽 自我挑戰組 DAY 28
前端新手進化史 系列 第 28

技術 flex 6

vertical-align、text-align 甚至 float 都是叫不動 flex items 的,flex 有自己專屬的對齊屬性,而想要讓 flex...

鐵人賽 Modern Web DAY 28

技術 :disabled & :enabled 表單用僞類選取器 - 一眼看穿那些不能按的按鈕

介紹了這麼多針對一班網頁標籤的選取器之後,總算我們可以進入到針對表單的選取器了,針對表單的選取器其實還不少,但是目前來說除了 :checked 之外,可能比較有...

鐵人賽 自我挑戰組 DAY 28
每天來點 CSS Specification 系列 第 28

技術 話說 Media Query 是什麼呢?(中)

倘若不斷向深處扎根,就能茁壯成長 - RM 前言 昨天我們提到了 Media query 的構成以及意義,了解到在對不同設備有不同的樣式設定時可以使用 Me...

鐵人賽 自我挑戰組 DAY 28
從門外漢到前端新手 系列 第 28

技術 Day28 CSS:Float

Float浮動屬性 float的使用,通常是想在版面上做出文繞圖的效果,但也可以應用在元素的左右對齊。float屬性有下列定位特性: 讓元素脫離normal...

鐵人賽 Modern Web DAY 27
重新認識 CSS 系列 第 27

技術 重新認識 CSS - overflow

前言 「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加...

鐵人賽 自我挑戰組 DAY 27
前端新手進化史 系列 第 27

技術 flex 5

上一篇文章 中說明了 flex 屬性是 flex-grow、flex-shrink、flex-basis 三個屬性的三合一,而 flex 屬性值除了直接給定三...

鐵人賽 Modern Web DAY 27

技術 :nth-of-type() & :nth-last-of-type() - 你覺得燒腦但其實根本不燒腦的選取器趴兔

總算...金魚都能懂的 CSS 選取器 講了20幾篇,總算可以講到這個大家都很有興趣的 :nth-of-type 選取器了,看到這邊又要再再再老話一句了 ( 夠...

鐵人賽 自我挑戰組 DAY 27
從門外漢到前端新手 系列 第 27

技術 Day27 CSS:Display

在認識了normal flow中BFC與IFC的概念後,我們要來認識以這兩個佈局規則為基準的display屬性。display屬性也有特殊的佈局如flex及gr...

鐵人賽 自我挑戰組 DAY 27
每天來點 CSS Specification 系列 第 27

技術 話說 Media Query 是什麼呢?(上)

倘若不斷向深處扎根,就能茁壯成長 - RM 前言 現在透過桌機、筆電、手機、平板,輕輕一操作便可以上網,考慮到各種設備的顯示像素以及大小與維護網頁親和性之間...

鐵人賽 Modern Web DAY 26

技術 :nth-child() & :nth-last-child() - 你覺得燒腦但其實根本不燒腦的選取器

總算...金魚都能懂的 CSS 選取器 講了20幾篇,總算可以講到這個大家都很有興趣的 :nth-child 選取器了,看到這邊又要老話一句了 ( 夠了你! )...

鐵人賽 Modern Web DAY 26
重新認識 CSS 系列 第 26

技術 重新認識 CSS - Inline formatting context (IFC)

前言 「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加...

鐵人賽 自我挑戰組 DAY 26
前端新手進化史 系列 第 26

技術 flex 4

今天將介紹 flex 屬性,在這之前先來了解一下 positive free space 與 negative free space 這兩個名詞。 pos...

鐵人賽 自我挑戰組 DAY 26
每天來點 CSS Specification 系列 第 26

技術 話說 stacking context 是什麼呢?

倘若不斷向深處扎根,就能茁壯成長 - RM 前言 前面的章節中,我們提過 BFC、IFC 等格式化上下文概念,規範 box 的二維佈局規則,而自 CSS2....

鐵人賽 自我挑戰組 DAY 26
從門外漢到前端新手 系列 第 26

技術 Day22 CSS:IFC(Inline formatting context)

上一篇我們知道了block box會參與BFC的佈局 ; 這篇所說的IFC則是inline box所參與的佈局,而IFC是block contaner box創...

鐵人賽 自我挑戰組 DAY 25
前端新手進化史 系列 第 25

技術 flex 3

在上一篇文章中介紹了 flex-direction 以及主軸(main axis)與副軸(cross axis)的概念,今天將介紹 flex-wrap、fle...