搜索
您的当前位置：首页正文

CSS定位、vertical-align、overflow、vi

来源：哗拓教育

<h2>目录</h2>

</br>

<a href="#001">1.定位</a>
　　<a href="#001_1">1.定位概述</a>
　　<a href="#001_2">2.静态定位</a>
　　<a href="#001_3">3.相对定位</a>
　　<a href="#001_4">4.绝对定位</a>
　　<a href="#001_5">5.绝对定位与浮动、标准流</a>
　　<a href="#001_6">6.固定定位</a>
<a href="#002">2.vertical-align、overflow、visibility</a>
　　<a href="#002_1">1.vertical-align</a>
　　<a href="#002_2">2.overflow</a>
　　<a href="#002_3">3.visibility</a>

</br>

<h3 id="001">1.定位</h3>

<h6 id="001_1">1.定位概述</h6>

定位可以解决盒子与盒子之间的层叠问题。
　　有四种定位方式。
　　static：元素框正常生成。块级元素生成一个矩形框，作为标准流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
　　relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
　　absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
　　fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

</br>

<h6 id="001_2">2.静态定位</h6>

所有的标准流中的元素都是静态定位。

</br>

<h6 id="001_3">3.相对定位</h6>

position: relative;
　　需要配合top,left,right,bottom属性使用。
　　如果设置了相对定位并且设置了trbl属性，那么将来盒子会以盒子原本的位置发生偏移。以.two盒子原来的位置发生偏移，在水平方向向右移动了20像素，在垂直方向也向下移动 了20个像素。
　　1.相对于原来的位置进行平移。
　　2.设置了相对定位的元素在页面上占据了位置（没有脱离标准流）。
　　3.如果没有trbl会以标准流显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>

    <style type="text/css">
        
        div{
            width: 200px;
            height: 100px;
        }

        .cls_div1{
            background-color: red;
        }

        .cls_div2{
            background-color: black;
            position: relative;
            top: 10px;
            left: 100px;
        }

        .cls_div3{
            background-color: blue;
        }

    </style>

</head>
<body>
    
    <div class="cls_div1"></div>
    <div class="cls_div2"></div>
    <div class="cls_div3"></div>

</body>
</html>

图：

Paste_Image.png

</br>

<h6 id="001_4">4.绝对定位</h6>

position:absolute　绝对定位 (trbl==top、right、bottom、left)
　　使用的时候也要配合trbl属性来使用
特点：
　　 1.如果这个元素没有父元素，那么将来trbl是相对于body来定位的
　　2.如果绝对定位的元素有父元素，但是父元素没有定位，那么这个时候trbl还是相对于body来定位的。
　　 3.如果绝对定位的元素有父元素，而且父元素有定位（非static），那么这个绝对定位的元素偏移是以自己的父元素为基础。
　　 4.绝对定位之后的元素在页面不会占据位置（绝对定位以后的元素会脱离标准流）。
　　5.如果没有设置trbl属性会以标准流显示。

总结：看脸型。
　　写页面的时候用的最多的既不是绝对定位也不是相对定位，而是绝对定位与相对定位一起使用：（规范）子绝父相。
　　子元素使用绝对定位，父元素使用相对定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>

    <style type="text/css">

    *{
        margin: 0px;
        padding: 0px;
    }

    div{
        width: 150px;
        height: 150px;
        min-height: 100px;
        min-width: 100px;
        color: white;
        font-size: 22px;
    }
        
/* 1.父元素没有定位 */
        .cls_div1{
            background-color: blue;
        }

        .cls_div2{
            background-color: black;
        }

        .cls_div3{
            background-color: red;
            position: absolute;
            top: 10px;
            left:10px;
        }
/* 2.父元素有相对定位 */
        .cls_div4{
            background-color: blue;
            position: relative;
        }

        .cls_div4_1{
            background-color: green;
            position: absolute;
            top: 50px;
            left: 50px;
        }

    </style>

</head>
<body>

    <div class="cls_div1"></div>
    <div class="cls_div2"></div>
    <div class="cls_div3"></div>
    <div class="cls_div4">
        <div class="cls_div4_1">cls_div4_1</div>
    </div>

</body>
</html>

图：

Paste_Image.png

</br>

<h6 id="001_5">5.绝对定位层级与浮动、标准流</h6>

1.浮动会脱离标准流但是依旧占据页面空间，但是定位会完全不占据页面空间，定位的元素层级使用属性z-index来控制，z-index相同的后面覆盖前面，z-index数值大的层数越高（图1）。
　　2.浮动与绝对定于以后的div都不再会独占一行，在浏览器页面窗口缩小时，浮动元素会调整自己显示的位置，一行不够会换到下一行显示，但是绝对定位的元素还会继续在这个位置，即使窗口缩小到自身放不下（图2）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位2</title>

    <style type="text/css">
        
        body{
            position: relative;
        }

        div{
            width: 200px;
            height: 200px;
            color: white;
        }

        .cls_div1{
            background-color: red;
        }

        .cls_div2{
            background-color: black;
            float: left;
        }

        .cls_div3{
            background-color: blue;
            position: absolute;
            top: 50px;
            left: 30px;
            z-index: 1;
        }

        .cls_div4{
            background-color: green;
            float: left;
        }

        .cls_div5{
            background-color: gray;
            position: absolute;
            top: 100px;
            left: 70px;
        }

        .cls_div6{
            background-color: yellow;
            position: absolute;
            top: 150px;
            left: 100px;
            z-index: 1;
        }

    </style>

</head>
<body>

    <div class="cls_div1">div1标准流</div>
    <div class="cls_div2">div2左浮动</div>
    <div class="cls_div3">div3绝对定位</div>
    <div class="cls_div4">div4左浮动</div>
    <div class="cls_div5">div5绝对定位</div>
    <div class="cls_div6">div6绝对定位</div>
    
</body>
</html>

图1：

Paste_Image.png

图2：

Paste_Image.png

</br>

<h6 id="001_6">6.固定定位</h6>

position:fixed。
　　使用的时候要配合trbl属性来使用。
　　特点：
　　1.不管页面有多大，trbl永远是相对于浏览器的边框来的。
　　2.固定定位的元素也脱离了标准流（不在页面上占据位置）
　　3.没有trbl在页面上不会显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>

    <style type="text/css">
        
        img{
            position: fixed;
            top: 50px;
            left: 10px;
        }

    </style>

</head>
<body>
        <div class="cls_div1">
            <p>begin</p>
            <hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/>
            <p>end</p>
        </div>
        ![](img/bg.jpg)
</body>
</html>

图：无论页面如何上下滚动，固定定位只相对与浏览器的页面框。

</br>

</br>

<h3 id="002">2.vertical-align、overflow</h3>

<h6 id="002_1">1.vertical-align</h6>

vertical-align
　　如果文本与图片在同一行中，文字与图片的默认对齐方式是文字的基线对齐图片的底线。vertical-align与display:inline-block一起使用效果最好。

Paste_Image.png 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字与图片对齐方式</title>

    <style type="text/css">
        
        *{
            padding: 0px;
            margin: 0px;
        }

        img{
            width: 200px;
            height: 200px;
            vertical-align: middle;
        }

    </style>

</head>
<body>

    文字![](img/bg.jpg)
</body>
</html>

图：

Paste_Image.png

</br>

<h6 id="002_2">2.overflow</h6>

Paste_Image.png 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow</title>

    <style type="text/css">
        
        .cls_div1{
            height: 100px;
            width: 80px;
            border: 1px solid black;
            overflow: auto;/* auto情况下，内容大于盒子，就会以滚动条进行查看 */
        }

    </style>

</head>
<body>
    
    <div class="cls_div1">
        内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>
    </div>


</body>
</html>

图：

Paste_Image.png

<h6 id="002_3">3.visibility</h6>

visibility:hidden可以隐藏元素但是页面还会保留原来的位置，但是display:none隐藏了元素并且不占页面位置。

Paste_Image.png 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>visibility</title>

    <style type="text/css">
        
        div{
            color: white;
            font-size: 20px;
            width: 200px;
            height: 100px;
        }

        .cls_div1{
            background-color: black;
        }

        .cls_div2{
            visibility: hidden;/* 隐藏还占位置 */
            background-color: red;
        }

        .cls_div3{
            display: none;  /* 隐藏并且不占位置 */
            background-color: blue;
        }

        .cls_div4{
            background-color: green;
        }

    </style>

</head>
<body>
    
    <div class="cls_div1">div1</div>
    <div class="cls_div2">div2</div>
    <div class="cls_div3">div3</div>
    <div class="cls_div4">div4</div>

</body>
</html>

图：

Paste_Image.png

</br>
</br>
</br>

</br>
</br>
</br>

Copyright © 2019- huatuo2.com 版权所有
湘ICP备2023021991号-2

Top