html中浮动和定位（练习+知识点）

最新推荐文章于 2024-05-11 08:49:11 发布

海绵hong

最新推荐文章于 2024-05-11 08:49:11 发布

阅读量2.5k

点赞数 2

分类专栏：前端文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_54107527/article/details/124166316

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

2.5 sticky定位（存在兼容性问题）

定位

1、什么是脱离文档流

文档流指的是在元素排版过程中，元素会自动从上至下，从左往右流式排列，称为文档流

元素脱离文档流后，将不在文档流中占据空间，元素浮于文档流的上方，此时元素层级发生变化

2、position定位

作用：

可以使用偏移描述left,right,top,bottom

可以使用z—index提升档次

position属性用于指定元素的定位类型，属性值可为

static（默认定位）

relative（相对定位）

absolute（绝对定位）

fixed（固定定位）

sticky（粘性定位）

2.1 static定位

页面上的每个盒子从上到下、从左到右依次排列的布局

2.2 relative定位

参照物：定位前的位置

特点：不影响元素本身特性

元素不脱离文档流

相对于原位置进行偏移

    <style>
.c1{
    width: 120px;
    height: 120px;
    background-color:rgba(255,255,0,1);
    position:relative;
    left: 40px;
}
.c2{
    width: 120px;
    height: 120px;
    background-color:rgba(0,255,0,1);
}
    </style>
</head>
<body>
<div class="c2">
    <div class="c1">
        变化后，绿色为原来位置
    </div>
</div>

2.3 absolute定位

参照物：最近使用了定位的父级，如果没有再找body

参照物理解：相对定位，固定定位，绝对定位都可以，定位的为在最近的父级上面的定位

特点：元素脱离文档流

行元素支持所以css样式

块元素内容撑开宽高

清除子级的浮动

2.4 fixed定位

参照物：浏览器窗口

特性：脱离文档流

清除子级浮动

实例：顶部导航栏

2.5 sticky定位（存在兼容性问题）

根据自身原始位置或浏览器窗口进行固定定位，类似relative和fixed的结合

常用于页面的搜索工具栏，初始加载在默认位置（相当于relative），页面向下滚动时，工具栏固定在页面头部（相当于fixed），页面重新向上滚动，工具栏也会回到默认位置

层级属性z-index

用于设置元素的堆叠顺序，该属性仅能在非static定位的定位元素上生效
数值越高，层级越高，层级高的元素会覆盖层级低的元素（层级高的元素会在层级低的元素上方）

z-index属性值相同时，遵循后来者居上的原则，后面的元素会覆盖前面的元素

上述absolute定位的示例中，给box1、box2添加背景后可以清晰看见，box2覆盖box1

将box1、box2增加以z-index属性，可将box1、box2层级改变，使box1在box2的上方

.box1{ z-index: 1; }
.box2{ z-index: 0; }

浮动

定义：

元素脱离文档流，按照指定方向发生移动，遇到父级边界换行

取值：

none：不浮动

left左浮动

right：右浮动

inherit：继承父级

作用：

解决水平布局问题

特性：

所有标签同排显示

行标签支持所以css样式

默认内容撑开宽高

元素脱离文档流

    <style>
        div, span {
            width: 120px;
            height: 120px;
            color: aqua;
            font-size: 30px;
            line-height: 120px;/*字体与文本大小相同字体居中*/
            text-align: center; /*字体居中*/
            float: left;
            border: 2px solid #f2f3f1;
        }
    </style>
</head>
<body>
<div style="background-color: #21ea14">A</div>
<div style="background-color: rebeccapurple">B</div>
<div style="background-color: blue">C</div>
<span style="background-color: chocolate">a</span>
<span style="background-color: chocolate">b</span>
<span style="background-color: olivedrab">c</span>
</body>

没有使用浮动前

使用浮动后

清除浮动：

原因：元素在清除浮动后脱离文档流，父级元素检测不到子级的存在，高度无法撑开

解决方案：

1.在父级使用height--------拓展性不好

2.在父级使用overflow：hidden；推荐，够直接

3.使用clear（在标签下面加入一个空白的标签样式设为：style=“clear：both”）

浮动练习

使用浮动实现该图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 span {
            height: 100px;
            width: 100px;
            background-color: #21ea14;
            font-size: 20px;
            line-height: 100px;
            text-align: center;
            float: left;
        }

        .c2 {
            width: 500px;
            height: 450px;
        }

        .c2 .left {
            width: 300px;
            height: 450px;
            float: left;
        }

        .c2 .right {
            width: 200px;
            height: 350px;
            float: left;
            overflow: hidden;
        }

        .z1 {
            height: 100px;
            width: 300px;
            background-color: yellow;
            float: left;
            font-size: 20px;
            line-height: 100px;
            text-align: center;
        }

        .z2 {
            height: 200px;
            width: 200px;
            background-color: pink;
            font-size: 20px;
            line-height: 100px;
            text-align: center;
            float: left;
        }

        .z3 {
            height: 150px;
            width: 150px;
            font-size: 20px;
            line-height: 100px;
            text-align: center;
            float: left;
        }

        .c3 {
            width: 500px;
            height: 100px;
            background-color: blue;
            font-size: 20px;
            line-height: 100px;
            text-align: center;
        }
    </style>

</head>
<body>
<div class="c1">
    <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>
<div class="c2">
    <div class="left"><span class="z1">6</span>
        <span class="z3" style="background-color: grey">8</span>
        <span class="z3" style="color: #f2f3f1;background-color: #130802 " >9</span>
        <span style="height: 100px;width: 300px;background-color: #c70012;float: left;
            font-size: 20px;
            line-height: 100px;
            text-align: center;
            float: left;">11</span>
    </div>
    <div class="right">
                <span class="z2">7</span>
        <span style="height: 150px;width: 200px;background-color: cornflowerblue;float: left;
            font-size: 20px;
            line-height: 100px;
            text-align: center;
            float: left;">10</span></div>
</div>
<div class="c3">12</div>
</body>
</html>

海绵hong

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
html中浮动和定位（练习+知识点）

目录定位1、什么是脱离文档流2、position定位2.1 static定位2.2 relative定位2.3 absolute定位2.4 fixed定位2.5 sticky定位（存在兼容性问题）层级属性z-index浮动定义：取值：作用：特性：浮动练习定位1、什么是脱离文档流文档流指的是在元素排版过程中，元素会自动从上至下，从左往右流式排列，称为文档流元素脱离文档流后，将不在文档流中占据空间，元素浮于文档流...
复制链接

扫一扫