理解CSS盒模型与BFC

285 阅读6分钟

什么是盒模型

一个CSS盒模型由content、border、padding、margin组成,盒模型又分为标准模型和IE模型。标准模型和IE模型区别就是就是计算盒子的宽度和高度的不同

标准模型

标准模型的宽度和高度指的是content

1555394738484202933fae72746b49fa990eacbafb096.png

实际例子

<style type="text/css">
.box{
    width: 200px;
    height: 200px;
    border: 20px solid #FF9800;
    padding: 50px;
    margin: 50px;
}
</style>
<div class="box"></div>

image.png

最外面橙色的就是外边距区域(margin area ),往里黄色的是边框区域(border area),再往里的绿色的是内边距区域(padding area ),最里面绿色的就是内容区域(content area)了

即在标准模式下的盒模型:

盒子实际内容(content)的width/height=我们设置的width/height;
盒子总宽度/高度=width/height+padding+border+margin

IE模型

IE模型的宽度高度包括padding+border

11111111137533051be.png

实际例子

box{
    width: 200px;
    height: 200px;
    border: 20px solid #FF9800;
    padding: 50px;
    margin: 50px;
    box-sizing: border-box; // 添加box-sizing 将其盒子设置为IE盒模型
}
</style>
<div class="box"></div>

image.png

即在IE盒模型

盒子的(content)宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)
盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin

box-sizing

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素,默认值是content-box,设置或检索对象的盒模型组成模式,对应的脚本特性为boxSizing

语法:box-sizing:content-box | padding-box | border-box content-box(默认)

布局所占宽度Width:
Width = width + padding-left + padding-right + border-left + border-right
布局所占高度Height:
Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box

布局所占宽度Width:
Width = width(包含padding-left + padding-right) + border-top + border-bottom
布局所占高度Height:
Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

布局所占宽度Width:
Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

JS获取盒模型对应的宽和高

document.getElementById('dom').style.width/height //(只适用获取内联元素的宽和高-写在标签上的)
document.getElementById('dom').currentStyle.width/height //(获取渲染后的宽高,但是仅IE支持)
window.getComputedStyle(dom).width/height //(与2原理相似,但是兼容性,通用性会更好一些)
document.getElementById('dom').getBoundingClientRect().widht/height //(计算元素绝对位置,获取到6个元素left,top,bottom,right,width,height,x,y)

BFC 的基本概念

Block Formatting Context, 块级格式化上下文,一个独立的块级渲染区域,该区域拥有一套渲染规格来约束块级盒子的布局,且与区域外部无关

BFC 的原理

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

如何创建BFC

1、postion 为absolute 和fixed的元素
2、float不为none的元素
3、overflow不为visible的元素
4、弹性元素(display为 flex 或 inline-flex元素的直接子元素)
5、网格元素(display为 grid 或 inline-grid 元素的直接子元素)
6、内联块元素,即display的值为inline-block的元素;
7、流式布局根元素,display值为flow-root的元素;
8、表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)

利用BFC避免margin重叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>防止margin重叠</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    p {
        color: #f55;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
</style>
<body>
    <p>看看我的 margin是多少</p>
    <p>看看我的 margin是多少</p>
</body>
</html>

页面效果

image.png

根据BFC规则,属于同一个BFC的两个相邻的Box会发生margin重叠,所以我们可以设置,两个不同的BFC,也就是我们可以让把第二个p用div包起来,然后激活它使其成为一个BFC

 <div style="overflow: hidden;"><p>看看我的 margin是多少</p></div>

image.png

自适应两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
    .left {
        width: 100px;
        height: 100px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        font-size: 20px;
    }
 
    .right {
        height: 200px;
        background: rgb(170, 54, 236);
        text-align: center;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
</html>

页面呈现效果

image.png

因为BFC的区域不会与float box重叠,所以让right,形成一个bfc,即添加 overflow: hidden;

.right {
   height: 200px;
   background: rgb(170, 54, 236);
   text-align: center;
   font-size: 40px;
   overflow: hidden; // 添加此行代码
}

image.png

清楚浮动

我们在开发者中,常常遇到,当我们不给父节点设置高度,子节点设置浮动的时候,会发生高度塌陷,这个时候我们就要清楚浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动</title>
</head>
<style>
    .par {
        border: 5px solid rgb(91, 243, 30);
        width: 300px;
    }
    
    .child {
        border: 5px solid rgb(233, 250, 84);
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

image.png

根据BFC规则,计算BFC的高度时,浮动元素也参与计算

.par {
    border: 5px solid rgb(91, 243, 30);
    width: 300px;
    overflow: hidden;
}

image.png

margin塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       *{
           margin: 0;
           padding: 0;
       }
    .outer{
        width: 200px;
        height: 200px;
        background: red;
    }
    .inner{
        width: 50px;
        height: 50px;
        background: blue;
        margin-top:50px;

    }
    </style>
</head>
<body>
   
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

页面呈现效果如下,显然效果不一致,我们想要的效果是inner的margin-top相对.outer

image.png

解决问题,让outer盒子变成BFC元素,让里面inner单独处于一个BFC环境

.outer{
  width: 200px;
  height: 200px;
  background: red;
  overflow: hidden;
}

image.png

参看文章

CSS盒模型
什么是BFC?BFC的规则是什么?如何创建BFC?

关于我