portfolioweb-1

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;

.sections{

width:100%;

height:calc(100vh - 70px);

background-color: lightblue;

position: relative;

top:70px;

overflow-y: scroll;

scroll-snap-type: y mandatory;

>*{

width:100vw;

height:calc(100vh - 70px);

scroll-snap-align: start;

}

}

 

6. scrollbar-width 在chrome中不work

https://stackoverflow.com/questions/59638500/scrollbar-width-none-not-working-in-firefox-71-to-hide-scrollbars-while-allo

*::-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