CSS3计算盒子宽度

鳄鱼君

发表文章数:642

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS3 » CSS3计算盒子宽度

CSS3的calc()函数可以让CSS属性值执行一些计算:

width:calc(100%-20px;)

该函数可以执行+-*/

<style>
    .father {
        width: 300px;
        height: 200px;
        background-color: salmon;
    }

    .son {
        width: calc(100%-30px);
        height: 30px;
        background-color: seagreen;
    }
</style>

<!-- 子盒子宽度永远比父盒子小30像素 -->
<div class="father">
    <div class="son"></div>
</div>

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《CSS3计算盒子宽度》 发布于2020-08-22

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

3 + 1 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册