专栏
稳拿计划
扫码关注公众号
扫码关注公众号
如何设置怪异盒模型，与普通盒模型区别（解决盒子加上了边框，宽度溢出的问题）
表示怪异盒模型（移动布局）CSS语法：border-sizing:border-box规则：width+margin(左右)（即width已经包含了padding和border值）标准盒模型CSS语法：border-sizing:content-box规则：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
标准模型和IE模型的区别？
【解析】问题简答标准模型和ie模型的区别是计算宽width高height的不同。1.标准模型width不计算padding和border；2.ie模型width计算padding和border；知识解析标准盒模型（W3C盒子模型）设置的宽高是对实际内容content的宽高进行设置，内容周围的border和padding另外设置;即元素实际占位的宽高为：width【height】=设置的content的宽【高】+padding+border+margin可以通过实例来理解：写一个div，同时设置了宽、高、边框、内边距、外边距；//注：如果下面示例未写html和css,说明与此处相同.box{width:100px;height:100px;border:10pxsolid#CC9966;padding:30px;margin:40px;background:#66FFFF;}<divclass="box">Axjy</div>效果及Chrome的开发者工具中显示的盒模型如下：可以看到content部分即为100×100，内容周围都是另外设置的，width=40+10+30+100+30+10+40=180；IE盒子模型（怪异盒模型）设置的宽高是对实际内容content+内边距（padding）+边框（border）之和的width和height进行设置的;即元素实际占位的宽高为：width（height）=设置的width（height）+外边距margin和上面使用同样的例子，但是通过设置box-sizing:border-box;，把它变为IE盒模型；.box{width:100px;height:100px;border:10pxsolid#CC9966;padding:30px;margin:40px;background:#66FFFF;box-sizing:border-box;//注意}<divclass="box">Axjy</div>效果及Chrome的开发者工具中显示的盒模型如下：可以很明显的看到，正方形和上面的比小了一圈，width=40+10+30+20+30+10+40=100;
根据盒模型解释边距重叠。
【解析】问题简答外边距重叠是指两个【垂直】【相邻】的块级元素，当上下两个边距相遇时，其外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。（水平方向不会发生）根据W3C文档的说明，当符合以下条件时，就会触发外边距重合1.都是普通流中的元素且属于同一个BFC2.没有被padding、border、clear或非空内容隔开3.两个或两个以上垂直方向的「相邻元素」相邻元素包括父子元素和兄弟元素重叠后的margin计算1.margin都是正值时取较大的margin值2.margin都是负值时取绝对值较大的，然后负向位移。3.margin有正有负，从负值中选绝对值最大的，从正值中选取绝对值最大的，然后相加边距重叠详解及解决方案1、嵌套块（父子）元素垂直外边距的合并对于两个嵌套关系的块元素，如果父元素没有padding-top及border，则父元素的margin-top会与子元素的margin-top发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。解决办法1.为父元素定义1px的border-top或padding-top。2.为父元素添加overflow:hidden。3.子元素或父元素设置display:inline-block。4.父元素加前置内容（::before）生成。（推荐）2、相邻块（兄弟）元素垂直外边距的合并（外边距塌陷）当上下相邻的两个块元素相遇时，如果1.上面的元素有下外边距margin-bottom，2.下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。解决办法1.为了达到想要的间距，最好在设置margin-top/bottom值时统一设置上或下；2.或者用以下的BFC解决，下面有详解
JS如何设置/获取盒模型对应的宽和高？
【解析】问题简答1)dom.style.width/height【只能取到内联元素】2)dom.currentStyle.width/height【只有IE支持】3)document.getComputedStyle(dom,null).width/height4)dom.getBoundingClientRect().width/height5)dom.offsetWidth/offsetHeight【常用】知识解析1、dom.style.width/height通过dom节点的style样式获取，只能取到行内样式的宽和高，style标签中和link外链的样式取不到.box{...}----------------------------lettargetDom=document.querySelector('.box');letwidth=targetDom.style.width;letheight=targetDom.style.height;console.log("width",width)console.log("height",height)使用类设置宽高时获取的宽高为空<style>box{width:100px;height:100px;border:10pxsolid#CC9966;padding:30px;margin:40px;background:#66FFFF;box-sizing:border-box;}</style></head><body><divclass="box"></div></body>>lettargetDom=document.querySelector('.box');letwidth=targetDom.style.width;letheight=targetDom.sty1e.height;console.1og("width",width)console.1og("height",height)widthheight在行内设置宽高时获取的是行内设置的宽高<body><divclass="box"style="width:100px;height:100px;"></div></body>>lettargetDom=document.querySelector('.box');letwidth=targetDom.sty1e.width;letheight=targetDom.style.height;console.1og("width",width)console.1og("height",height)width100pxheight108pxelement.style.xxx这种只能取得内嵌样式的属性，获取样式能读能写2、dom.currentStyle.width/height取到的是最终渲染后的宽和高，如果有设置宽高，则不论哪种盒模型获取到的都是设置的宽高,只有IE兼容.box{...同上}----------------------------lettargetDom=document.querySelector('.box');letwidth=targetDom.currentStyle.width;letheight=targetDom.currentStyle.height;element.currentStyle[xxx]可以取得内部和外部样式，但是只兼容ie浏览器，获取的样式只能读3、document.getComputedStyle(dom,null).width/height取到的是最终渲染后的宽和高，如果有设置宽高，则不论哪种盒模型获取到的都是设置的宽高，和currentStyle相同，但是兼容性更好，IE9以上支持。getComputedStyle()方法,1.第一个参数：取得计算样式的元素；2.第二个参数：一个伪元素字符串（例如“:after”），如果不需要伪元素信息，默认为null；.box{...同上}----------------------------lettargetDom=document.querySelector('.box');letwidth=window.getComputedStyle(targetDom).widthletheight=window.getComputedStyle(targetDom).heightconsole.log("width",width)console.log("height",height)〉lettargetDom=document.querySelector('.box');letwidth=window.getComputedstyle(targetDom).widthletheight=window.getComputedStyle(targetDom).heightconsole.log("width",width)console.1og("height",height)width100pxheight108px4、dom.getBoundingClientRect().width/height得到渲染后的宽和高，大多浏览器支持。IE9以上支持。.box{...同上}----------------------------lettargetDom=document.querySelector('.box');letwidth=targetDom.getBoundingClientRect().width;letheight=targetDom.getBoundingClientRect().heightconsole.log('width',width)console.log('height',height)标准模型，宽高设置为100的结果，额外包括了padding和border的值；>lettargetDom=document.querySelector('.box');letwidth=targetDom.getBoundingClientRect().width;letheight=targetDom.getBoundingClientRect().heightconsole.1og('width',width)console.1og('height',height)width180height180IE模型，宽高设置为100的结果；>lettargetDom=document.querySelector('.box');letwidth=targetDom.getBoundingClientRect().width;letheight=targetDom.getBoundingClientRect().heightconsole.1og('width',width)console.1og('height',height)width100height1005、dom.offsetWidth/offsetHeight（常用）包括高度（宽度）、内边距和边框，不包括外边距。最常用，兼容性最好。.box{...同上}----------------------------lettargetDom=document.querySelector('.box');letwidth=targetDom.offsetWidth;letheight=targetDom.offsetHeight;console.log('width',width)console.log('height',height)标准模型，宽高设置为100的结果；>lettargetDom=document.querySelector('.box');letwidth=targetDom.offsetWidth;letheight=targetDom.offsetHeight;console.1og('width',width)console.1og('height',height)width180height180IE模型，宽高设置为100的结果；>lettargetDom=document.querySelector('.box');letwidth=targetDom.offsetWidth;letheight=targetDom.offsetHeight;console.1og('width',width)console.1og('height',height)width100height100
