跟着pink老师学前端CSS-D6

最新推荐文章于 2022-11-07 17:59:55 发布

外面有点冷的时候

最新推荐文章于 2022-11-07 17:59:55 发布

阅读量163

点赞数

分类专栏：前端基础学习文章标签： css

本文链接：https://blog.csdn.net/weixin_46548238/article/details/118003365

版权

前端基础学习专栏收录该内容

15 篇文章 5 订阅

订阅专栏

1. 定位

1.1 为什么需要定位

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

1.2 定位组成

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。

定位模式：static/ relative/ absolute/

边偏移：top/ right/ bottom/ left

1.3 静态定位（static）

静态定位时元素的默认定位方式，无定位的意思。静态定位按照标准流特性摆放位置，没有边偏移。

position:static;

1.4 相对定位（relative）

相对定位是元素在移动位置的时候，是相对于它原来的位置来移动的。
原来在标准流的位置继续占有，后面的盒子仍然以标准流对待它，即它不脱标，仍在标准流之中。
相对定位的最典型应用是来限制绝对定位的。

.box1 {
    position: relative;
    top: 100px;
    left: 100px;
    width: 200px;
    height: 200px;
    background-color: pink;
}

.box2 {
    width: 200px;
    height: 200px;
    background-color: skyblue;
}

在这里插入图片描述

1.5 绝对定位（absolute）

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

绝对定位是元素在移动位置时，是相对于他的祖先元素来移动的。

如果没有祖先元素或祖先元素没有定位，它相对于浏览器移动。

.father {
    width: 300px;
    height: 300px;
    background-color: hotpink;
}

.son {
    position: absolute;
    top: 100px;
    left: 200px;
    height: 200px;
    width: 200px;
    background-color: aqua;
}

在这里插入图片描述

如果祖先元素有定位，则相对于最近一级有定位的祖先元素来移动。

.grandfather {
    position: absolute;
    width: 400px;
    height: 400px;
    background-color: yellow;
}

.father {
    width: 300px;
    height: 300px;
    background-color: hotpink;
}

.son {
    position: absolute;
    bottom: 10px;
    right: 20px;
    height: 200px;
    width: 200px;
    background-color: aqua;
}

在这里插入图片描述

绝对定位脱离标准流，不占有原来的位置。

1.6 子绝父相

子级绝对定位，不会占有位置，可以放到父盒子里面任何一个地方，不会影响其他的兄弟盒子。
父盒子需要加定位限制子盒子。
父盒子布局时需要占有位置，只有相对定位可以保留位置。

1.7 固定定位（fixed）

固定定位是元素固定于浏览器可视区的位置。
以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系，不随滚动条滚动。
固定定位是脱离标准流的，不占有原来的位置。

固定定位小技巧：固定在版心右侧位置

让固定定位的盒子left:50%走到浏览器可视区一半的位置；
让固定定位的盒子margin-left:版心宽度的一半距离。

.w {
    width: 800px;
    height: 1400px;
    background-color: hotpink;
    margin: 0 auto;
}

.fixed {
    position: fixed;
    left: 50%;
    /* 版心宽度为800，再走400，留5px的小缝隙 */
    margin-left: 405px;
    width: 50px;
    height: 100px;
    background-color: skyblue;
}

1.8 粘性定位（sticky）

粘性定位可以被认为是相对定位和固定定位的混合。经常用于导航栏刚开始时随着页面滚动而滚动，当接触到了页面上沿后就固定了。
以浏览器的可视窗口为参照点移动元素。（固定定位特点）
粘性定位占有原先的位置。（相对定位特点）
必须添加top、left、right、bottom其中一个才有效。

1.9 定位叠放次序z-index

选择器{z-index:1;}

数值可以是正整数、负整数或0，数值越大，盒子越靠上。
如果属性值相同，则按照书写顺序，后来者居上。
数字后面不能加单位。
只有定位的盒子才有z-index属性。

1.10 定位的扩展

1. 绝对定位的盒子居中

选择器{
	left:50%;
	margin-left:-(盒子宽度的一半)
}

2. 绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住他下面标准流的盒子，但是不会压住下面标准流盒子里面的文字和图片，但是绝对定位和固定定位会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果，文字会围绕浮动元素。

2. 淘宝轮播图案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0 0;
            padding: 0 0;
        }

        .tb-promo {
            position: relative;
            width: 520px;
            height: 280px;
            background-color: skyblue;
            margin: 100px auto;
        }

        .prev,
        .next {
            position: absolute;
            top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 30px;
            background-color: rgba(0, 0, 0, .3);
            color: #fff;
            text-align: center;
            line-height: 30px;
            text-decoration: none;
        }

        .prev {
            left: 0;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        .next {
            right: 0;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }

        .promo-nav {
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            border-radius: 7px;
            background-color: rgba(255, 255, 255, .3);
        }

        .promo-nav li {
            float: left;
            list-style: none;
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 4px;
            margin-left: 5px;
            text-align: center;
            line-height: 13px;
        }
    </style>
</head>

<body>
    <div class="tb-promo">
        <img src="images/bgimg.jpg" alt="">
        <a href="#" class="prev">&lt; </a>
        <a href="#" class="next">&gt; </a>
        <ul class="promo-nav">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

在这里插入图片描述

3. 网页布局总结

3.1 标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

3.2 浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。

3.3 定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

4. 元素的显示与隐藏

类似网站广告，点击关闭后就不见了，刷新页面又会出现。

本质：让一个元素在页面中隐藏或显示出来。

4.1 display属性

隐藏对象（不再占有原来的位置）
```
display:none;
```
显示对象
```
display:block;
```

4.2 visibility可见性

隐藏对象（继续占有原来的位置）
```
visibility:hidden;
```
显示对象
```
visibility:visible;
```

4.3 overflow溢出

overflow:visible/hidden/scroll/auto

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容与否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

4.4 土豆案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }

        .tudou:hover .mask {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
</body>

</html>

!](https://img-blog.csdnimg.cn/20210617222730136.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjU0ODIzOA==,size_16,color_FFFFFF,t_70#pic_center)
在这里插入图片描述

外面有点冷的时候

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
跟着pink老师学前端CSS-D6

1. 定位1.1 为什么需要定位浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。1.2 定位组成定位=定位模式+边偏移定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。定位模式：static/ relative/ absolute/边偏移：top/ right/ bottom/ left1.3 静态定位（static）静态定位时元素的默认定位方式，无定位的意
复制链接

扫一扫