前端学习笔记：HTML&&CSS 第三天--定位、相对路径

定位（position）

固定定位（position: fixed;）
固定定位：加入该样式的标签，不会随着窗口的滚动而滚动。

 img{  
                position: fixed;/* 固定定位 */
                right:100px;
                bottom:100px;
            }

固定定位的参照物是当前窗口。
在调整位置时候，左（left）右（right）只能存在一个，上（top）下（bottom）也只能存在一个。

标签样式设置了固定定位之后，会脱离标准流，变成行内块。

固定定位居中的方式：

 span{
                width: 800px;
                height: 200px;
                background: red;
                position: fixed;
                /* 固定定位居中的方式 */
                left:50%;
                margin-left: -400px;/* width的值的一半 */
                top:50%;
                margin-top: -100px;/* height的值的一半 */
            }

相对定位（position: relative;）
相对定位：相对于自身位移，一般用来做微调

相对定位的参照物是自身。

标签样式设置成了相对定位后，会半脱离标准流，虽然标签的性质是没有改变的，但是却拥有四个坐标，而且占位（占的是原来的位置）。

<style>
            img{
                position: relative;
                top:100px;
            }
        </style>

绝对定位
绝对定位：一般实现的效果是一个标签放置在另一个标签的上面，子级绝对定位，父级相对定位。 可以把子级固定在父级的任何位置 。

标签样式在设置成了绝对定位后，会脱离标准流，标签边变成行内块，且不占位。

<style>
span{
                position: absolute;
                left: 20px;
                top:20px;
                background:yellow;
                width:40px;
                height: 40px;
                text-align: center;
                /* 文字垂直居中，设置行高等于当前标签的高度 */
                line-height: 40px;
                /* 增加圆角，值越大圆角越明显 值是50%的时候就是圆形*/
                border-radius: 50%;
                /* 旋转 deg度数单位  正值顺时针，负值逆时针 */
                transform: rotate(30deg);
                }
                </style>

相对路径

相对路径：相对于当前使用文件的页面地址，寻找图片和文档。

• 向下寻找：文件夹/文件夹
• 向上寻找：…/向上一级 …/…/向上两级