CSS盒模型及相关知识点

时间：2023-04-02 22:37:23 HTML

CSS盒模型及相关知识点盒模型有哪些类型-标准盒模型-IE盒模型两者的区别在于宽高的计算方式：标准框模型宽度=内容宽度；IE核心模型width=contentwidth+padding+borderCSS如何设置这两个模型box-sizing:border-boxbox-sizing:content-box用例子来验证：

。框{宽度：100px;高度：100px；填充：10px；边距：10px；边框：5px实心#ccc；背景色：#ccc；紫色部分——区域用padding表示灰色部分——区域用border表示米色部分——区域用margin表示部分细心的读者可以看出，从上图中，如果box-sizing没有设置，默认值为content-box，表示是标准的盒子模型。那我们看看最终渲染后的盒子模型是什么样子的？+padding+border，验证我们说的是否正确width=70+10+10+5+5表示可以通过box-sizing:border-box表示为IE模型；从上面可以看出，不同的模型计算方法是不同的。先列举下如何在JS中获取盒子模型对应的高度和宽度下面是几种常用的方法，然后再说明document.styledocument.currentStylewindow.getConputed的优缺点Style(Element)Element.getBoundingClientRect在讲解document.style之前，先说说CSS样式的几种设置方式：-内联样式-内联样式-外部样式表这三种具体代码表示如下：

/*内联样式*/

/*内联样式*//*外部样式表a.css*/同等权重下，优先级为内联样式>内联样式>外部样式。document.styleHTMLElement.style属性返回一个CSSStyleDeclaration对象，表示元素的内联样式属性（attribute），但忽略任何样式表应用的属性说白了就是通过内联样式和外部样式表来设置一个元素的样式，不能通过document.style获取。注意：document.style返回的对象是只读的，不能直接通过document.style="color:#ccc"直接为其设置样式，否则设置不会生效。一般推荐的方法如下：varele=document.querySelector(".box");//单属性设置ele.style.color="#ccc";//使用一条语句设置多个样式ele.setAttibute("style","color:#ccc;border:1pxsolidred;");//orele.style.cssText="color:#ccc;border:1pxsolidred;"回到第一个实例，尝试通过document.style获取元素的宽度。varele=document.querySelector(".box");ele.style.width//""根据前面的内联CSS，给元素指定了width\height，但是没有获取到；也就是说，它只包含在style属性（attibute）上声明的CSS样式。通过style属性给元素添加属性：

varele=document.querySelector(".box");ele.style.width//"100px"从两种模式中，得到的宽度是一样的，document.s样式表示样式的宽度；它不代表渲染框的大小。优点——兼容性好缺点——只能获取通过style属性设置的样式。document.currentStyle.width弥补了document.style的不足，可以获取内联、内联和外部样式表设置样式。