TOP

前端技术之_CSS详解第六天--完结(二)

2019-09-03 03:32:03 【大中小】浏览:50次

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: orange; margin: 100px; position: relative; /*right: -300px;*/ bottom: 300px; } </style> </head> <body> <div></div> </body> </html>

可以用left、right来描述盒子右、左的移动；

可以用top、bottom来描述盒子的下、上的移动。

↘：

1 position: relative;

2 top: 10px;

3 left: 40px;

↙：

1 position: relative;

2 right: 100px;   → 往左边移动

3 top: 100px;

↖：

1 position: relative;

2 right: 100px;

3 bottom: 100px;    → 移动方向是向上。

↗：

1 position: relative;

2 top: -200px;       → 负数就是相反的方向，如果是正，就是下边，如果是负数就是上边

3 right: -200px;

↗：

1 position: relative;

2 right: -300px;

3 bottom: 300px;

完全等价于：

4 position: relative;

5 left: 300px;

1 bottom: 300px;

如图，有几种相对定位的移动方法？

方法1：

1 position:relative;

2 top:100px;

3 left:200px;

方法2：

1 position:relative;

2 bottom:-100px;

3 right:-200px;

方法3：

1 position:relative;

2 top:100px;

3 right:-200px;

方法4：

1 position:relative;

2 bottom:-100px;

3 left:200px;

三、绝对定位

绝对定位比相对定位更灵活。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: yellowgreen;
        }
        .box2{
            background-color: skyblue;
            position: absolute;
            top: 100px;
            left: 140px;
        }
        .box3{
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

3.1 绝对定位脱标

绝对定位的盒子，是脱离标准文档流的。所以，所有的标准文档流的性质，绝对定位之后都不遵守了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        span{
            position: absolute;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <span></span>
</body>
</html>

绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block;就可以设置宽、高了：

1  span{
2  position: absolute;
3  top: 100px;
4  left: 100px;
5  width: 100px;
6  height: 100px;
8  }

3.2 参考点

绝对定位的参考点，如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角：

<!

首页上一页 1 2 3 4 5 6 下一页尾页 2/6/6
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：CSS3实现多种背景效果	下一篇：Vue中scoped css和css module比较