定位

CSS中有3种基本定位机制：普通文档流、浮动、定位。普通文档流中元素的位置由元素在HTML中的位置决定。

定位的含义是允许定义某个元素脱离其原来在普通文档流应该出现的正常位置，而是设置其相对于父元素、某个特定元素或浏览器窗口本身的位置。

静态定位

position:static

静态定位是元素的默认定位方式，元素的位置由文档流决定。因此，在没有其他元素的情况下，静态定位的元素会按照文档流中的顺序放置，并且会占用文档流中的空间。无法通过位置偏移属性（top、bottom、left或right）来改变元素的位置。

<!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 type="text/css">
        div{
            width: 100px;
            height: 100px;
            background: green;
        }
        #two{
            background: red;
        }
        #three{
            background: blue;
        }
    </style>
</head>
<body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</body>
</html>

QQ截图20230828195814.png

相对定位

position:relative

相对定位是指元素的位置相对于其自身原先所在位置的左上角进行定位。虽然其移动到其他位置，但该元素仍占据原来未移动时的位置，该元素移动后会导致其覆盖其他的元素。

给红色块设置相对定位: QQ截图20230828201303.png

红色盒子设置了相对定位，距离原来位置的左边框150像素。

设置相对定位，可能导致覆盖文档流的元素。将上面css代码中修改为： #two{position: relative; background: red; top: 50px;}

QQ截图20230828201811.png 红色盒子设置了相对定位，距离原来位置的上边框50像素，将下面蓝色盒子覆盖了一部分。

绝对定位

position:absolute

绝对定位是脱离文档流的，不占据其原来未移动时的位置，是相对于父级元素或更高的祖先元素中有非静态定位并且离本元素层级关系上最近元素的左上角进行定位。如果在祖先元素中没有设置非静态定位时，就默认相对于body进行定位。

<!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 type="text/css">
        body{
            background: pink;
        }
        #box{
            width: 400px;
            height: 400px;
            background: gray;
        }
        #box div{
            width: 100px;
            height: 100px;
            background: green;
        }
        #box #one{
            position: absolute;
        }
        #box #two{
            background: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="one"></div>
        <div id="two"></div>
    </div>
</body>
</html>

QQ截图20230828204102.png 给绿色块设置绝对定位，但不写位置信息，这个时候绿色块虽然脱离了文档流，但是并没有去找定位原点，还是在父元素里面

设置位置信息，设置一个top: 0;，这时候绿色块的位置已经不再是以父元素为定位原点，而是去找非静态定位属性的祖先元素，因为没有把其他元素设置为非静态，所以一直找到html根元素，left的位置还是相对于父元素 QQ截图20230828204531.png

再添加left: 0;，则结果如下图所示： QQ截图20230828204636.png

一般子元素使用绝对定位时，就会给直接父元素添加相对定位——子绝父相。不给父元素设置相对定位也是可以的，因为找的是非静态的

定位元索的层叠次序

多个块元素形成多个层。可以使用z-index属性对这些层进行层叠设置。z-index属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

z-index仅能在绝对定位元素上起作用

给原来三个静态定位的块设置绝对定位： QQ截图20230828212501.png

修改css样式，使用z-index修改三个块的放置顺序，结果如下图所示： QQ截图20230828212540.png

固定定位

position:fixed

固定定位是绝对定位的一种特殊形式，是以浏览器窗口作为参照物。当对元素设置固定定位后，该元素将脱离文档流的控制，始终依据浏览器窗口的左上角来定义自己的显示位置，不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

QQ录屏20230828210906.gif

浮动

创建三个不浮动的块 QQ截图20230828213731.png

让绿色块向左浮动： QQ截图20230828213700.png 分析：红色块并没有消失，而是隐藏在绿色块下面。因为浮动元素会脱离原来的文档流，空间会释放，绿色块释放原来的空间后，红色块就会自动上去。

让绿色块向右浮动就可以看见红色块： QQ截图20230828214041.png

如果让红色块也向左浮动： QQ截图20230828214201.png 分析：同理蓝色块也没有消失，而是隐藏在绿色块下面

让三个块都向左浮动： QQ截图20230828214324.png 分析：绿色块向左浮动直到碰到包含块，另外两个块也向左浮动，直到碰到前一个浮动块

三个块都向左浮动，如果包含块太窄，水平排列只能容纳两个块，那么其他块向下移动，直到有足够的空间： QQ截图20230828214649.png

如果浮动元素的高不一样，那么向下移动的时候可能会被其他浮动元素“卡住”： QQ截图20230828214819.png

两栏布局

两栏布局是将网页分为左侧和右侧两列，这种布局方式也是网页中用的比较多的布局。两栏布局的实现方法如下：

创建两个层，再设置两个层的宽度
设置两栏并列显示

<!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 type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            width: 420px;
            height: 200px;
        }
        .left{
            background-color: green;
            float: left;
            height: 100%;
            width: 100px;
        }
        .right{
            background-color: red;
            width: 300px;
            height: 100%;
            float: left;
            margin-left: 10px;        
        }
        .content::after{
            content: "";
            display: block;
            visibility: hidden;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
</html>

QQ截图20230828215828.png

多栏布局

将一个元素中的内容分为两栏或多栏显示，并且确保各栏中内容的底部对齐，叫做多栏布局。多栏布局先把网页通过div块划分成多个区域，再在这些区域内添加相关内容，以达到网页制作的要求。

<!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 type="text/css">
        .header,.footer{
            width: 500px;
            height: 100px;
            background: red;
        }
        .main{
            width: 500px;
            height: 300px;
        }
        .left,.right{
            width: 100px;
            height: 300px;
        }
        .content-top,.content-bottom{
            width: 300px;
            height: 150px;
        }
        .left{
            background: yellow;
            float: left;
        }
        .content-top{
            background: orange;
        }
        .content-bottom{
            background: green;
        }
        .right{
            background: blue;
            float: right;
        }
        .content{
            float: left;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="main">
        <div class="left"></div>
        <div class="content">
            <div class="content-top"></div>
            <div class="content-bottom"></div>
        </div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

QQ截图20230828221202.png

过渡

过渡：使元素从一种样式转变为另一种样式时添加效果，如渐显、渐弱、动画快慢等（不使用Flash动画或者JS脚本的情况下）。

触发过渡的方式

:hover鼠标悬停触发
:active用户单击元素并按住鼠标时触发
:focus获得焦点时触发
@media触发，符合媒体查询条件时触发
点击事件，用户点击元素时触发

属性

transition-property属性：规定设置过渡效果的CSS属性名称
transition-duration属性：规定完成过渡效果需要多少秒或毫秒
transition-timing-function属性：规定速度效果的速度曲线
transition-delay属性：定义过渡效果何时开始

transition-property属性

过渡效果通常在用户将鼠标指针浮动到元素上时发生

语法格式： transition-property：none|all|property

none:没有属性会获得过渡效果
all:所有属性都将获得过渡效果
property:定义应用过渡效果的CSS属性的名称列表，列表以逗号分隔

transition-duration属性

默认值为0，表示没有过渡效果，其语法格式为： transition-duration：time;

transition-timing-function属性

linear:以相同速度开始至结束的过渡效果（cublic-bezier(0,0,1,1)）
ease:由慢变快，然后慢速结束的过渡效果（cublic-bezier(0.25,0.1,0.25,0.1)）
ease-in:以慢速开始的过渡效果（cublic-bezier(0.42,0,1,1)）
ease-out:以慢速结束的过渡效果（cublic-bezier(0,0,0.58,1)）
ease-in-out:以慢速开始和结束的过渡效果（cublic-bezier(0.42,0,0.58,1)）
cublic-bezier(n,n,n,n):自定义，可能的值是0-1之间的数值

transition-delay属性

属性值可以为正整数、负整数和0，当设置为负数时过渡动作会从该时间点开始，之前的动作被截断；设置为正数时，过度动作会延迟触发。其语法格式为： transition-delay:time;

给div块宽度和背景色设置过渡动画，过渡持续时间为2s，动画变化速度：减速，动画延迟为1s，实践效果如下： QQ录屏20230828225444.gif

变形

CSS3变形是一系列效果的集合，如：平移、旋转、缩放和倾斜，每个效果都被称为变形函数，他们可以操控元素发生平移、旋转、缩放和倾斜等变化。

transform属性可以让元素在一个坐标系统中变形，这个属性包含一系列变形函数，其基本语法为： transform:none|transform-functions;

其中，transform属性的默认值为none，适用于内联元素和块元素，表示不进行变形。transform-functions用来设置变形函数，可以是一个或多个变形函数列表

函数	说明
matrix(n,n,n,n,n,n)	使用六个值的矩阵
translate(x,y)	沿着X和Y轴移动元素
translateX(n)	沿着X轴移动元素
translateY(n)	沿着Y轴移动元素
scale(x,y)	缩放转换，改变元素的宽度和高度
scaleX(n)	缩放转换，改变元素的宽度
scaleY(n)	缩放转换，改变元素的高度
rotate(angle)	旋转，在参数中设置角度
skew(x-angle,y-angle)	倾斜转换，沿着X和Y轴
skewX(angle)	倾斜转换，沿着X轴
skewY(angle)	倾斜转换，沿着Y轴

旋转30度，向右向下移动20像素，宽度为原来的两倍、高度为原来的1.5倍，在X轴Y轴上分别倾斜20度和30度，实践效果如下：

个人总结

此次实践主要实践了静态定位、相对定位、绝对定位、固定定位，在绝对定位的基础上还进行了层次定位，相对定位通常用于制作文本超链接等效果，绝对定位可以实现类似弹窗、下拉菜单的效果，固定定位通常用于制作回到顶部按钮等效果，还实践了浮动，在浮动基础上实践了两栏布局和多栏布局，浮动常用于实现多栏布局，除此之外还学习了两种CSS高级应用：过渡和变形，CSS过渡是一种常见的动画效果，用于控制元素在某些条件下的改变（如鼠标悬停、元素聚焦等），从而使页面的交互更加生动，常见的过度属性包括文字颜色，背景颜色，透明度，变形，尺寸属性等，此次实践是实现了鼠标悬停时的过渡效果，改变背景颜色和宽度属性，后续可以实践更多的属性，做出更加生动的交互效果。在实际开发中，我们可以根据实际情况选择不同的过渡属性、过渡时间、过渡函数等，从而达到最佳的动画效果。CSS变形可以用来改变HTML元素的形状、大小、位置、方向，这些变化可以带来很多视觉上的效果，使得网站更加美观、有吸引力，为web开发提供了非常丰富的可能性，我们可以根据需要使用不同的变形操作，为网站增加更多的美感和魅力。

CSS布局实践|青训营

定位