定位与几个常用的属性

定位分两部分

　　定位模式：

　　　　静态定位:static

　　　　　　　　　(具备标准流的条件)

　　　　相对定位：relative 自恋狂 1.相对于自己原来的位置进行移动

　　　　　　　　　　　　　　　　2.不脱离标准流,占有原来的位置

　　　　绝对定位：absolute

　　　　　　　　　　1.如果没有父元素或者没有给父元素设置定位那么就会以浏览器定位

　　　　　　　　　　2.如果父元素以及之上的前辈(固定相对绝对关系)，则以最近一级有定位的父元素来作为参考

　　　　　　　　　　3.脱离标准流，不再占有原来的位置

　　　　固定定位：fixed

　　　　　　　　　　1.相对与浏览器的可视窗口来决定的

　　　　　　　　　　2.脱离标准流,不再占有原来的位置

　　　　　　　　　　固定定位的方式小算法：先让可视窗口的百分之50，然后版心盒子的margin-left一半使小盒子到版心的右边的位置

　　　　粘性定位：sticky

　　　　　　　　　　1.以浏览器的可视窗口移动元素 2.占有原先的位置3.必须添加top left right bottom其中一个才有效

　　边偏移上下左右：确定该元素的最终的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位两部分组成 定位模式+边偏移上下左右</title>
    <style>
        /*body {*/
        /*    height: 3000px;*/
        /*}*/
        .box1{
            position: relative;
            top: 100px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: deeppink;
        }
        .box2 {
            width: 100px;
            height: 50px;
            background-color: #a180ff;
        }

        .father {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: #ff6b75;
        }

        .son {
            /*父元素相对定位 子元素绝对定位 子绝父相*/
            position: absolute;
            left: 50px;
            bottom: 50px;
            width: 100px;
            height: 100px;
            background-color: #b9ffa7;
        }

        .dj {
            position: fixed;
            top: 0;
            right: 0;
        }

        .box3 {
            position: fixed;
            left: 50%;
            margin-left: 405px;
            margin-top: 200px;
            width: 50px;
            height: 100px;
            background-color: #ff171d;
        }

        .box4 {
            width: 800px;
            height: 500px;
            margin: 0 auto;
            background-color: magenta;
        }

        .box5 {
            /* 粘性定位 */
            position: sticky;
            top: 0;
            width: 800px;
            height: 50px;
            background-color: #84ffd2;
            margin: 100px auto;
            text-align:center ;
        }

        .box {
            position: absolute;
            top: 0;
            left: 0;
        }

        .xiongda {
            width: 200px;
            height: 200px;
            background-color: magenta;
            z-index: 1;
        }

        .xionger {
            width: 100px;
            height: 100px;
            background-color: lime;
            z-index: 2;
        }


        .qiangge {
            width: 50px;
            height: 50px;
            background-color: blue;
        }

        .boxes {
            position: absolute;
            left: 50%;
            margin-left: -100px;

            top:50%;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>
<body>

<div class="box1"></div>
<div class="box2"></div>

<div class="father">
    <div class="son"></div>
</div>

<div class="dj">
    <img src="background-img-repeat.png" alt="">
</div>

<div class="box3"></div>
<div class="box4">版心的盒子 固定定位</div>

<div class="box5">粘性定位</div>

<div class="box xiongda">熊大</div>
<div class="box xionger">熊二</div>
<div class="box qiangge">光头强</div>

<p>怎么让绝对定位的盒子水平居中和垂直居中</p>
<div class="boxes"></div>
</body>
</html>

隐藏与显示的几个属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏可见性</title>
    <style>
        .box1, .box2{
            width: 100px;
            height: 100px;
            background-color: #ff5ab4;
        }
        .box1 {
            /*隐藏 不占用原来的位置*/
            /*display: none;*/
            /*隐藏 但是要占用原来的位置*/
            /*visibility: hidden;*/
            /*溢出操作 会发生的情况*/
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box1">
        visible 默认值。内容不会被修剪，会呈现在元素框之外。
        hidden	内容会被修剪，并且其余内容是不可见的。
        scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
        auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
        inherit	规定应该从父元素继承 overflow 属性的值。</div>
    <div class="box2">2</div>
</body>
</html>

定位与几个常用的属性

猜你喜欢