前端學習

1. scss的引入，需要安裝scss

2. css中的calc的運用，可以直接在css中進行運算，但是操作符要留空出來！

https://stackoverflow.com/questions/19599832/why-height-calc100-100px-is-not-working

3.postition:fix 會時本元素坍塌，挨著元素會沖上來，不知為啥。

原因： 元素會被移出正常文檔流，并不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現在的每頁的固定位置。fixed 屬性會創建新的層疊上下文。當元素祖先的 transform, perspective 或 filter 屬性非 none 時，容器由視口改為該祖先。

postion基本屬性，其default值是static，即文件流的方式

4.z-index:2

用在topbar，因為topbar是被期望貼在最頂端的部分，否則會被蓋住

5. scroll-snap-type

調節scorllbar的scroll方式 注意這個scroll里面也許有很多div。每個div也可以scroll-snap-align，用來指示頁面最終停留在哪里.

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type。

注意；這里的scroll-snap-type一開始失效，因為沒有添加overflow-y:scroll;

*::-webkit-scrollbar {

width: 0px;

}

 

7. css變量設定

https://blog.csdn.net/weixin_34252090/article/details/93018402

 

 

 但是這個辦法和我視頻里看到不一樣，視頻是scss文件，https://www.sass.hk/skill/sass121.html。感覺更簡單。

這里又引出別的問題，我發現css中總有一些不太明白含義的特殊字符。

這其實是關于css選擇器的問題 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors

以及媒體的查詢：@media @import

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries