盒模型与BFC

谁借莪１个温暖的怀抱￠ 2022-12-25 12:51 252阅读 0赞

盒模型与BFC

1. 什么是盒子模型？

在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。

在这里插入图片描述

2.盒子模型有哪两种

标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)
怪异模式下： 一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）

3. 标准和怪异模型的转换

box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

4. JS盒模型

在这里插入图片描述

怎么获取和设置box的内容宽高
IE： dom.currentStyle.width/height
非IE: window.getComputedStyle(dom).width/height
  1. var obj = document.getElementById("box");
  3. var style = null;
  4. if (window.getComputedStyle) { 
  5.     style = window.getComputedStyle(obj, null);    // 非IE
  6. } else {  
  7.     style = obj.currentStyle;  // IE
  8. }
  9. alert("width=" + style.width + "\nheight=" + style.height);

5. 盒模型产生的双边距重合问题解决

详见另一篇博客BFC

发表评论

表情：
评论列表 （有 0 条评论，252人围观）

还没有评论，来说两句吧...

相关阅读

    相关 盒模型与BFC

    1. 什么是盒子模型？ 在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外

    灰太狼灰太狼/ 0 赞/ 261 阅读

    相关 盒模型与浮动

    1.外边距有一个特别的行为被称作外边距塌陷（margincollapsing）：当两个框彼此接触时，它们的间距将取两个相邻外边界的最大值，而非两者的总和。 2.对行内盒设置宽

    素颜马尾好姑娘i素颜马尾好姑娘i/ 0 赞/ 275 阅读