第四次预习

最新推荐文章于 2024-10-02 17:15:49 发布

soft_Youth

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量168

点赞数

分类专栏：前端预习文章标签： html

本文链接：https://blog.csdn.net/soft_Youth/article/details/124447729

版权

本文详细介绍了HTML布局中的浮动特性，包括浮动元素的行内块元素特性、清除浮动的方法。接着讲解了定位的概念，如定位模式、边偏移和z-index。此外，还探讨了过渡效果和CSS动画的基础用法。最后，文章深入到3D效果，讲解了translate3d、perspective和3D旋转的应用。

摘要由CSDN通过智能技术生成

第四次预习

一、浮动

传统网页布局的三种方式：
1、标准流：标签按照规定好的默认方式排列
2、浮动：可以改变元素标签默认的排列方式
多个块级元素纵向排列用标准流，横向排列可以用浮动
3、定位：

浮动：
在这里插入图片描述
例如：

<head>
    <style>
    .right{
     
        float:right;
        width:100px;
        height:200px;
        background-color:blueviolet
    }
    .left{
     
        float:left;
        width:100px;
        height:200px;
        background-color:blueviolet
    }
    </style>
</head>
<body>
    <div class="left">向左浮动</div>
    <div class="right">向右浮动</div>
</body>

显示效果如下
在这里插入图片描述

浮动特性

1）浮动元素会脱离标准流（脱离标准流的控制浮动到指定位置，浮动的盒子不再保留原来的位置，原来的位置会被其他元素占用，有时会实现两个盒子重叠的效果）
2）浮动的元素会一行内显示并且元素顶部对齐（如果父级的元素的宽度装不下这些盒子就会另起一行显示）
3）浮动的元素会具有行内块元素特性（行内元素加浮动之后就可以直接设置宽度和高度）
在这里插入图片描述

举例：

<head>
    <style>
    .right{
     
        float:right;
        width:100px;
        height:200px;
        background-color:blueviolet
    }
    .left{
     
        float:left;
        width:100px;
        height:200px;
        background-color:pink;
    }
    </style>
</head>
<body>
    <span class="left">向左浮动</span>
    <span class="right">向右浮动</spanb>
</body>

显示效果如下
在这里插入图片描述
注意：
浮动只会影响它后面的标准流，而不能影响前面的标准流
父盒子高度可以不给，让子盒子撑开，但是当子元素都浮动起来时，会出现父元素高度为0的情况，要解决这个问题就需要清除浮动

清除浮动

清除浮动的本质就是清除浮动元素造成的影响，如果父元素本身被设置了高度就不需要清除浮动，清除浮动之后，父级就会根据浮动的子盒子自动检测高度

清除浮动的策略是闭合浮动
在这里插入图片描述

清除浮动的方法

1、额外标签法（隔墙法）
即在最后一个浮动元素的后面加上一个空的标签，这个标签用来清除浮动（<div style="clear:both;"></div> 也可以单独为这个标签写一个样式，如下代码）
但这个标签必须是块级元素也可以
代码

<head>
    <style>
    .father{
     
        width:300px;
        background-color: black;
    }
    .right{
     
        float:right;
        width:100px;
        height:100px;
        background-color:blueviolet
    }
    .left{
     
        float:left;
        width:100px;
        height:100px;
        background-color:pink;
    }
    .clear{
     
        clear:both;
    }
    </style>