如何不用计算div中的padding,margin等属性?box-sizing: border-box;轻松搞定!

本文详细解析了CSS中box-sizing:border-box属性的作用。当应用于一个元素时,即使修改该元素的内边距、边框样式,其实际占用的空间大小保持不变。

设置一个div2,width:100px;height:100px;当设置box-sizing: border-box;属性值时,无论div2中的margin,padding,border,设置为多少,div2总体长宽始终都是100px。

 

 

 

 

 

<div style="max-width: 775px; margin: 0 auto; background-color: #ffffff; overflow: hidden; box-sizing: border-box;"> <!-- 主内容区域 --> <div style="background-color: #141414; padding: 80px;padding-bottom: 106px; color: #ffffff; box-sizing: border-box;"> <!-- Logo --> <div style="margin-bottom: 48px; box-sizing: border-box;"> <img src="https://test-static.playol.com/static/imgs/header.png" alt="PlayOL Logo" style="width: 100px; height: 100px; display: block; box-sizing: border-box;"> </div> <!-- 问候语 --> <div style="font-size: 36px; margin-bottom: 36px; color: #BFBFBF; box-sizing: border-box;height: 49px;"> ${email}, 您好! </div> <!-- 邀请文本 --> <div style="font-size: 36px; font-weight: 600; margin-bottom: 8px; box-sizing: border-box;height: 49px;"> 欢迎来到palyOL </div> <div style="text-align: left; box-sizing: border-box;margin-bottom: 24px;"> 这是您的验证码: </div> <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 32px; box-sizing: border-box;height: 49px;"> <span style="font-size: 36px; font-weight: 600; box-sizing: border-box;">${code}</span> </div> <!-- 有效期说明 --> <div style="font-size: 14px; color: #cccccc; text-align: left; line-height: 1.6; box-sizing: border-box;margin-bottom: 80px; "> 验证码有效期为5分钟。请勿将验证码透露给他人。如非本人操作,您可以忽略这封邮件。 </div> <!-- 结尾语 --> <div style="padding-left: 24px; border-left: 4px solid #FF1F1F; box-sizing: border-box;"> <div style="font-size: 16px; box-sizing: border-box;">祝您游戏愉快,</div> <div style="font-size: 16px; font-weight: 600; box-sizing: border-box;">PlayOL团队</div> </div> </div> <!-- 邮件底部 --> <div style="background-color: #ffffff; padding: 60px; padding-left: 80px; color: #000000; border-top: 1px solid #e0e0e0; box-sizing: border-box;"> <!-- 系统提示 --> <div style="font-size: 13px; margin-bottom: 20px; text-align: left; box-sizing: border-box;"> 这封电子邮件由系统自动生成,请勿回复。 </div> <!-- 游玩网址 --> <div style="text-align: left; margin-top: 34px;margin-bottom: 50px; font-size: 14px; box-sizing: border-box;"> <div style="margin-bottom: 5px; box-sizing: border-box;">游玩网址</div> <a href="https://playol.com" target="_blank" style=" text-decoration: none; box-sizing: border-box;font-size: 18px;color: #000000; ">https://playol.com</a> </div> <!-- Footer Logo --> <div style="text-align: left; margin-bottom: 24px;box-sizing: border-box;"> <div style="display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box;"> <img src="https://test-static.playol.com/static/imgs/logo.png" alt="PlayOL Logo" style="width: 160px; height: 48px; box-sizing: border-box;"> </div> </div> <!-- 版权信息 --> <div style="text-align: left; font-size: 12px; line-height: 1.8; box-sizing: border-box;"> <span style="font-weight: 700;">© PalyOL Corporation. All Rights Reserved.</span><br> 保留所有权利。所有商标均为其在x国及其他国家/地区的各自持有者所有。 </div> </div> </div> 给每一行后边加/
最新发布
11-04
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值