# T1-new-v2 code review ###### tags: `好想工作室` 2022.03.03（Thu.）（佳萱） ``` CSS： 1.vertical-align的default是對齊baseline >practice：用vertical-align去排列H2O 2.選擇器再熟練 3.<main>的部份可以用百分比去做排版 4.width: fit-content（好用！ 5.元素的預設位置在靠左上方 6.min-width可以直接下在整個<body>上，不用一個個去下 7.<footer>中li的vertical-align: middle沒用處 8.float清除浮動的方式：display: flow-root（好用！ >清除浮動的原因：BFC >可以看規範W3C L8,L9,L10 >也可以看yachen IT 鐵人版 其他： 1.試著不用術語去解釋自己是怎麼切版、為什麼這樣切 ``` **** # <font color="#3881a1">CSS</font> ## 1. vertical-align的default * default：baseline * 適用於：inline-level、table-cell ## 2. 選擇器 > [CSS selectors MDN](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Selectors) * 後代選擇器： ```css= A B{css內容} ``` * 『空格』用以選擇某個元素後代的元素。 * 作用於A元素的++所有後代++B元素。 * 子代選擇器： ```css= A>B{css內容} ``` * 『>』用以選擇某個元素後代的元素。 * 作用於A元素的++第一代++後代B元素。 * 一般兄弟選擇器： ```css= A~B{css內容} ``` * 『~』用以選擇某個元素之後同層級的元素。 * 作用於A元素後++同層級++的B元素。 * 相鄰兄弟選擇器： ```css= A+B{css內容} ``` * 『+』用以選擇緊接在後的元素，並共享父元素。 * 作用於緊跟在A元素後的B元素。 ## 4. width: fit-content 將元素寬度收縮為內容寬度（下在父元素，寬度會符合子元素寬度） ## 5. 元素的預設位置 左上角 ## 6. min-width可以下的位置 min-width不需要個別下在每一個區塊上（例如header、main、article、footer等等），而是直接下在`<body>`上 因為下的min-width都一樣，可以統一下在一個地方，這樣也會比較好管理（例如說我現在要修改min-width，就不必一一去修改，而是找body的min-width修改就可以了）。 ## 8. float清除浮動的方式 在父元素下了float之後，想清除浮動，可以直接在同個地方下『display: flow-root;』即可。 > 1. 清除浮動的原因：BFC > 2. 可以看[規範W3C](https://www.w3.org/TR/CSS22/Overview.html#minitoc) L8,L9,L10 > 3. 可以看[yachen IT 鐵人版](https://ithelp.ithome.com.tw/users/20120740/ironman/2632?page=1) > 4. [CSS 原理 - Block Formatting Context](https://yachen168.github.io/article/Block-formatting-context.html#more) **** # <font color="#3881a1">其他</font> ## 1. 試著不用術語去解釋 試著不用術語去解釋自己是怎麼切版、為什麼這樣切 * 為什麼裡面還要一層container？ container用來排位置，讓版面置中 * 為什麼不直接下在外面（例如說header）？ 如果直接在外面置中的話，背景顏色沒辦法處理 * section-container背景有顏色，所以用padding推出去，而非用margin * conatainer用來排版，content用來放元素