定位
- 固定定位 position:fixed;
- 参考物 浏览器窗口
- 移动距离 left/right/bottom/top
- 特点
- 不会跟随滚动条进行滚动
- 脱离文档流
- margin: auto;失效
- 宽度自适应会失效,需要重新设置宽度
- 应用场景
- 粘性定位 position:sticky;
- 参考物 浏览器窗口
- 移动距离 top
- 特点
- 未达到top值之前,普通元素,达到top值之后类似于固定定位
锚点
- 实现在同一个页面不同板块之间的跳转
- 利用a标签的href属性和id名(必须是id名)进行联系
<a href="#box">跳转</a>
<div id="box"></div>
高度塌陷
伪元素
- 给父元素添加最后一个孩子,内联元素
元素::after{
content: “”;必须
} - 给父元素添加第一个孩子 内联元素
元素::before{
content:"";必须
} - 选中第一个字符
元素::first-letter{
css属性:css属性值;
} - 选中第一行
元素::first-line{
css属性:css属性值;
}
引入外部样式表
<style>
@import url(路径);
</style>
- 区别
- @import只能引入css文件,link不只可以引入css文件
- @import的css文件会在结构加载完成之后,才开始加载,link是结构和样式同时加载
- @import只能在ie5以上支持,link都支持