css position弹性盒子测试

最新推荐文章于 2025-01-01 17:18:28 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lily1010/p/5405906.html

本文探讨了网页布局中实现全屏响应式布局的方法，包括使用百分比高度、浮动和绝对定位等技术，以及如何在弹性盒子模型下计算自适应模块的位置值，通过实例代码演示布局调整过程。

总结：

1.利用样式height:100%设置div高度为全屏时候必须设置所有的父元素，但是父元素那么多，不可控，所以此法不可行；

2.设置父框架的padding为100px，div进行float，padding有效；但div进行position，并配合left：0，padding失效；

3.弹性盒子模型需要position属性和两个相对立的属性，比如top和bottom，left和right。

4.要做出来自适应的三个模块，要会计算中间div进行position后left和right的值，此值与左右两边的div宽度有关

测试的代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
        *{
            padding: 0;
            margin: 0;
            
        }
        /*html,body{
            height: 100%;
        }*/
        .elasticityBox{
            border: 1px #000 solid;
            padding: 100px;
        }
        .elasticityBox .box01{
            position: absolute;
            border: 1px red solid;
            top:0;
            bottom: 0;
            left: 200px;
            right: 200px;
        }
        /*.elasticityBox .box01{
            border: 1px red solid;
            float: left;
        }*/
        .elasticityBox .box02{
            border: 1px yellowgreen solid;
            width: 100px;
            position: absolute;
            left: 0;
            top:0;
            bottom: 0;
        }
        .elasticityBox .box03{
            border: 1px yellowgreen solid;
            width: 100px;
            position: absolute;
            right: 0;
            top:0;
            bottom: 0;
        }
        </style>
    </head>
    <body>
        <div class="elasticityBox">
            <div class="box01">123</div>
            <div class="box02">3456</div>
            <div class="box03">789</div>
        </div>
    </body>
</html>