html css box sizing,CSS3 box-sizing属性详解

本文详细介绍了CSS3的box-sizing属性,包括content-box、padding-box和border-box三种模式。content-box是默认模式,border和padding不计入宽度;padding-box中padding计入宽度;border-box下,border和padding都计入宽度。不同浏览器对这些模式的支持情况也做了说明,并提供了示例代码展示效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

简介

box-sizing属性包括content-box(default),border-box,padding-box。

1、content-box,border和padding不计算入width之内

2、padding-box,padding计算入width内

3、border-box,border和padding计算入width之内,其实就是怪异模式了~

注意:

ie8+浏览器支持content-box和border-box;

ff则支持全部三个值。

使用时:

-webkit-box-sizing: 100px; // for ios-safari, android

-moz-box-sizing:100px; //for ff

box-sizing:100px; //for other

示例如下:

.content-box{

box-sizing:content-box;

-moz-box-sizing:content-box;

width: 100px;

height: 100px;

padding: 20px;

border: 5px solid #E6A43F;

background: blue;

}

.padding-box{

box-sizing:padding-box;

-moz-box-sizing:padding-box;

width: 100px;

height: 100px;

padding: 20px;

border: 5px solid #186645;

background: red;

}

.border-box{

box-sizing:border-box;

-moz-box-sizing:border-box;

width: 100px;

height: 100px;

padding: 20px;

border: 5px solid #3DA3EF;

background: yellow;

}

截图(ff):

81b714d435ba1f151ae625776f32dddb.png

总结

以上就是这篇文章的全部内容,希望本文的内容对大家学习或者使用CSS3能有所帮助,如果有疑问大家可以留言交流。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值