CSS3盒子模型border-box

鳄鱼君

发表文章数:642

热门标签

,

Vieu四代商业主题

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

¥69 现在购买
首页 » CSS3 » CSS3盒子模型border-box

CSS3中可以通过box-sizing来指定盒子模型,有2个值:content-box、border-box,这样我们计算盒子大小的方式就发生了改变

  1. box-sizing:content-box盒子大小为width+padding+border
  2. box-sizing:border-box盒子大小为width

如果盒子模型改为了box-sizing:border-box,那么padding和border就不会撑大盒子了(padding和border不会超过width)

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: brown;
        border: 20px solid rosybrown;
        padding: 20px;
        box-sizing: content-box;
    }

    p {
        width: 200px;
        height: 200px;
        background-color: brown;
        border: 20px solid rosybrown;
        padding: 20px;
        box-sizing: border-box;
    }
</style>

<div>盒子模型</div>
<p>盒子模型</p>

那么我们可以让所有的盒子都这样设置:

<style>
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
</style>

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

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

评论 抢沙发

7 + 2 =


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

支付宝扫一扫打赏

微信扫一扫打赏

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

登录

忘记密码 ?

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

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

注册