Neil的部落格

Note

Situation 1. 在使用css 套用html tag時

從一個宏觀的角度開始大區塊的做切割，

切割完再從細節進行切割，沒切到的讓它當作之後的擴充空間。

Situation 2.

在使用text-overflow:hidden的問題

text-overflow必須作用於有width層級的html tag，否則沒有用處，

所以如果是display: flex 必須在底下tag額外設定 min-width or max-width or width

雖然連結內說可以使用min-width:0; 來表示他是width層級，可是目前經過測試沒有效果。

而且在設定時，要針對特定的html tag設定，例如<p></p>

而不是單純設在外層。外層與內層是不同的。

另外，須設定額外屬性

white-space: nowrap; 讓他不會自動斷航，而凸出去

overflow-x: hidden， 凸出去的藏起來。

參考連結，

https://segmentfault.com/q/1010000011115918

Situation. 3  到底該怎麼center比較好

第一種flex justify-content: center ;  align-items:center;

第二種block包tag margin: auto auto: 讓他自己去抓左右上下距離平均

最後一種:假設是文字可以設定line-height與height等高，文字自然的切齊，(Youtube上 看到的切版方式)