chunwen's blog

前言： 其實網路上已經有很多文章在介紹 SMACS 、OOCSS、BEM，而這篇文章存在的目的，就是以一個新手的角度來試著理解這三大架構如何幫助我們管理CSS。 OK，在開始介紹前，我們必須了解到這些設計方法存在的目的是 為了方便管理Css 所衍伸出來的。而所謂好的CSS撰寫該包含哪些特性呢? 這邊引用Kuro 大大之前分享- 漫談 CSS 架構方法 中提到的幾點概念 良好Css架構應包含 1.預測-Predictable 2.複用-Reusable 3.維護-Maintainable 4.延展-Scalable 先記住這幾項原則後，我們來分別簡略介紹這三大設計法則 OOCSS ( Object OrIEnted CSS) 設計基本原則有兩大點： 結構與樣式分離(Reusable) 內容與容器分離(Scalable) 結構與樣式分離 參考卡斯柏老師圖解 說明： 結構可以看成button中的width、height、padding等基本結構;樣式則可以看成外觀表現上如：border、background-color 案例： --從下面程式碼，我們可以發現button、box有部分css內容是重複的，這樣撰寫的話會造成日後若要調整顏色、外框粗細等樣式不便。此外，重複的css也造成檔案肥大。 #button {   width: 200px;   height: 50px;   padding: 10px;    border: solid 1px #ccc;   background: linear-gradient(#ccc, #222);   box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } #box {   width: 400px;   overflow: hidden;    border: solid 1px #ccc;   background: linear-g...

前言：Flex的出現幫助我們可以更方便的進行網頁排版，我們可以透過 can i use 這個網站發現，Flex有良好的兼容性(超過九成網站都有支援)，而一開始學習Flex的時候建議大家可以一步步將每個範例跟練習實做一遍，如此才會更快上手喔~~ 接著我們就開始Flex介紹吧! Flex 中分為外容器與內元件(如下圖)，並靠調整外容器、內元件屬性達成以下常見目的： 1.垂直置中 2.水平置中 3. 三欄內容不等高，但希望外框顯示為等高 父元素設定display:flex 4.三個物件水平等距排列(數值彈性) justify-content:space-around 補充：flex各種預設值 flex-direction：row justify-content：flex-start align-items：stretch flex-wrap：nowrap flex-shrink:1; flex-grow:0; order:0; 以下將開始介紹 1. 軸線 2. 對齊方法  3.外部元件特性  4.內部元件介紹 軸線(分為兩種) flex排版起頭觀念，搞懂後基本上就會30%。flex軸線主要有分兩種 1.主軸線 2.交錯軸 而 主軸線 是 可以調整方向的。所以 這時我們就要介紹到一個外部屬性 flex-direction flex-direction:row(一開始預設狀態) flex-direction:row-reverse   >>交錯軸上方是Start 下方是End flex-direction:column   flex-direction:column-reverse      >>交錯軸左方是 Start 右方是End Tips：記得是主軸線調整方向喔!交錯軸永遠都跟主軸垂直 練習一下： https://codepen.io/chunwen/pen/OqLKWw 外層元素與內層元素簡介 Flex 外容器屬性：  display：fle...

前端學習資源整理 提供想踏入前端面試、自我學習、作品準備方向    coggle連結 六角免費前端大補帖(超多豐富資源 推薦)    coggle連結 Amos老師三十天金魚都能懂的網頁設計入門   youtube連結 保哥給 JavaScript 新手的建議與學習資源整理   文章 個人覺得淺顯易懂，蠻適合新手學習觀念 彭彭老師的課程 youtube連結 每個單元都簡短、清晰，也非常適合新手上手 Alex 宅幹嘛 youtube連結