CSS盒模型

博客介绍了盒模型,它是浏览器渲染DOM元素时分配的块容器,包含内容、填充、边框和边界。对比了W3C标准盒模型和IE盒模型中width和height设置的区别,还提到使用jQuery获取高度的情况,最后介绍了JS获取DOM高度的几种方法。

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

盒模型

所谓的盒模型,就是浏览器在渲染一个DOM元素时,给其分配的块容器。主要包含如下4个部分

内容(content)、填充(padding)、边框(border)、边界(margin)

其中padding,border,margin都好说,问题就出现在这个content。
在W3C的标准盒模型中,我们设置的height或者width就是content内容区的大小
而在IE的盒子模型中,我们设置的height或者width就是content+padding+border

后来W3C发现IE的盒模型关于width和height的设置更方便,于是添加了一个新的属性box-sizing
其中box-szing: content-box;就是标准的盒模型
box-sizing:border-box;就是IE的盒模型

列如我们设置如下css

.inner {
    height: 100px;
    width: 100px;
    padding: 20px;
    border: 2px solid #ccc;
    margin: 20px;
    box-sizing:content-box;
}

在chrome中,我们打开调试工具

avatar

当我们将上述css中的box-sizing改成border-box后

avatar

可以明显的看到,在图一中content的大小为100 x 100,图二中content的大小为56 x 56

由以上的两个列子我们就可以明显看出两个盒子模型的区别。

有一点需要注意:我们使用jquery时,获取的height实际是content的高度,比如图二中,我们使用$('.inner').height()得到的是56, 而不是100

JS获取DOM的高度的方法
1. dom.style.height | width
此方法只支持内联样式
2. dom.currentStyle().width | height
此方法只适用于IE,获取的是css设置的height | width 值
3. window.getComputedStyle(dom).width | height
此方法获取的是CSS设置的height和width值
4. dom.getBoundingClientRect().width | height
该方法返回的对象中包含6个属性
left | right | top | bottom | height | width
其中 height | width 是 CSS设置的height和width值,与box-sizing无关。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值