计算盒子宽度calc

最新推荐文章于 2023-11-29 14:54:45 发布

lxl211

最新推荐文章于 2023-11-29 14:54:45 发布

阅读量105

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/lxllxl211/article/details/127284063

版权

计算盒子宽度
语法：
选择器{
/* -号前后必须加空格，否则无效 /
/ 效果就是子盒子始终比复合子的高度少20px */
width: calc(100% - 20px);
height: calc(100% - 20px);
}

代码例子：

<style>
        .father {

            width: 400px;
            height: 400px;
            background-color: pink;
            margin: auto;
            /* 解决外边距坍陷 */
            overflow: hidden;

        }

        .son {
            /* -号前后必须加空格，否则无效 */
            /* 效果就是子盒子始终比复合子的高度少20px */
            /* 大小 */
            width: calc(100% - 20px);
            height: calc(100% - 20px);
            /* 对齐方式 */
            margin: 10px auto;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>