6月22日实训博客

最新推荐文章于 2024-11-02 15:48:17 发布

P1nkSpid3r

最新推荐文章于 2024-11-02 15:48:17 发布

阅读量69

点赞数

分类专栏：在这理发店文章标签：前端 javascript html

本文链接：https://blog.csdn.net/L978305126/article/details/125416329

版权

在这理发店专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、定位体系一共有三种

（1）常规流；

（2）浮动定位

（3）绝对定位

2、float属性常用的语法：

（1）float：left；左浮动

（2）float：right；右浮动

（3）float：none；无浮动

任何元素都可以使用浮动，无论是块级元素div、ul等等，还是行内元素都可以浮动，任何被声明float的元素都会自动被设置成块元素，有了块级元素的各种特点，可以设置宽高，可以设置内外边距。

但是很重要的一个点就是：float浮动用于布局，可以很轻松的达到靠左靠右的效果，但是，当使用完float浮动之后，一定要记住清除浮动，要不然很可能会造成高度坍塌。

3、float的影响

（1）对于行内元素来说，使用float之后，可以设置宽度高度了；

（2）对于块级元素来说，默认占满行的块级元素，比如p标签，会自动变成内容撑开宽度，但同样可以设置宽高。

4、浮动之后盒子的位置

（1）左浮动的盒子向上向左排列；

（2）右浮动的盒子向上向右排列；

（3）浮动盒子的顶边不得高于上一个盒子的顶边；

（4）若剩余空间无法放下浮动的盒子，则该盒子向下移动，直至具备足够的空间可以容纳盒子，然后再向左或向右移动。

5、当常规流盒子遇上浮动盒子

（1）浮动盒子在摆放时会避开常规流盒子；

（2）常规流盒子在摆放时会无视浮动盒子；

（3）常规流盒子在自动计算高度时，无视浮动盒子——高度坍塌。

6、清除浮动

为了避免造成高度坍塌，因此，我们经常会在完成浮动布局之后进行清除浮动。

清除浮动的几个语法：

（1）clear：none；不清除浮动；

（2）clear：left；清除左浮动，元素在左浮动盒子的下方摆放；

（3）clear：right；清除右浮动，元素在右浮动盒子的下方摆放；

（4）clear：both；清除左右浮动，元素在左右浮动盒子的下方摆放。

<!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>
    body{
        width: 950px;
        margin: 0px auto;
    }
  .sidekick{
    float: left;
    width: 200px;
    height: 620px;
    text-align: center;
    background-color: darkgray;
  }
  .d2{
    width: 700px;
    height: 350px;
  }
  .d2 span{
    display: block;
    margin-top: 20px;
  }

  .d2 img{
    width: 700px;
    height: 280px;
  }
  .dd{
    width:700px;
    float: left;
    padding-left: 10px;
  }
  .d3 img{
    float: left;
    width: 200px;
    height: 100px;
  }
  .d3{
    width: 700px;
    border-top: 1px solid black;
    padding-top: 10px;
  }
.d11{
    margin-top: 60px;
     color: white;
}
.logo{
    font-size: 60px;
    font-weight: bold;
    
}
.minilogo{
    font-size: 10px;

}
.d12{
    margin-top: 100px;
    line-height: 60px;
    color: black;

}

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