浮动日常练习

最新推荐文章于 2024-03-22 08:59:27 发布

m0_47150262

最新推荐文章于 2024-03-22 08:59:27 发布

阅读量260

点赞数 1

文章标签：浮动元素布局网页设计 HTML CSS

本文链接：https://blog.csdn.net/m0_47150262/article/details/125416528

版权

一、什么是浮动？
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，浮动的框可以向左或向右移动，
直到它的外边缘碰到包含框或另一个浮动框的边框为止(会挨着父元素左边或右边排列，如果之前有浮动的元素会挨着浮动的元素排列)
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

二、浮动的特点
1.浮动会脱离标准流
如果一个元素按照正常的标准流来显示，会在html中所属的位置上占位，后面的元素会紧跟着它，但是浮动脱离了标准流，以后我们在看到浮动的元素之后，不能以正常的标准流里进行判断
浮动后会影响其他元素的显示方式，因为其他元素会当他不存在。
浮动的元素虽然会脱离正常的文档流，但它还是会影响到正常文档流中的文字排版。

2.浮动会影响元素的显示方式
浮动后的行内元素是可以设置宽高，块级元素是内容的宽高，说白了会改变他的模式display为inline-block
float就是隐性的把内联元素转化为块元素，这是对内部的特性就是有物理特性，但是他不占据一行。对外是内联元素的属性

3、设置浮动后，元素将没有默认宽度，需要手动设置width：100%；

4、彼此相邻的浮动元素
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

5、逃不出父盒子的手掌心
不管这么浮动，都在父盒子里面。记住：浮动使用的原则，一般是一起浮动
如果父元素没有设置高度，浮动的子元素不会撑开父元素

<!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>
        .logo {

            font-size: 80px;
            font-family: '仿宋';
            font-weight: bold;
            color: white;


        }

        .logo-tu {
            text-align: center;
        }

        .logo-text {
            list-style: none;
            line-height: 300%;
     
        }

        .logo-title {
            width: 24%;
            height: 100%;
            background-color: #5A6E7E;
            float: left;
            text-align: center;
            padding-bottom: 13rem;


        }

        .test {
            float: left;
            width: 75%;
            padding-left: 1%;
 
        }

        .test-img1 {
            width: 100%;
            height: 10%;
        }

        .test-img2 {
            width: 20%;
            float: left;
            padding-right: 10px;
        }
    </style>
</head>

<body>
    <div class="logo-title">
        <div class="logo-tu">
            <span class="logo">logo</span><br>
            <span style="color: white;">某某摄影专辑</span><br><br><br>
        </div>
        <div class="logo-text">
            <li>网站首页</li>
            <li>咨询中心</li>
            <li>产品展示</li>
            <li>关于我们</li>
            <li>联系我们</li>
        </div>
    </div>

    <div class="test">
        <img class="test-img1" src="./material3/imgs/banner.jpg">
        <div class="test-t">
            <span>当前位置： </span>
            <span>首页 </span>>
            <span>关于我们 </span>
            <hr>
        </div>

        <div>
            <img class="test-img2" src="./material3/imgs/01.jpg">
            <p>水墨（风格）摄影和传统的水墨画一样，现市面上出现的水墨摄影作品，按题材，
                可以分为风景和花鸟，对应国画中的山水画和花鸟画；按手法和意境，可以分为
                抽象和具象，对应国画中的写意和工笔。 水墨风格的摄影照片虽然免不了使用Photoshop等
                软件的后期加工，但是这并不意味着可以任意扭曲原照片。全息摄影是指一种记录被摄物体
                反射波的振幅和位相等全部信息的新型摄影技术。普通摄影是记录物体 面上的光强分布，
                它不能记录物体反射光的位相信息，因而失去了立体感。全息摄影采用激光作为照明光源，
                并将光源发出的光分为两束，一束直接射向感光片，另一束经被摄物的反射后再射向感光片。
                人眼直接去看这种感光的底片，只能看到像指纹一样的干涉条纹，但如果用激光去照射它，
                人眼透过底片就能看到原来被拍摄物体完全相同的三维立体像。一张全息摄影图片即使只剩下一小部分，
                依然可以重现全部景物。全息摄影可应用于工业上进行无损探伤，超声全息，全息显微镜，
                全息摄影存储器,全息电影和电视等许多方面。</p>
        </div>
    </div>

</body>

</html>