# 嬿媜 1. 設立外框只要用width 不要height 2. float是繞圖排文的專屬 可以搭配clear可以研究一下 3. 物件之間不要有小空隙 線條要乾淨並且對齊 如同平面圖 研究white-space 4. h1~h6 這是有優先級 不是代表字體大小 5. logo會有連結 所以要加a tag 6. 要想到連接的關係 比方banner 因為他們是兄弟姊妹關係 所以要加ul 7. BFC在好好研究一下 8. transform是給動畫用 如果想要調整img大小就給加上div調整寬高度 9. 兩個父元素要間隔在用margin去推開 如果子元素就用padding調整位置 10. margin collapse不僅僅是只有父元素垂直會發生 假設p 字體本身有上下margin 如果再加magin 會融合 11. html的class命名方式在研究 12. 如果別人要換img 要防止新img爆出框 可以設定width height 還有object-fit 可以研究一下 13. a tag 用＃是回到最上 ＃＃是保留在原地 14. 熟稔margin padding 15. button要記得cursor 16. img src連結圖片前面要加./imege/..... 17. outline來檢查框 18. verticle-alige研究 19. colume研究 搭配break-inside 20. **Chris會問很多細節 所以要知道自己在幹什麼** 其他 * cd..回上一頁 * ctrl+R 重整頁面 # 晉凡 排版目前就論畫面還行 再多了解HTML語意結構 padding要做到左右對稱 不能大小邊 研究如何不挖東牆補西牆 更深入了解display玩法 h1可以把logo圖片也包覆 也會優化SEO section 跟 article要好好篩選 進凡個人做法是 如果有h2之類的標題 他會以article為主 # PAM 主題：把事情單純化 改掉推來推去的壞習慣 - 在一塊container區域，不要推來推去，把區塊的複雜性降低，假設日後接案子，業主說這邊大一點，那是不是兩邊div都要調整才能達到理想效果 - 排版原則，至少知道自己的每一部要怎麼處理，對日後修改方便 - img建議用div包起來，預防後面換圖會遇到的問題 - 文字都建議用恩`<p>`span標籤建議是排在文字或圖片後面在用 - height元素盡量不用，用子元素自然去推開 - ＋號的運用在熟悉 比方li+li - 建議設定px為原則，不然單位太多就會看起來很雜 - 在物件使用float時，因為有文字，所以右邊div會被擋住，如果只是單純色塊，那右邊的div就會被吃掉 - 三大主角 header main footer 特例fat-footer 所以不要讓標籤脫離這主角，都必須建立在裡面 - ##./image 相對位置 這個需要在釐清 - 下載外掛prettier 可以檢查是否有tag遺漏之類的情形 - 在開始css美化前的動作，＊{} body{} 稱為reset，所以a tag的text-decoration:none可以也設在這，後續不用在針對性編輯省事 - ##BFC觀念 - button也可以用a去處理 - PAM覺得columes不可空 建議找尋其他作法 - text-align-last也可以作到排版目的 - footer 用vertical align處理 --- --- # 鵬化 - ##CSS選擇器群組的問題 - format sitting --- - ##class標籤使用時 有space跟無space 差異 簡單來說就是當出現一堆子孫 你要叫誰 怎麼叫 (可能日後文本立大 好管理問題) 有space 等於針對性地叫後代 指定後代 假設 : <div class="grand male"> coco <div class="father male"> <p>yolo</p> <div class="child john"> <p href="">1</p> <p href="">1</p> <p href="">1</p> </div> <div class="child cena"> <p href="">1</p> <p href="">1</p> <p href="">1</p> </div> </div> </div> 我現在是grand 我要叫john cena 可以.grand .child{} 如果我只要針對john=.grand .john 沒space 等於是第一人稱 選取自己 疑問 : 是否是大項目才會遇到如此選取方式 --- - reset can move to new css flie - reset 可以全下或依個人需求 要有使用觀念 - ##html 階層排法 鵬化覺得好閱讀 --- - class裡面不要加上語意化標籤 ex : `<h3 class="head_h3">` 如果日後有人把h3改成別的 就爆了 - 如果有語意化標籤也不用使用class 有疑問 如果內部有兩個section呢 - ##CSS　select在了解 選取技巧 - ａtag missing ## - 要知道在還沒有排版元素出來前的排版方法, 向text-align float是給文字的 所以要知道這個觀念 - ##border-box content-box 差異,以及這兩個在調整數值後對box model有甚麼影響, 如果使用border-box 他是怎麼往內扣,會影響日後計算 - contant-box 無預設狀態就是 依據設定的寬高決定 範圍會根據padding border 改變 而且若width設定200px 文字20px 那十個字就會排滿.==在不更改 box-sizing 的情況下，其實 width / height 的作用就是設定內容資料的範圍空間，我們就稱為 content-box== - Border-box 依據寬高決定 不會被padding給影響 border padding都會往內長, 假設Padding設太大超出設定的寬高 則會被padding覆蓋.==width / height 的作用範圍就是指到 border 這個 box 的範圍了，我們就稱為 border-box== --- - T2測驗會比較多用到position --- - ##css權重問題釐清 權重等級.CSS分數 : 火影：戰鬥力1-0-0-0-0=!importent 暗部：戰鬥力1-0-0-0=inline-style 上忍：戰鬥力1-0-0=ID 中忍：戰鬥力1-0=class 中忍：戰鬥力1-0=:pseudo class 中忍：戰鬥力1-0=:屬性選擇器 下忍：戰鬥力1=element 學員：戰鬥力0=* 再來 >假設在CSS中 ![image](https://hackmd.io/_uploads/SJ85e7LqT.png) 這樣就是有下忍*2 中忍*2 這樣就可以理解為 0-2-2 !important > CSS 行內樣式(inline style) > ID > Class、偽類(pseudo-class)、屬性選擇器(attribute) > Element>* 疑問 : 所以我為了要某個屬性outstanding 我就可以瘋狂包覆加權重囉? --- - ##有新的tag 可以去理解 - 頁面等比縮放問題 知識點 : 有新的tag 可以去理解 css權重問題釐清 border-box content-box 差異 --- --- # Chris 20240205/code Review time 3h >主旨:個人感覺他的底層邏輯是，希望透過引導的方式，讓我們有解決問題的能力 ### 1. 只要是html、css裡面的所有東西，都可以變成提問的目標，以下為實際案例 - <!DOCTYPE html>是什麼意思 - UTF-8是什麼意思 大概了解嗎 - `linear-gradient()` 跟CSS有甚麼關係 - `background-image: linear-gradient(#ffba54 50%, #f99303 50%);` 請問#ffba54這個大概怎麼操作 50%又是什麼意思 >如果有不懂，從W3C、MDN手冊中的規範中找尋，Chris不太能接受別人寫的blog ### 2. Chris詢問邏輯，假設你遇到了一個問題或有錯誤，以下是他可能會問的 - 是怎麼產生的 "或" 為什麼產生，是誰的問題，推理概念 - 該怎麼定義或問題，比方是內容把容器吃掉? - 知道後再返推去處理問題 >過程中可以查閱資料 >在這階段時，他會要求不要先去改code修正，好的習慣是先建立推理能力 ### 3.如果你有在瀏覽器上面安裝外掛，這些內容會顯示在開發者工具裡面 Chris會問你這是什麼code ### 4.其他Chris指證我的問題 - 解決版面變小問題 - 首先是viewport的鍋 解法在body 加上min-width - 父.子元素，他會以"容器.內容"來稱呼 - UTF-8是甚麼，去了解一下，就先以已知去理解 可以搜尋以下 - 寬字元 - 窄字元 - unicode - utf-8 - 字元集 - 不要用群組去處理元素預設的東西，比方`h1,h2,p,ul {margin:0;}`我這裡是為了要去除block的預設， >這裡Chris說遇到再改就好，而且可能會產生移植code的問題(自己的Code能否跟別人的匹配) - 觀念:inline內容只能塞單一個字，如果放超過兩個會爆炸 - 解法 inline-block - 製作nav bar邏輯 - 先決定a這個元素包含鼠標觸及範圍所需要多大， - 決定頭跟尾的距離 - 確定後再用數學去編排 - 注意:不要去判斷要多少然後慢慢推~! - 命名不要用縮寫，比方header_pic這是錯的，要寫header_picture - object-fit怎麼的邏輯，為甚麼要100%，請閱讀W3C - fontawesome的logo其實是套了一層圖片的字體，所以為什麼可以用font-size就是這個邏輯 補充 : - 面對Chris就像面對客戶，當客戶有疑問或者發現你的錯誤時，你要怎麼解釋這個事情，可以用你理解的發是表達，也可以照規範 - 邊改code邊推理會浪費很多時間，所以先發現問題，查找完在解決