CSS学习归纳5

最新推荐文章于 2024-06-14 14:36:26 发布

SPIRIT_SYF

最新推荐文章于 2024-06-14 14:36:26 发布

阅读量1.3k

点赞数 45

文章标签： css 学习 html

本文链接：https://blog.csdn.net/SPIRITE_SYF/article/details/137481096

版权

就像之前说的网页布局的核心内容分为3大点：1、盒子模型 2、浮动 3、定位。我们已经学习了盒子模型和浮动。现在我们来学习最后一个核心内容定位。

一、为什么学习定位

1、实现某个元素自由在盒子里移动，并且压住其他盒子。

2、固定栏的使用，并且压住其他盒子。

二、什么是定位

1、将盒子定在某一个位置，就是摆放盒子。

2、定位=定位模式+边偏移。

3、使用position属性设置：static静态，relative相对，absolute绝对，fixed固定。

4、边偏移（相对于父元素某条边的举例）：top，bottom，left，righ。

三、静态定位

1、默认的定位方式，无定位。

2、选择器{position：static}。

3、按照标准流的性质摆放。

4、几乎就是标准流，所以不常用。

四、相对定位（非脱标）

4.1 相对定位性质

1、根据原来的位置计算的，参考原来的位置

2、选择器{position：relative}

3、移动以后原来的位置，保留，其他的盒子不会占有这个位置

4、应用：没有脱标，给绝对定位当爹

4.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>
        .box1 {
            position: relative;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>

    <h1>相对定位验证</h1>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

五、绝对定位（脱标）

5.1 绝对定位的性质

1、相对于祖先元素移动。

2、如果没有祖先元素，则是以浏览器为定位（Document文档）。

3、如果父亲没有定位，是一个标准，或者是浮动，则还是以浏览器为定位（Document文档）。

4、如果父亲有定位，则以父亲为参考。

5、如果是多级的情况，可能上一级没有定位，那么就以最近一级的祖先作为参考。

6、绝对定位会脱标。

5.2 4种情况

1、没有父标签，以浏览器为定位。

2、父亲没有定位，是一个标准，或者是浮动，则还是以浏览器为定位

3、父亲有定位，则以父亲为参考。

4、如果是多级的情况，可能上一级没有定位，那么就以最近一级的祖先作为参考

5.3 无父标签、父标签无定位

针对前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>
        .son1 {
            position: absolute;
            top: 300px;
            left: 400px;
            width: 200px;
            height: 200px;
            background-color: aquamarine
        }

        .father2 {
            width: 500px;
            height: 500px;
            background-color: red;
        }

        .son2 {
            position: absolute;
            top: 400px;
            left: 500px;
            width: 200px;
            height: 200px;
            background-color: aqua
        }

        .father3 {
            float: right;
            width: 500px;
            height: 500px;
            background-color: red;
        }

        .son3 {
            position: absolute;
            top: 500px;
            left: 600px;
            width: 200px;
            height: 200px;
            background-color: pink
        }
    </style>
</head>

<body>
    <h1>绝对定位性质</h1>
    <div>
        <ul>
            <li>1、相对于祖先元素移动</li>
            <li>2、如果没有祖先元素，则是以浏览器为定位（Document文档）</li>
            <li>3、如果父亲没有定位，是一个标准，或者是浮动，则还是以浏览器为定位（Document文档）</li>
            <li>4、如果父亲有定位，则以父亲为参考</li>
            <li>5、如果是多级的情况，可能上一级没有定位，那么就以最近一级的祖先作为参考</li>
            <li>6、绝对定位会脱标</li>
        </ul>
    </div>
    <h1>无父亲</h1>
    <div class="son1">无父亲</div>

    <h1>有父亲，但是标准流</h1>
    <div class="father2">
        <div class="son2">有父亲，但是标准流</div>
    </div>
    <h1>有父亲，但是浮动</h1>
    <div class="father3">
        <div class="son3">有父亲，但是浮动</div>
    </div>
</body>

</html>

5.4 父级有定位、祖先有定位

父亲有定位，则以父亲为参考。如果是多级的情况，可能上一级没有定位，那么就以最近一级的祖先作为参考。

为上述情况做了如下的验证

<!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>
        .father4 {
            position: relative;
            top: 500px;
            left: 500px;
            width: 800px;
            height: 800px;
            background-color: aqua;
        }

        .father3 {
            position: relative;
            top: 500px;
            left: 500px;
            width: 700px;
            height: 700px;
            background-color: black;
        }

        .father2 {

            width: 600px;
            height: 600px;
            background-color: blue;
        }

        .father1 {

            width: 500px;
            height: 500px;
            background-color: red;
        }

        .father {
            position: relative;
            top: 200px;
            left: 400px;
            width: 500px;
            height: 500px;
            background-color: red;
        }

        .son1 {
            position: absolute;
            top: 20px;
            left: 10px;
            width: 200px;
            height: 200px;
            background-color: aquamarine
        }
    </style>
</head>

<body>

    <h1>父亲有定位</h1>
    <div class="father">
        <div class="son1">父亲有定位</div>
    </div>
    <h1>有祖先</h1>
    <div class="father4">
        <div class="father3">
            <div class="father2">
                <div class="father1">
                    <div class="son1">祖先有定位</div>
                </div>
            </div>
        </div>
    </div>
    <h1>相对定位、绝对定位的使用场景</h1>
    <div>1、定位的口诀，子绝父相。子用了绝对定位，父亲必须相对定位。</div>
    <div>2、绝对定位，不占有位置，能盖住别的盒子。</div>
    <div>3、父亲如果不定位，子就没办法实现。而且父亲必须占有位置。所以父亲必须占有相对定位</div>


</body>

</html>

5.5 相对定位、绝对定位的使用场景

1、定位的口诀，子绝父相。子用了绝对定位，父亲必须相对定位。

2、绝对定位，不占有位置，能盖住别的盒子。

3、父亲如果不定位，子就没办法实现。而且父亲必须占有位置。所以父亲必须占有相对定位.

六、固定定位（脱标）

固定定位，顾名思义固定在某个位置不发生变化。更准确的表达是：浏览器滚动时元素的位置不改变。

6.1 固定定位特点

1、以可视窗口作为参考

2、与父元素没有任何关系

3、窗口滚动也保持可视位置的定位

4、脱标，不占有原有位置

5、本质上类似于绝对定位

6.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>
        .dj {
            position: fixed;
            top: 200px;
            right: 50px;
            ;
        }
    </style>
</head>

<body>
    <h1>固定定位 fixed</h1>
    <div>可以将元素固定到可视区的某一位置。主要使用：浏览器滚动时元素的位置不改变</div>
    <h1>固定定位特点</h1>
    <ul>
        <li>1、以可视窗口作为参考</li>
        <li>2、与父元素没有任何关系</li>
        <li>3、窗口滚动也保持可视位置的定位</li>
        <li>4、脱标，不占有原有位置</li>
        <li>5、本质上类似于绝对定位</li>
    </ul>
    <h1>固定定位举例</h1>
    <div class="dj">
        <img src="images/pvp.png">
    </div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>

    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>

    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>

    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>

    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>

    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>

    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>
    <div>窗口滚动也保持可视位置的定位</div>



</body>

</html>

6.3 固定定位技巧-固定到版心的右侧

1、让盒子left：50% 到可视区（版心）的一半位置

2、再margin-left：版心宽度的一半

<!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>
        .bx {
            background-color: aqua;
            margin: 0 auto;
            width: 800px;
            height: 1400px;
        }

        .dibu {
            position: fixed;
            left: 50%;
            margin-left: 405px;
            width: 150px;
            height: 150px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <h1> 固定定位小技巧-固定到版心右侧 </h1>
    <ul>
        <li>1、让盒子left：50% 到可视区（版心）的一半位置</li>
        <li>2、再margin-left：版心宽度的一半</li>

    </ul>
    <div class="dibu">前往底部</div>
    <div class="bx">版心盒子</div>


</body>

</html>

七、粘性定位

这一定位的使用一般是针对导航栏，使得滚动时导航栏依旧可以显示在页面中。

7.1 sticky粘性定位特点

1、粘性定位以可视窗口做定位。

2、占有原先的位置，非脱标。

3、必须有一个边偏移。

4、兼容性差，一般使用js书写。

<!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>
        .bx {
            background-color: aqua;
            margin: 0 auto;
            width: 800px;
            height: 2400px;
        }

        .nav {
            position: sticky;
            top: 0px;

            height: 50px;
            background-color: blue;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <h1>sticky粘性定位特点</h1>
    <ul>
        <li>1、粘性定位以可视窗口做定位</li>
        <li>2、占有原先的位置，非脱标</li>
        <li>3、必须有一个边偏移</li>
        <li>4、兼容性差，一般使用js书写</li>
    </ul>
    <div class="nav">导航栏</div>
    <div class="bx"></div>

</body>

</html>

八、定位堆叠顺序

定位的堆叠顺序是可以指定的使用 {z-index：数值}。

1、数值越大，越在上。可正可负

2、如果数值一样，后来者居上

3、只是数字没有单位，反应等级

4、只有定位的盒子才有z-index属性

下面的案例：1、box1因为有z-index，大于box2所以压在box2上。否则按照逻辑则是box2在box1上。2、box3压在box2上，恰好满足了后来者居上。

<!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>
        .box1 {
            z-index: 1;
            position: relative;
            left: 50px;
            top: 50px;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        .box2 {

            position: relative;
            width: 200px;
            height: 200px;
            background-color: blue
        }

        .box3 {
            position: relative;
            top: -50px;
            left: 50px;
            width: 200px;
            height: 200px;
            background-color: red
        }
    </style>
</head>

<body>
    <h1>定位的堆叠顺序 z-index：数值</h1>
    <ul>
        <li>1、数值越大，越在上。可正可负</li>
        <li>2、如果数值一样，后来者居上</li>
        <li>3、只是数字没有单位，反应等级</li>
        <li>4、只有定位的盒子才有z-index属性</li>
    </ul>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
</body>

</html>

九、绝对定位实现水平垂直居中

当拥有一个相对定位的父级时，如何使用绝对定位使得子类居中。

1、以父亲的左边沿为基准，移动50%。

2、然后以父亲的上边沿为基准，移动50%。

3、然后设置margin-top，margin-left 子标签的一半

<!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 {
            position: relative;
            top: 200px;
            left: 400px;
            width: 500px;
            height: 500px;
            background-color: red;
        }

        .son1 {
            position: absolute;
            left: 50%;
            margin-left: -100px;
            top: 50%;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: aquamarine
        }
    </style>
</head>

<body>

</body>
<div class="father">
    <div class="son1">父亲有定位</div>
</div>

</html>

十、定位的性质

1、行内元素加了，position以后，就可以直接加长宽。

2、块级元素绝对或者固定定位，不指定长宽，默认内容的大小。

3、脱标的元素不会有塌陷。

十一、浮动的本质

设计浮动的初衷，是实现文字环绕。虽然脱标，会压住其他的盒子，但是对于<p>标签实现的是文字环绕。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动产生原来的目的是做文字环绕效果</title>
    <style>
        .box {
            float: left;
            width: 500px;
            height: 500px;
            background-color: aqua;
        }

        .box1 {
            position: absolute;
            width: 500px;
            height: 500px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <h1>浮动不会压住文字内容</h1>
    <div class="box"></div>
    <p>11111111111111111111111111111111111111，浮动的本质是文字环绕</p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <h1>会压住文字内容</h1>
    <div class="box1"></div>
    <p>11111111111111111111111111111111111111</p>

</body>

</html>

十二、网页布局总结

1、标准流：元素默认的排布方式，一般用于垂直排布。

2、浮动：让多个块级盒子显示在一行，实现多个块级盒子的水平显示。

3、定位：具备层叠的概念。实现叠加的显示。

十三、隐藏显示

13.1 显示隐藏元素之display（脱标）

1、display: none; 这个就是隐藏。2、display: block;就是显示的意思。以前用这个是转化为块级元素。

<!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>显示隐藏元素之display</title>
    <style>
        .box1 {
            /* 使得元素隐藏，并不占有原来的位置 */
            /* display: none; */
            /* 除了转化为块级之外，还有显示元素的意思 */
            display: block;
            background-color: aqua;
            width: 200px;
            height: 200px;
            margin: 0 auto;

        }

        .box2 {
            background-color: aquamarine;
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <h1>元素隐藏</h1>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

13.2 显示隐藏元素之visibility（非脱标）

1、inherit 继承父级的可见性。

2、visible 对象可视。

3、hidden 对象隐藏。

4、collapse 设置表格的行和列。

<!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>显示隐藏元素之visibility</title>
    <style>
        .box1 {
            /* 隐藏但是保留原有位置 */
            /* display: none;用的更多 */
            visibility: hidden;
            background-color: aqua;
            width: 200px;
            height: 200px;
            margin: 0 auto;

        }

        .box2 {
            background-color: aquamarine;
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <ul>
        <li>1、inherit 继承父级的可见性</li>
        <li>2、visible 对象可视</li>
        <li>3、hidden 对象隐藏</li>
        <li>4、collapse 设置表格的行和列</li>
    </ul>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

13.3 显示隐藏元素之overflow

这个相对前两个就比较好理解一些。就是对溢出的部分加以处理。

性质如下：

1、是对溢出的部分显示和隐藏。

2、visible不剪切也不增加滚动条。

3、auto 超出了会增加滚动条。

4、hidden 不显示超出的内容。

5、scroll 没超出也显示滚动条。

注意：定位的盒子慎用 overflow：hidden。

<!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>显示隐藏元素之overflow</title>
    <style>
        .box1 {

            background-color: aqua;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            /* 使得溢出的部分全部隐藏 */
            overflow: scroll;

        }

        .box2 {
            background-color: aquamarine;
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
    </style>
</head>

<body>

    <ul>
        <li>1、是对溢出的部分显示和隐藏</li>
        <li>2、visible不剪切也不增加滚动条</li>
        <li>3、auto 超出了会增加滚动条</li>
        <li>4、hidden 不显示超出的内容</li>
        <li>5、scroll 没超出也显示滚动条</li>
        <li>注意：定位 的盒子慎用 overflow：hidden</li>
    </ul>
    <div class="box1">
        11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
    <div class="box2"></div>
</body>

</html>

SPIRIT_SYF

关注

45
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
CSS学习归纳5

1、将盒子定在某一个位置，就是摆放盒子。2、定位=定位模式+边偏移。3、使用position属性设置：static静态，relative相对，absolute绝对，fixed固定。4、边偏移（相对于父元素某条边的举例）：top，bottom，left，righ。1、标准流：元素默认的排布方式，一般用于垂直排布。2、浮动：让多个块级盒子显示在一行，实现多个块级盒子的水平显示。3、定位：具备层叠的概念。实现叠加的显示。
复制链接

扫一扫