2020.0330知识总结

知识总结

回顾：
（1） 定位属性：position
属性值：static（默认定位）
Absolute(绝对定位)
Relative(相对定位)
包含块设置：
给父元素添加position：relative；形成参照物。
给子元素添加position：absolute；进行位置移动。
定位层次关系：z-index：（属性值为数字，数字越大越靠上）
（2） 绝对定位与相对定位的区别：
1：参照物：
绝对定位参照物：已经添加定位的父元素
相对定位参照物：自身默认的位置
2：布局流：
绝对定位不占据空间。脱离布局流。
相对定位占据空间，不脱离布局流。
一、固定定位
属性：position：；
属性值：fixed
参照物：以整个浏览器窗口为参照物。
特点：不占据空间，脱离布局流。
让一个元素在浏览器窗口中上下左右居中：
办法1：position：fixed；
Left：50%；right：50%
Margin-left：-元素宽度一半；
Margin-right：-元素高度一半；
办法2：position：fixed；
Left：0；right：0；
Bottom：0；top：0；
Margin：auto；
二、粘性定位
属性：position：；
属性值：sticky
执行逻辑：默认情况下，当浏览器窗口滚动条不滚动，当前元素没有超出整个浏览器窗口的时候，执行的position:relative;如果元素超出当前窗口则应用的是position:fixed;

注：如果块状元素没有设置宽度的时候，添加position：absolute；或者position：fixed；出现宽度被内容撑开。
三、锚点
超链接的一种。
作用：能实现在同一个页面内实现不同位置的跳转。
描述：让锚点绑定id名称的元素回到浏览器窗口的最顶端。
< 标签 id=””>< /标签>
< a herf=”#绑定元素的id名称”>< /a>
四、pc端宽高自适应
Pc端宽度和高度的自适应问题：
之前的项目宽度和高度都是固定的宽高。
有时候我们希望，写html结构的宽和高，能适应不同的分辨率，不同的设备，不同的内容增删，使我们的项目更加的灵活。
1:宽度自适应
默认情况下块状元素，当width（宽）不设置的时候，或者width：100%；当前元素的宽跟随父元素的变化。
2：高度自适应
高度自适应第一种情况：
需求1：当内容增加的时候 ，内容能把容器撑开。
需求2：当内容极少或者没有内容的时候，让容器保持一个最小高度。
（1） 当元素height（高）不去设置或者是设置成height:auto;元素高度是被内容撑开的。（该方法只能满足需求1）
（2）最小高度设置：
Min-height：；
能满足需求1和需求2。
拓展（了解）：
Min-height：； IE的低版本不支持。
但是，IE6默认的会把height解析成最小高度。