CSS 定位学习

时间：2019-12-20 01:12:11 阅读：97 评论：0 收藏：0 [点我收藏+]

标签：新浪设置 charset img body ima inf gif js特效

一 CSS布局的三种机制

1.标准流

2.浮动(盒子脱离标准流浮起来盒子水平排列)

3.定位(将盒子定在某一位置自由的漂浮在其他盒子上面 css 离不开定位特别是js特效)

二为什么使用定位

技术图片

要实现以上效果，不使用定位是非常困难的

将盒子定在某一个位置，自由的漂浮在其他盒子(包括标准流和浮动之上)

所以我们脑海中应该有三种布局机制的上下顺序

标准流(最底层) ->浮动的盒子在中间层->定位的盒子在最上层

三定位详解

定位也是用来布局的，有两部分组成

定位 = 定位模式 + 边偏移

1> 边偏移

在CSS中通过 top bottom right left 属性定义元素的边偏移

技术图片

定位的盒子有了边偏移才有价值一般情况下凡是有定位的地方都有边偏移

2> 定位模式(定位的分类)

在CSS中通过position属性定义元素的定位模式语法如下

选择器 {position:属性值}

定位模式是有不同的分类的在不同的情况下我们使用不同的定位模式

技术图片

1:静态定位(static) 了解

静态定位是元素默认的定位方式无定位的意思相当于 border 里面的none属性就是无定位

静态定位按照标准流特性摆放位置没有边偏移

静态定位在布局时我们几乎是不用的

2:相对定位(relative) 重要

相对定位是元素相对于它原来的位置来说的

技术图片

相对定位的特点:

相对于自己原来的位置移动

原来在标准流中占有的位置继续占有后面的盒子仍然以标准流的方式对待它

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相对定位</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            
        }
        .two {
            background-color: purple;
            /* 定位 = 定位模式 + 边偏移 */
            /* 虽然盒子走了 但是在标准流中仍然还有他的位置 没有脱标 */
            position: relative;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="two"></div>
    <div></div>
</body>
</html>

3:绝对定位(absolute)-重要

绝对定位是元素以带有定位的父级元素来移动位置

父级元素没有定位就以浏览器为标准定位

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位</title>
    <style>
        .father {
            width: 350px;
            height: 350px;
            background-color:pink;
            margin: 100px;
            /* 标准流的盒子 总是以父级为准移动位置 */
            /* 绝对定位 如果父级没有定位 那么绝对定位的盒子 会以我们文档为准 
            浏览器为准移动位置 离自己最近的已经定位的为准 */
            /* 如果有一下代码 则以父亲为准移动位置 */
            /* position: relative; */
        }

        .son {
            /* 如果父级没有定位 则以浏览器为标准 */
            width: 200px;
            height: 200px;
            background-color: purple;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">

        </div>
    </div>
</body>
</html>

绝对定位的特点

是以带有定位的父级元素来移动位置如果父级没有移动则以浏览器文档为标准移动

不保留原来的位置完全是脱标的

定位的口诀

子绝父相 :子级是绝对定位父级要用相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子绝父相</title>
    <style>
        .up {
            position: relative;
            width: 1000px;
            height: 90px;
            background-color: pink;
            
        }

        .down {
            width: 1000px;
            height: 150px;
            background-color: #000;
        }
        .arr-left {
            position: absolute;
            top: 25px;
            left: 0;
            width: 40px;
            height: 40px;
            background-color: purple;

        }
        .arr-right {
            position: absolute;
            top: 25px;
            right: 0;
            width: 40px;
            height: 40px;
            background-color: purple;
        
        }
    </style>
</head>
<body>
    <div class="up">
        <img src="../images/img.jpg" alt="">
        <div class="arr-left"></div>
        <div class="arr-right"></div>
    </div>
    <div class="down"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 310px;
            height: 190px;
            border: 1px solid #ccc;
            margin: 100px auto;
            padding: 10px;
            position: relative;
        }
        .top {
            position: absolute;
            top: 0;
            left: 0;
        }

        .bottom {
            position: absolute;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <img class="top" src="../images/top_tu.gif" alt="">
        <img src="../images/adv.jpg" alt="">
        <img class="bottom" src="../images/br.gif" alt="">
        
    </div>
</body>
</html>

4:固定定位(fixed) 重要

固定定位时绝对定位的一种特殊形式。

1 完全脱标--完全不占位置

2 只认浏览器窗口+边偏移属性来设置元素的位置

跟父元素没有任何关系不随滚动条滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>固定定位</title>
    <style>
        .box {
            position: relative;
            width: 300px;
            height: 300px;background-color: pink;
            margin: 100px auto;
        }
        /* 逃出盒子 固定定位和父亲没关系 只认浏览器的可视区域*/
        .box img {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../images/sun.jpg" alt="" width="150px">
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新浪广告固定定位</title>
    <style>
        .box {
            width: 1002px;
            margin: 0 auto;
        }
        .ad-l {
            position: fixed;
            left: 0;
            top: 180px;
        }
        .ad-r {
            position: fixed;
            right: 0;
            top: 180px;
        }
    </style>
</head>
<body>
    <img class="ad-l" src="../images/ad-l.png" alt="">
    <img class="ad-r" src="../images/ad-r.png" alt="">
    <div class="box">
        <img src="../images/box.png" alt="">
    </div>
</body>
</html>

5 定位(position)的扩展

>1 绝对定位的盒子居中

注意：绝对定位固定定位的盒子不能通过设置 margin :auto 设置水平居中

在使用绝对定位中要实现水平居中可以使用 left:50% 在左移自身宽度的一半来实现居中

第一步. left:50px 第二步margin-left: 负盒子的一半宽度

垂直居中

第一步 top:50% 第二步 margin-top 负盒子的一半高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位盒子居中</title>
    <style>
        .box {
            position: absolute;
            /* 第一步 */
            left: 50%;
            /* 第二步 */
            margin-left: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

>2 堆叠顺序(z-index)

在使用定位布局时可能会出现盒子重叠的情况

加了定位的盒子默认后来者居上后面出现的盒子会压在前面出现的盒子上

使用z-indexc层叠等级属性可以调整盒子的堆叠书序如下图所示

技术图片

z-index 的特性如下

1.属性值：正整数负整数或者 0 默认是0 数值越大盒子越靠上

2.如果属性值相同则按照书写顺序后来居上

z-index 只能应用于相对定位绝对定位固定定位里面其他标准流浮动静态定位无效

3>定位改变display属性

display 是限时模式可以改变下显示模式的方式如下

1.可以使用inline-block 转换为行内块元素

2.可以用浮动float默认转换为行内块元素 (类似并不完全一样浮动是脱标的)

3.绝对定位和固定定位也和浮动类似默认转换特性转换为行内块

所以说一个行内元素如果加了浮动固定定位绝对定位就可以接受宽高

CSS 定位学习

标签：新浪设置 charset img body ima inf gif js特效

原文地址：https://www.cnblogs.com/huanying2000/p/12064704.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

CSS 定位学习

一 CSS布局的三种机制

二 为什么使用定位

三 定位详解

2> 定位模式(定位的分类)

1:静态定位(static) 了解

2:相对定位(relative) 重要

3:绝对定位(absolute)-重要

4:固定定位(fixed) 重要

5 定位(position)的扩展

>1 绝对定位的盒子居中

>2 堆叠顺序(z-index)

3>定位改变display属性

二为什么使用定位

三定位详解