定位，锚点,精灵图与自适应

定位

【1】相对定位：position:relative,不脱离文本（原本的位置不被其他元素占据），top:100px,left:100px(原本的位置相对于定位之后的位置）
【2】绝对定位：position：absolute,脱离文本，没有父元素或父元素没有定位时参照浏览器第一窗口；当有父元素时参照物为父元素（给父元素添加position:relative，来给父元素定位）{子绝父相}
【3】固定定位：position:flex，脱离文本，不随滚动条滚动
【4】粘性定位：position:sticky,可以设置负值

三角案例

当一个盒子四个方向边框都设置颜色时，交叠部分会平分

当宽度减小到0时会出现三角形(width:0px)

通过将其他三个方向边框颜色改为rgba（0，0，0，0）或者transparent或者将四个边框颜色改为透明，再给一个边框附上颜色形成一个三角形

定位里的层级

• 遵循后来居上原则
• 通过z-index来设置层级，z-index值越大，层级越大，越靠上显示，可以为负值
• 在父子关系中，父元素被覆盖，子元素显示，给父元素z-index失效，此时可以给子元素设置负的z-index来改变父元素的覆盖
• 在兄弟关系中可以用z-index来改变定位层级

行内元素改为块元素

• display:block
• position:absolute
• float:left

定位控制元素水平垂直居中

定位与浮动的区别

• float:半脱离，文字环绕
• absolute：全脱离，不会出现文字环绕

锚点

锚点作用：页面不同区域的跳转，使用a链接。
     <a href=“#锚点名字”></a>
     <div id="锚点名字“><div>

精灵图

自适应

宽高自适应

• 最小高度min-height
• 最大高度max-height
• 最小宽度min-width
• 最大宽度max-width

浮动元素之父元素高度自适应

1. 固定高度，如果浮动过多，换行出现问题
2. 增加空标签，不利于代码可读性
3. overflow，会隐藏溢出的元素

最优解

伪元素div：：first-letter{font-size:30px}(两个冒号）
注：.box::after{content:"";  clear:both  display:block  width:0;  height:0;   visibility：hidden；}

• display：none，不占为隐藏
• visibility：hidden，占位隐藏

窗口自适应

html，body{height：100%}（窗口大小改变不会形成滚动条）