search

laurentlin17 / Notes_Huli_Code_Camp

0 stars 0 forks source link

第三週直播筆記：主要跟 CSS 有關 #9

Open laurentlin17 opened 5 years ago

laurentlin17 commented 5 years ago

2018.9.20 (四) 直播筆記

直播主題

box model display 3 種 inline-block 並排時的注意事項

box model

想要盒子寬高設定包含 padding box-sizing: border-box

display

inline

在 Inline 上設定寬高、上下 padding/margin 沒有作用(元素位置) 但實際上，上下的 padding 會影響 border、bcg

block

每個元素都占一行，每個東西都可以調。

inline-block

對外像 inline，對內像 block

inline-block 排版的小陷阱

div 之間有空格，會解讀成要 render 空格

</div>
<div>

解法

可以用註解

</div><!--
--><div>

CSS Naming

BEM(Block Element Modifier)

有關切板時要如何命名每個 block 記得用兩底線 "__" 分隔

任何內容視覺上要分成一塊一塊群組 每塊群組內再細分成更小塊

首先用 div 包一個大範圍，細部再分小塊

以一個 fb 貼文為例
.post
->post__header // 標題、頭圖、日期資訊
--->post__avatat // 頭圖
--->post__info  
----->post__author // 標題
----->post__timestamp // 日期資訊
--->post__option // 右上角的功能選項
--->post__content // 內文
// 直接把內容複製上來
--->post__preview // 下面的預覽內容
----->post__thumbnail // 縮圖
----->post__preview-info // 
------->post__preview-domain // Medium.com
------->post__preview-title
// 直接把預覽標題文字複製上來

再來處理上面的 padding 對於上面的區塊設一個新的 div class 叫做 top，設定padding。

再來處理 preview 區域 postpreview-info // 設定背景顏色、padding postpreview-domain // 設定 font-size: 10px(Chrome 最小顯示到 12px) post__preview-title // font-weight: bold

再來處理上面的區域 .post // 設定 width, border(px solid #ccc) / positoin: relative (可供 option 的 absolute 定位) post__option // positioin: absolute / top: 5px / right: 5px

內文的換行問題：可以搭配 Chrome Dev. 去選擇換行方式 post__content // white-line: pre-line

再來處理頭貼、標題位置 post_header // display: flex / align-item: center(置中) post__avatar // bcg: red / width / heigh / border-radius // margin-right

再來處理內文位置 要注意可能首行文字有空白，導致空行要修正。 post__content // margin-top: 10px