CSS学习笔记七---定位 & 精灵图

VIP文章阿茶阿茶

已于 2022-08-21 14:57:02 修改

阅读量798

点赞数 1

分类专栏： CSS 文章标签：学习

于 2022-08-21 14:56:17 首次发布

本文链接：https://blog.csdn.net/Flora_hsx/article/details/126213243

版权

一：知识点

1：定位属性用法总结

2：绝对定位---参照物是浏览器的第一屏

a：没有父盒子，或者父盒子没有定位

相对于浏览器左上角位置来定位

b：父盒子有定位

相对于父盒子来定位，子绝父相

以下为注：

盒子设置了绝对定位，则之前设置的居中显示将无效；相对定位则不会。

3：固定定位fixed----适合用于展示广告，参照物是浏览器当前窗口

4：粘性定位sticky---适合做吸顶效果

position: sticky;

top:0px;（你希望它到哪个位置的时候做定位就怎么设置）

注：写三角形

a：画三角形第一步：

    <style>
        div{
            width: 100px;
            height: 100px;
            border-top: 20px solid red;
            border-left: 20px solid blue;
            border-right: 20px solid green;
            border-bottom: 20px solid yellow;
            margin: 0 auto;
        }