百分比布局

最新推荐文章于 2021-06-19 23:33:30 发布

十友九

最新推荐文章于 2021-06-19 23:33:30 发布

阅读量557

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/weixin_43778556/article/details/106150897

版权

HTML 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百分比布局</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul,ol{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #000000;
        }
        /*标准流，浮动：*/
        /*width：表示相对于父盒子内容宽比值*/
        /*height：表示相对于父盒子内容高比值*/
        /*padding,margain:不管任何方向都是表示相对于父盒子内容宽比值*/
        /*border：不能使用百分数*/
        .box1{
            /*父盒子使用px*/
            width: 300px;
            height: 400px;
            padding: 50px;
            border: 20px solid #000000;
        }
        .box1 p{
            /*标准流和浮动*/
            /*width：相对于父盒子内容宽比值*/
            width: 50%;
            /*height：表示相对于父盒子内容高比值*/
            height: 20%;
            /*padding,margain:不管任何方向都是表示相对于父盒子内容宽比值*/
            padding: 10%;
            margin: 10%;
            background-color: red;
        }
        /*绝对定位：*/
        /*width：表示相对于定位参考盒子（内容宽+padding）比值*/
        /*height：表示相对于定位参考盒子（内容高+padding）比值*/
        /*padding,margain:不管任何方向都是表示相对于定位参考盒子（内容宽+padding）比值*/
        /*border：不能使用百分数*/
        .box2{
            /*父盒子使用px*/
            width: 300px;
            height: 400px;
            padding: 50px;
            border: 20px solid #000000;
            position: relative;
        }
        .box2 p{
            /*绝对定位*/
            position: absolute;
            left: 0;
            top: 0;
            /*width：表示相对于定位参考盒子（内容宽+padding）比值  （300+50*2）*50%=200px*/
            width: 50%;
            /*height：表示相对于定位参考盒子（内容高+padding）比值*/
            height: 20%;
            /*padding,margain:不管任何方向都是表示相对于定位参考盒子（内容宽+padding）比值*/
            padding: 10%;
            margin: 10%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>son</p>
    </div>
    <div class="box2">
        <p>son</p>
    </div>
</body>
</html>