WEB前端学习日志第三周 Day1

WEB前端学习日志第三周 Day1

今日总结：通过今天的学习，共学习了5个知识点，分别是固定定位，用定位实现子元素在父元素中的剧中问题，粘性定位，锚点以及PC端网页的宽高自适应。并且解决了遗留下来的两个问题，分别是当banner图超出版心时的解决方法和轮播图的结构。

固定定位

固定定位很常见，几乎每个网页中都会涉及到，比如固定在网页右下角的回到顶部按钮。
position:fixed; 固定定位
a: 参照物：浏览器窗口。
b: 不占据空间，脱离布局流。

让一个元素在浏览器窗口左右上下居中？
第一种方法：
position:fixed;
left:50%;top:50%;
margin-left:减去元素宽度一半;
margin-top:减去元素高度的一半;

第二种方法：
position:fixed;
left:0;right:0;
top:0;bottom:0;
margin:auto;

锚点

锚点：
超链接的一种。
作用：能实现在同一个页面内实现不同位置的跳转。
描述：让锚点绑定id名称的元素回到浏览器窗口的最顶端。

<标签 id=""></标签>

用固定定位和锚点两个知识点做出了一个类似楼层的效果。
效果如下：

粘性定位

粘性定位一般作用在网页的导航条，导航条在网页还没滚动的超过他时会随着页面滚动，而随着网页向下滚动导航条就会一直处于网页最上方，像是固定了一样。
粘性定位：
position:sticky;

执行逻辑：
默认情况下：当浏览器窗口滚动条不滚动，当前元素没有超出整个浏览器窗口的时候
执行的position:relative;如果元素超出当前窗口则应用的position:fixed;

PC端网页的宽高自适应

PC端 宽度 和 高度的自适应问题：我们希望，写html结构的宽和高，能适应不同的分辨率、不同的设备、不同的内容增删，使我们项目更加的灵活。

默认情况下块状元素：
当width不设置的时候，或者width:100%;当前元素的宽跟随父元素的变化。
高度自适应第一种情况：
当元素height不去设置或者是设置成height:auto;
元素的高度是被内容撑开的。

需求1：当内容增加的时候，内容能把容器撑开。
需求2：当内容极少或者没有内容的时候，让容器保持一个最小高度。
最小高度的设置：
min-height:;

能满足1：当内容增加的时候，内容能把容器撑开。
能满足2：当内容极少或者没有内容的时候，让容器保持一个最小高度。

banner图超出版心时的解决方法

当banner图过于大或者过于长时，版心放不下，此时怎么办？
通过如下代码实现

轮播图的结构

轮播图在我刚学web时一直以为是图片在滚动，其实不然。
轮播图的显示效果其实是在一个div中有着好几张和这个div宽高相同的图片，而滚动的也只是这个包含图片的大div。
实现如下，这是我还处于学习的初级阶段，还不能让图片滚动起来，只是做一个效果的展示。


在网页中显示如下：