CSS笔记(14)

2022-09-20 19:30:42 浏览数 (1)

CSS定位

为什么需要定位?

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

定位

将盒子定在某一个位置,所以定位也是在摆盒子,按照定位的方式移动盒子.

定位=定位模式 边偏移.

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

  1. 定位模式

定位模式决定元素的定位方式,它通过CSS的position属性来设置,其值可以分为四种.

值

语义

static

静态定位

relative

相对定位

absolute

绝对定位

fixed

固定定位

2.边偏移

边偏移就是定位的盒子移动到最终位置,有 top, bottom, left, right 4个属性.

边偏移属性

示例

描述

top

top : 80px

定义元素相对其父元素上边线的距离

bottom

bottom : 80px

定义元素相对其父元素下边线的距离

left

left : 80px

定义元素相对其父元素左边线的距离

right

right : 80px

定义元素相对其父元素右边线的距离

1.静态定位:

静态定位是元素的默认定位方式,无定位的意思.

语法:

选择器 { position : static ; }

  • 静态定位按照标准流特性摆放位置,它没有边偏移.
  • 静态定位在布局时很少用到.

2.相对定位

相对定位是元素在移动位置的时候,是相对于它原来的位置来说的.

语法:

选择器 { position : relative ; }

  • 它是相对于自己原来的位置来移动的.(移动位置的时候参照点是自己原来的位置.)
  • 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它.(不脱标,继续保留原来位置)

3.绝对定位

绝对定位是元素在移动位置的时候,是相对于它的祖先元素来说的.

语法:

选择器 { position : absolute ; }

  • 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档.)
  • 如果祖先元素有定位(相对/绝对/固定),则以最近一级的有定位祖先元素为参考点移动位置.
  • 绝对定位会脱标,不会保留原来的位置.

子绝父相: 子级使用绝对定位,父级使用相对定位

  • 子级绝对定位,不会占有位置,可以放到父盒子里面的任意地方,不会影响其他的兄弟盒子.相当于浮动起来了,脱离了标准流,不占用原来的位置.
  • 父盒子需要加定位限制子盒子在父盒子内显示.
  • 父盒子布局时,需要占有原来的位置,否则下面的盒子会升上来,被压在下面.因此父级只能是相对定位.

当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到.

4.固定定位

固定定位是元素固定于浏览器可视区的位置.主要使用场景:可以在浏览器页面滚动元素时元素的位置不会改变.

语法:

选择器 { position : fixed ; }

  • 以浏览器的可视窗口为参照点移动元素.
    • 跟父元素没有任何关系
    • 不随滚动条滚动
  • 固定定位不再占有原先的位置

固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位.

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

有时候定位不一定是按照浏览器可视区的四条边来定位的,有时候会靠着版心的一侧定位.比如下图中的小箭头图标

小算法:

  1. 让固定定位的盒子left:50%,走到浏览器可视区(也可以看做版心)的一半位置.
  2. 让固定定位的盒子margin-left:版心宽度的一半距离,多走版心宽度的一半位置就可以让固定定位额盒子贴着版心右侧对齐了.

做出来就是类似的效果.

5.粘性定位(了解)

粘性定位可以被看做是相对定位和固定定位的混合

语法:

选择器 { position : sticky ; }

  • 以浏览器的可视窗口为参照点移动像素(固定定位特点)
  • 粘性定位占有原先的位置(相对定位特点)
  • 必须添加top/left/right/bottom其中一个才有效.

跟页面滚动搭配使用,兼容性比较差,IE不支持(该死的IE浏览器!!)

定位总结:

定位叠放次序: z-index

在使用定位布局时,可能会出现盒子重叠的情况.此时,可以使用z-index来控制盒子的前后次序.

语法:

选择器 { z-index : 1 ;}

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

绝对定位的盒子居中

想要实现绝对定位盒子的居中,想要用原来的margin:auto是会失效的(相对定位是可以的!!!),我们可以试验一下.

可以看到是无效的

这个时候我们采取的方法是:先让盒子left:50%,然后距离左边距一半自身盒子宽度的距离,水平居中和垂直居中的原理是相同的.

定位拓展:

绝对定位和固定定位也和浮动类似.

  • 行内元素添加绝对或固定定位,可以直接设置高度和宽度.
  • 块级元素添加绝对或固定定位,如果不给宽度或者高度,默认大小是内容的大小(不加定位的话宽度是父级元素的宽度).

浮动元素,绝对定位(固定定位)元素的都不会触发外边距合并的问题.

绝对定位(固定定位)会完全压住盒子.

浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片),因为浮动产生的初衷就是做出文字围绕的效果.但是绝对定位(固定定位)会压住下面标准流所有的内容.

案例

接下来,我们做一个淘宝轮播图的案例,但是图片的切换效果还要等到学了JS才能实现,我们现在只能先做一个简略版(一张图片上左右两侧有小箭头,可以切换图片,下边有一条小的导航栏,也可以切换图片)

做完了,展示一下完整的代码:

代码语言：javascript复制
<!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>淘宝焦点图</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
        }
        li {
            list-style: none;
        }
        .tb-promo {
            position: relative;
            width: 520px;
            height: 280px;
            background-color: pink;
            margin: 100px auto;
            text-align: center;
            line-height: 30px;
        }   
        .tb-promo img {
            width: 520px;
            height: 280px;
        }
        /* 并集选择器可以将公共部分写在一起,节约代码 */
        .prev,
        .next {
             /* 加了绝对定位的行内元素可以直接设置宽度和高度 */
            position: absolute;
            top: 50%;
            width: 20px;
            height: 30px;
            background-color: rgba(0,0,0,.3);
            color: white;

        }
        .prev {
            left: 0;
            border-radius: 0 15px 15px 0;
        }
        .next {
            /* 如果一个盒子既有left属性也有right属性,默认执行left属性 */
            /* 同理,会执行top属性 */
            right: 0;
            border-radius: 15px 0 0 15px;
        }
        .promo-nav {
            position: absolute;
            bottom: 15px;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            background-color: rgba(255,255,255,.3);
            border-radius: 7px;
        }
        .promo-nav li {
            float: left;
            height: 8px;
            width: 8px;
            border-radius: 4px;
            background-color: #fff;
            margin: 3px;
        }
</style>
</head>
<body>
    <div class="tb-promo">
        <img src="../images/taobao.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>

注意: 如果一个盒子既有left属性也有right属性,默认执行left属性,同理,会执行top属性

今天先到这里吧,总共看了16个视频,效率还算挺高的,刚刚看了下B站的其他视频,又对要不要继续学前端产生了动摇,因为据说小企业的前端相当于全栈...我真的学得完,学得会吗?且后端需要强大的逻辑能力,我是肯定没有的...真的好害怕啊...但还是加油继续学吧...昨天又学了下Python,突然感觉忘记了好多东西,啥也不会了,我觉得我还是集中精力学习前端吧,赶紧把视频看完!

absolute auto fixed position static

0 人点赞