HTML/CSS -- CSS盒模型

基本概念

CSS盒模型分为俩种：

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

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

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

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

    <style>
        #target{
            width:60px;height:60px;background:red;
        }
    </style>
     
    <div id = "target"></div>

    <script>
       const target =  document.getElementById("target");
       console.log(window.getComputedStyle(target).width);
       console.log(window.getComputedStyle(target).height);
    </script>

此方法可以获取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属性。

    <style>
        #target{
            width:60px;height:60px;background:red;
        }
    </style>
     
    <div id = "target"></div>

    <script>
        
       const target =  document.getElementById("target");
       console.log(target.getBoundingClientRect().width);
       console.log(target.getBoundingClientRect().height);
    </script>

好了回归正题，我们继续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重叠（兄弟元素）

    <style>
        #item1 {
            width: 100px;
            height: 100px;
            background: red;
            margin-bottom: 20px;
        }
        #item2 {
            width: 100px;
            height: 100px;
            background: green;
            margin-top: 10px;
        }
    </style>
    <div id = "item1"></div>
    <div id = "item2"></div>

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

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

    <div class = "bfc"> <div id = "item1"></div></div>
    <div class = "bfc"> <div id = "item2"></div></div>

 .bfc{
            overflow: hidden;
        }

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

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

    <style>
       .wrap-box2 {
           background: green;
           width: 300px;
           height: 100px;
       }
       .wrap-box1 {
           background: red;
           width: 300px;
       }
       .item {
           height: 100px;
           background: orange;
           margin-top: 10px;
       }
    </style>
    <div class = "wrap-box2"></div>
    <div class = "wrap-box1">
        <div class = "item"></div>
    </div>

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

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

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

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

   <style>
       .wrap{
           background: green;
         
       }
       .item {
           width: 300px;
           height: 100px;
           background: red;
       }
       .left {
           float: left;
       }
       .right {
           float: right;
       }
   </style>
   
    <div class = "wrap">
        <div class = "item left"></div>
        <div class = "item right"></div>
    </div>

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

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

我们来看一下这种情况

   <style>
      
       .item {
           width: 300px;
           height: 100px;
           background: red;
       }
       .left {
           float: left;
       }
       .right {
           float: right;
       }
       .center {
           height: 150px;
           background: green;
       }
   </style>
   
    <div class = "wrap">
        <div class = "item left"></div>
        <div class = "item right"></div>
        <div class ="center"></div>
    </div>

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

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

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

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

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

其实这些的来源就是BFC。

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

HTML/CSS -- CSS盒模型

猜你喜欢