盒模型与BFC

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

# 盒模型与BFC #

### 1. 什么是盒子模型？ ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]

### 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盒模型 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]

##### 怎么获取和设置box的内容宽高 #####

##### IE： dom.currentStyle.width/height #####

###### 非IE: window.getComputedStyle(dom).width/height ######

var obj = document.getElementById("box");
    
    var style = null;
    if (window.getComputedStyle) { 
        style = window.getComputedStyle(obj, null);    // 非IE
    } else {  
        style = obj.currentStyle;  // IE
    }
    alert("width=" + style.width + "\nheight=" + style.height);

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

###### 详见另一篇博客BFC ######

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]: /images/20221120/c22f1f8132914a7ea156ed010aa7bb9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201201212740871.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70