HTML/CSS -- CSS盒模型

Dear 丶 2022-03-30 05:25 242阅读 0赞

基本概念

CSS盒模型分为俩种：

**1：标准盒模型     2：IE盒模型**

它们俩个的区别在于width和height的计算方式区别

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1][]

那么如何设置这俩种模式了？

**box-sizing: content-box;    标准模式**

**box-sizing: border-box;      IE模式**

顺便提一下如何通过JS获取width和height

1：dom.style.width和dom.style.height

<div id = "target" style = "width:60px;height:60px;background:red;" ></div>
    
        <script>
           const target =  document.getElementById("target");
           console.log(target.style.width);
           console.log(target.style.height);
        </script>

这个方法的确可以，但是仅仅对于通过内联样式赋值的这一种情况。

2：window.getComputedStyle(dom).width 和 window.getComputedStyle(dom).height

此方法可以获取dom的width,hieght值（chrome和fireFox都可以）

3: dom.currentStyle.width 和 dom.currentStyle.height

此方法和上面方法类似（仅仅IE支持）

4：dom.getBoundingClientRect().width 和dom.getBoundingClientRect().height()

getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

width和height：ie9以上支持width/height属性。

好了回归正题，我们继续CSS盒模型，下面我讨论一个重要的内容BFC。

BFC(块级格式化上下文)   简单的说，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用 。

除此之外还有IFC(I 代表行内元素） GFC(G代表Grid)  FFC(F代表Flex)

产生BFC的原因

*  根元素
 *  float的值不为none
 *  overflow的值不为visible
 *  display的值为inline-block、table-cell、table-caption  （table之所以可以产生BFC是因为生成了一个匿名的table-cell)
 *  position的值为absolute或fixed

BFC的约束规则

*  内部的Box会在垂直方向上一个接一个的放置
 *  垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
 *  每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
 *  BFC的区域不会与float的元素区域重叠
 *  计算BFC的高度时，浮动子元素也参与计算
 *  BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

我们来看一下BFC的应用

1：防止同一BFC上垂直方向的margin重叠（兄弟元素）

![20190105110302827.png][]   不难看出来，处于同一BFC下面的俩个div之间的距离是取决于较大的那个margin。

我们让俩个div分别处于俩个不同的BFC中来解决，overflow: hidden开启BFC

.bfc{
                overflow: hidden;
            }

![20190105111053969.png][]

这里重点说一下，不只是垂直方向，**水平方向也可以发生margin重叠**，IE上面有例子。

2：防止同一BFC上垂直方向的margin重叠（父子元素）

![20190105112900866.png][]

我们发现wrap-box1和wrap-box2上下有10px的margin，很明显这是item的，而且wrap-box1的height是100px

我只需要在wrap-box1上面开启BFC,即可解决这个问题。

.wrap-box1 {
               background: red;
               width: 300px;
               overflow: hidden;
           }

![20190105113432523.png][]

3：BFC的高度（包含浮动元素）

![20190105114001619.png][]

我们发现div.wrap并没有撑开，这是因为float脱离文档流了，普通的计算高度，不包含它们，但是开启BFC就可以了。

![20190105114203955.png][]

.wrap{
               background: green;
               overflow: hidden;
           }

我们来看一下这种情况

![20190105115540596.png][]我们发现中间的div溢出到两边了。这并不是我们想要的，那么

如何解决了？很简单我们只需要让中间的div.center生成一个新的的BFC

.center {
               height: 150px;
               background: green;
               overflow: hidden;
           }

![20190105120733886.png][]

好了，应该对BFC有一些了解了，我们看看一些CSS简单规则

*  Block元素会扩展到与父元素同宽，所以block元素会垂直排列
 *  垂直方向上的两个相邻DIV的margin会重叠，而水平方向不会(此规则并不完全正确)
 *  浮动元素会尽量接近往左上方（或右上方）
 *  为父元素设置overflow：hidden或浮动父元素，则会包含浮动元素

其实这些的来源就是BFC。

可以去这篇博客看看，BFC就参考他的 。[BFC][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20220330/1314772ca9cf4b5b9cdb164c826a132e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1]: /images/20220330/3077e874d8094fa0808e1a325b619dd5.png
[20190105110302827.png]: /images/20220330/1c2af234db3a418681af8182ebd0fa8e.png
[20190105111053969.png]: /images/20220330/16186bad882a49f386a48522c3d4df71.png
[20190105112900866.png]: /images/20220330/ee2db98f97bc44ef80a6caed5e883997.png
[20190105113432523.png]: /images/20220330/ec0408f3d0964ecd88a7bf7e45e1c2f6.png
[20190105114001619.png]: /images/20220330/cba3ae0728784df6bc6bbe68bab9c32b.png
[20190105114203955.png]: /images/20220330/e18b792f8a5840638df61192aed2491a.png
[20190105115540596.png]: /images/20220330/b02b2ff6342540a3be676c616674c1f2.png
[20190105120733886.png]: /images/20220330/ee5aa0fdd30a497b8d33c8c338a24e8c.png
[BFC]: https://github.com/zuopf769/notebook/blob/master/fe/BFC%E5%8E%9F%E7%90%86%E5%89%96%E6%9E%90/README.md