A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

        .box {
                /*width:占有宽度*/
            width: 100%;
            height: 200px;
                background: #eee;
                /*利用padding挤出1,3位置*/
                padding: 0 200px;
                /*内减盒模型*/
                box-sizing: border-box;
                position: relative;
        }
        .box p:first-child {
                /*绝对定位*/
                position: absolute;
                width: 200px;
                height: 200px;
                background-color: green;
                left: 0;
        }
        .box p:last-child {
                /*绝对定位*/
                position: absolute;
                width: 200px;
                height: 200px;
                background-color: green;
                right: 0;
                top: 0;
        }
        .box p:nth-child(2) {
                /*标准流  父盒子内容宽的比值*/
                width: 100%;
                height: 200px;
                background-color: orange;
                }

</style>
<body>
        <div class="box">
                <P></P>
                <P></P>
                <P></P>
        </div>

---------------------
【转载,仅作分享,侵删】
作者:前端小99
原文:https://blog.csdn.net/qq_41328247/article/details/88725722
版权声明:本文为博主原创文章,转载请附上博文链接!

1 个回复

倒序浏览
奈斯,感谢分享
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马