css的padding和border问题

第一步:先跟据需求定义一个div,要求width为300px,height为300px;

第二步:给该div添加一个边框,要求实线,宽度10px,粉色;

 

第三步:给该div再设置20px的内边距;

 

我们发现这个div随着border和padding的设置一直在变大。此时div的占位宽度为:width+padding+border=300+20*2+10*2=360px。

但是我想设置border和padding之后,div还保持width=300px、height=300px,这怎么办呢?

第一种解决方式:

事先算好div的width和height。比如上面的例子,我想保证div这个盒子模型的宽度和高度为300px,那么就得设置div的宽度的初始值为

width=300-border-padding=300-20-40=240px。高度height同理也是240px。

第二种解决方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:300px;
            height: 300px;
            background: #CCC;
            border: 10px solid pink;
            padding: 20px;
            box-sizing: border-box;  /*灵魂代码*/

        }
    </style>
</head>
<body>
   <div>css</div>
</body>
</html>    
box-sizing: border-box; 有了这句灵魂代码之后问题就解决了。它会自动做减法运算保证整个div的width和height为300px。
最终的样式为:


总结:
在盒子模型中,当盒子的width和height保持不变时,设置盒子的border和padding,此时盒子真实尺寸为:宽度=width+border+padding;
高度=height+border+padding。但是这不是我们想要的结果,我们想设置border和padding时盒子的宽度和高度还是原始值,此时只能通过减少
width和height的像素来实现,box-sizing:border-box;就为我们自动做了减法运算,解决了该问题。

 

转载于:https://www.cnblogs.com/RomanticLife/p/8038308.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值