css盒模型总结

最新推荐文章于 2023-02-08 16:12:14 发布

Elon丶

最新推荐文章于 2023-02-08 16:12:14 发布

阅读量173

点赞数 2

分类专栏：经验总结前端爬坑

本文链接：https://blog.csdn.net/daiwu4044/article/details/81910539

版权

经验总结同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

前端爬坑

13 篇文章 0 订阅

订阅专栏

                    
                        
                    
                    css盒模型 
css盒模型由margin、border、padding、content组成。 
css盒模型分为IE盒模型和标准盒模型。之间的却别在与对于宽高的计算不同 
 IE盒模型认为content包括border,padding,width/height 
 标准盒模型认为content只包含width/height
 
改变盒模型的方法 
标准盒模型: box-sizing:content-box 
ie盒模型: box-sizing:border-box
 
js获取样式的方法 
dom.style.width ⇒ 这种方法只能获取内联样式，无法获取外部引入的样式。
window.getComputedStyle(box).width ==> 获取到的是计算后的属性。但是此方法是ie的专有属性，存在兼容性的问题
dom.getBoundClientRect().width ==> 获取到元素的绝对位置，也可以获取到元素的宽和高
 
边距重叠 
BFC（快捷格式上下文）
                