深入理解CSS盒模型及BFC

本文章将会从以下几个方面谈谈盒模型。

  • 基本概念:标准模型 IE模型
  • CSS如何设置这两种模型
  • JS如何设置获取盒模型对应的宽和高
  • 实例题(根据盒模型解释边距重叠)
  • BFC(边距重叠解决方案)

1.基本概念

盒模型由外而内包括:边距(margin)、边框(border)、填充(padding)、内容(content)。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。

盒模型是有两种标准的,一个是w3c标准盒模型,一个是IE模型。

#box{
    width: 200px;
    height: 200px;
    border: 2px solid black;
    padding: 50px;
    margin: 50px;
}

在标准的盒子模型中,widthcontent部分的宽度

IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高

2.Css如何设置两种模型

这里用到了CSS3 的属性 box-sizing

/* 标准模型 */
box-sizing:content-box;
 /*IE模型*/
box-sizing:border-box;

3.JS获取宽高

通过JS获取盒模型对应的宽和高,有以下几种方法:

为了方便书写,以下用dom来表示获取的HTML的节点。

1).  dom.style.width/height 

这种方式只能取到dom元素内联样式所设置的宽高,也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话,通过这种方法是获取不到dom的宽高的。

 2). dom.currentStyle.width/height 

这种方式获取的是在页面渲染完成后的结果,就是说不管是哪种方式设置的样式,都能获取到。但这种方式只有IE浏览器支持。

 3). window.getComputedStyle(dom).width/height

这种方式的原理和2是一样的,这个可以兼容更多的浏览器,通用性好一些。

 4). dom.getBoundingClientRect().width/height

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

语法:这个方法没有参数。

rectObject = object.getBoundingClientRect();

返回值类型:TextRectangle对象,每个矩形具有四个整数性质( 上,   下,和左 )表示的坐标的矩形,以像素为单位。

 rectObject.top:元素上边到视窗上边的距离;

 rectObject.right:元素右边到视窗左边的距离;

 rectObject.bottom:元素下边到视窗上边的距离;

 rectObject.left:元素左边到视窗左边的距离;

 5).dom.offsetWidth/offsetHeight

这个就没什么好说的了,最常用的,也是兼容最好的。

4.边距重叠

4.1 什么是边距重叠

如下图,父元素没有设置margin-top,而子元素设置了margin-top20px;可以看出,父元素也一起有了边距。

https://images2017.cnblogs.com/blog/1265396/201711/1265396-20171119160218265-419904943.png          

Css代码:   

       *{
            margin:0;
            padding:0;
        }

        .demo{
            height:100px;
            background: #eee;
        }

        .parent{
            height:200px;
            background: #88f;
        }

        .child{
            height:100px;
            margin-top:20px;
            background: #0ff;
            width:200px;
        }

   HTML:

    <section class="demo">
        <h2>此部分是能更容易看出让下面的块的margin-top。</h2>
    </section>
    <section class = "parent">
        <article class="child">
            <h2>子元素</h2>
            margin-top:20px;
        </article>
        <h2>父元素</h2>
        没有设置margin-top
    </section>

5.边距重叠解决方案(BFC)

5.1 BFC 定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

5.2 BFC布局规则:

  1. 内部的Box会在垂直方向,一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Boxmargin会发生重叠
  3. 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  4. BFC的区域不会与float box重叠。
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算BFC的高度时,浮动元素也参与计算

5.3 怎么创建bfc?

  1. 根元素
  2. float属性不为none
  3. positionabsolutefixed
  4. displayinline-block, table-cell, table-caption, flex, inline-flex
  5. overflow不为visibl

5.4 应用场景

  1. 自适应两栏布局
  2. 清除内部浮动 
  3. 防止垂直margin重叠

5.4.1. 自适应两栏布局

<style>
    body {
        width: 300px;
        position: relative;
    }
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
    .main {
        height: 200px;
        background: #fcc;
    }

</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

页面:

æ­¤å¤è¾å¥å¾ççæè¿°

根据BFC布局规则第3条:每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。因此,虽然存在浮动的元素aslide,但main的左边依然会与包含块的左边相接触。

根据BFC布局规则第四条:BFC的区域不会与float box重叠。我们可以通过通过触发main生成BFC 来实现自适应两栏布局。

.main {
    overflow: hidden;
}

  当触发main生成BFC后,这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度,和aside的宽度,自动变窄。效果如下:

  æ­¤å¤è¾å¥å¾ççæè¿°

 

5.4.2. 清除内部浮动

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }

</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

  效果:
  æ­¤å¤è¾å¥å¾ççæè¿°

根据BFC布局规则第六条:计算BFC的高度时,浮动元素也参与计算。为达到清除内部浮动,我们可以触发par生成BFC,那么par在计算高度时,par内部的浮动元素child也会参与计算。

.par {
    overflow: hidden;
}

  效果如下:
  æ­¤å¤è¾å¥å¾ççæè¿°

 

5.4.3. 防止垂直 margin 重叠

<style>
        *{
            margin:0;
            padding:0;
        }
        .top{
            background: #0ff;
            height:100px;
            margin-bottom:30px;
        }
        .bottom{
            height:100px;
            margin-top:50px;
            background: #ddd;
        }

</style>
<body>
    <section class="top">
        <h1>上</h1>
        margin-bottom:30px;
    </section>
    <section class="bottom">
        <h1>下</h1>
        margin-top:50px;
    </section>
</body>

效果图

https://images2017.cnblogs.com/blog/1265396/201711/1265396-20171119161022452-975612504.png

 bfc可以解决垂直margin重叠的问题

    <section class="top">
        <h1>上</h1>
        margin-bottom:30px;
    </section>

    <!-- 给下面这个块添加一个父元素,在父元素上创建bfc -->
    <div style="overflow:hidden">
        <section class="bottom">
            <h1>下</h1>
            margin-top:50px;
        </section>
    </div>

效果图 

https://images2017.cnblogs.com/blog/1265396/201711/1265396-20171119163900593-72016238.png

其实以上的几个例子都体现了BFC布局规则第五条

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。因为BFC内部的元素和外部的元素绝对不会互相影响,因此, BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

参考文章:

  1. 前端精选文摘:BFC 神奇背后的原理
  2. 深入理解CSS盒模型

 

阅读更多

没有更多推荐了,返回首页