定位布局与浮动塌陷处理的实战 - CSS

首页 > 博客列表 > 定位布局与浮动塌陷处理的实战

博主信息

博文 13

粉丝 2

访问量 13813

专题推荐

更多>

1.懒加载

利用HTML和JavaScript简单实现懒加载：

<body>
    <img src="头像.jpg" alt="" data-src="逃跑.jpg">
    <img src="头像.jpg" alt="" data-src="逃跑.jpg">
    <img src="头像.jpg" alt="" data-src="逃跑.jpg">
    <img src="头像.jpg" alt="" data-src="逃跑.jpg">
    <img src="头像.jpg" alt="" data-src="逃跑.jpg">
    <img src="头像.jpg" alt="" data-src="逃跑.jpg">
    <img src="头像.jpg" alt="" data-src="逃跑.jpg">
    <img src="头像.jpg" alt="" data-src="逃跑.jpg">
    <img src="头像.jpg" alt="" data-src="逃跑.jpg">
    <img src="头像.jpg" alt="" data-src="逃跑.jpg">
    <img src="头像.jpg" alt="" data-src="逃跑.jpg">
    <img src="头像.jpg" alt="" data-src="逃跑.jpg">
    <img src="头像.jpg" alt="" data-src="逃跑.jpg">
    <img src="头像.jpg" alt="" data-src="逃跑.jpg">
    <img src="头像.jpg" alt="" data-src="逃跑.jpg">
    <img src="头像.jpg" alt="" data-src="逃跑.jpg">
</body>
<script>
    // 视口大小: 窗口大小
    const viewHeight = document.documentElement.clientHeight;
    // 监听文档对象的滚动事件
    document.addEventListener("scroll", showImg);
    // 初始化
    window.addEventListener("load", showImg);
    // 回调
    function showImg() {
      // 获取所有图片
      let imgs = document.querySelectorAll("img");
      // 遍历每一张图片，判断当前的图片是否进入到入用户的可视区域
      imgs.forEach(function (img) {
        let imgTop = img.offsetTop;
        // 滚动高度 = 视口高度 + 滚动距离
        let scrTop = viewHeight + document.documentElement.scrollTop;
        // 图片已进入可视区
        if (imgTop < scrTop) {
          img.src = img.dataset.src;
        }
      });
    }
  </script>

例图：

2.浮动元素高度塌陷产生的原因与解决方案

浮动float：浮动框不在文档的普通流中，所以普通流中的块级框变现的就像浮动框不存在一样，但是块级的文本内容会受到浮动元素的影响。
使用浮动元素或者元素定位后，会产生一个块级框，不论它本身是何种元素
浮动元素浮动之后，它后面的元素会自动填充它出让出来的空间大小

浮动元素只会影响到它后面的元素布局，对前面没有影响
基本浮动方式：

  <style>
     body{border: 5px solid blue;padding: 300px;}
     div{border: 1px solid black;
     width: 500px;height: 500px;
     margin: auto;
     }
     /* box1左浮动 */
     .box1{background-color: chartreuse;float: left;}
     /* box2右浮动 */
     .box2{background-color: chocolate;float: right;}
     /* box3不变 */
     .box3{background-color: cyan;clear: left;clear: right;clear: both;}
     a,span{background-color: darkorange;
     width: 300px ;height: 300px;
     float:right;}
 </style>
</head>
<body>
 <div class="box1">box1</div>
 <div class="box2">box2</div>
 <div class="box3">box3</div>
 <hr>
 <a href="">php.cn</a>
 <span>PHP中文网欢迎您！</span>
</body>

例图：
浮动塌陷和解决方法：

解决方案1：给父元素添加一个高度，但是此方法无法自适应.
解决方案2:把父元素浮动起来 ,会产生传导效应，级数越多很麻烦.
解决方案3: 添加一个专用元素用于清浮动 ,但依赖DOM结构
解决方案4：添加一个伪元素来解决，也可以
解决方案5: 最简单的解决方案,加overflow属性（hidden/auto）

    <style>
        .container{
            border: 10px dashed black;}
            .item{width: 150px; height: 150px;}
            .item:first-of-type{background-color: chartreuse;}
            .item:nth-last-of-type(2){background-color: coral;}
            .item:last-of-type{background-color: cyan;}
            /* 浮动 */
            .item{float: left;}
            /* 解决方案1：给父元素添加一个高度，但是此方法无法自适应 */
            /* .container{height: 180px;} */
            /* 解决方案2: 把父元素浮动起来 ,会产生传导效应，级数越多很麻烦*/
            /* .container {float: left;}
               .box {float: left;} */
            /* 解决方案3: 添加一个专用元素用于清浮动 ,但依赖DOM结构*/
            /* div.clear {clear: both;} */
            /* 解决方案4： 添加一个伪元素来解决，也可以 */
            /* .container::after {content: "";display: block;clear: both;} */
            /* 解决方案5: 最简单的解决方案,加overflow属性（hidden/auto） */
            .container {overflow: hidden;overflow: auto;}
    </style>
</head>
<body>
    <!-- <div class="box"> -->
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <!-- <div class="clear"></div> -->
        </div>
    <!-- </div> -->
</body>

例图：

3.三种方法实现三列布局

浮动实现三列布局：

    <style>
    /* 初始化   */
    body{margin: 0;padding: 0;box-sizing: border-box;}
        li{list-style: none;}
        a{text-decoration: none;color: teal;}
        /* 页眉与页脚 */
        .header,
        .footer{height: 100px;background-color: tomato;color: white;}
        /* 页眉与页脚内容区 */
        .content{width: 1500px;margin: auto;}
        .content ul li {float: left;line-height: 100px;padding: 0 25px;}
        .content ul li :hover{background-color: turquoise;}
        /* 页脚样式： */
        .content p{text-align: center;line-height: 50px;}
        /* 主体样式用定位 */
        .container{width: 960px;margin:10px auto;height: 1210px;
        /* 用定位元素做定位父级 */
        position: relative;}
        .container > .left{width: 200px;background-color: violet;height: 1210px;
        position: absolute;
        top: 0;left:0;}
        .container>.right{width: 200px;background-color: yellowgreen;height:1210px;
        position: absolute;
        top: 0;
        right: 0;}
        .container>.main{width: 560px;background-color: aqua;min-height: 1210px;
        position: absolute;
        top: 0;left: 200px;}
      </style>
</head>
<body>
    <!-- 页眉 -->
    <div class="header">
        <div class="content">
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">产品介绍</a></li>
                <li><a href="">排行板</a></li>
                <li><a href="">联系我们</a></li>
            </ul>
        </div>
    </div>
    <!-- 主体 -->
    <div class="container">
        <div class="left">产品分类</div>
        <div class="main">轮播图</div>
        <div class="right">其他样式</div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
        <div class="content">
            <p>xxxxx科技有限公司；|备案号：ICP*********</p>
        </div>
    </div>
</body>

例图：

4.总结

设置相对定位的元素框会偏移某个距离，元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
要掌握元素的偏移。
熟练掌握浮动元素的应用。
掌握定位的使用。

批改老师：

天蓬老师

批改状态：合格

老师批语：很好，推荐到群中了

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

phpstudy和Visual studio code编辑器初体验！

2020-06-12 11:58:13