css盒模型以及BFC相关

最新推荐文章于 2022-08-03 11:31:27 发布

楠丶

最新推荐文章于 2022-08-03 11:31:27 发布

阅读量183

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_43026567/article/details/102498946

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

基本概念：标准模型+IE模型

盒子模型的概念可以结合我们日常生活中的“箱子”来理解，日常生活中所见的“箱子”可以装一些物品，这里说到的盒模型，同样也可以放一些内容。

标准模型和IE模型的区别

标准模型：宽高只包含content的宽高

标准模型

IE模型：宽高包含border

IE模型

css如何设置这两种模型

box-sizing:content-box; /* 标准模型，浏览器默认 */

box-sizing:border-box; /* IE模型 */

js如何设置获取盒模型对应的宽和高

1：dom.style.width/height (只能取到通过内联样式设置的宽和高）
2：dom.currentStyle.width/height (最终拿到的是浏览器渲染完的宽和高，缺点是只有IE支持)
3：window.getComputedStyle(dom).width/height (兼容性通用性更好一些)
4：dom.getBoundingClientRect().width/height(了解)

BFC相关

BFC基本概念

-BFC全称（Block FormattingContext）翻译过来就是：块级格式化上下文，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

BFC原理/特性

1.BFC的区域不会与float的元素区域重叠

2.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

3.计算BFC的高度时，浮动子元素也参与计算

4.属于同一个BFC的两个相邻box的margin会发生重叠(塌陷)
BFC触发条件

1.浮动元素：float 除 none 以外的值

2.绝对定位元素：position 为(absolute、fixed)

3.display 为 inline-block、table-cells、flex

4.overflow 除了 visible 以外的值 (hidden、auto、scroll)
BFC应用场景

1.解决外边距重叠

html代码:

<section class="wrapper">
    <div class="demo1">demo1</div>
    <div class="demo2">demo2</div>
</section>

css代码：

		.demo1{
            width: 200px;
            height: 200px;
            background: red;
            margin-bottom: 20px;
        }
        .demo2{
            width: 200px;
            height: 200px;
            background: green;
            margin-top: 30px;
        }

效果如下：
在这里插入图片描述

浏览器解析的时候会使外边距叠加在一起，此时demo1的下边距和demo2的上边距发生了重叠，重叠的时候按照边距重叠的原则取最大值，所以demo1和demo2的外边距值为30px

这时给其中一个子元素套一个div，通过给这个DIV设置属性触发BFC就可以解决问题

<style>
    .demo1{
            width: 200px;
            height: 200px;
            background: red;
            margin-bottom: 20px;
     }
    .demo2{
            width: 200px;
            height: 200px;
            background: green;
            margin-top: 30px;
     }
    .bfc{
            overflow: hidden;
     }
    </style>
</head>
<body>
<section class="wrapper">
    <div class="bfc">
        <div class="demo1">demo1</div>
    </div>
    <div class="demo2">demo2</div>
</section>

效果如下：
在这里插入图片描述
2.高度塌陷问题

<style>
    .wrapper{
            width: 200px;
            height: 200px;
            background: green;
     }
    .box{
            width: 80px;
            height: 80px;
            background: red;
            margin: 30px;
     }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="box"></div>
</div>
</body>

效果如下：
在这里插入图片描述这时红色div的上边距和父级重叠在了一起，这时就需要触发BFC来解决这个问题,只需要给父元素添加overflow:hidden即可。

<style>
    .wrapper{
            overflow: hidden;
            width: 200px;
            height: 200px;
            background: green;
     }
     .box{
            width: 80px;
            height: 80px;
            background: red;
            margin: 30px;
     }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="box"></div>
</div>
</body>

效果如下图：
在这里插入图片描述
3.BFC不与浮动元素相重叠

<!-- BFC不与浮动元素重叠   -->
    <style>
        .layout{
            background: red;
        }
        .left{
            float: left;
            width: 100px;
            height: 80px;
            background: blue;
        }
        .right{
            height: 110px;
            background: green;

        }
    </style>
</head>
<body>
<section class="layout">
    <div class="left">left</div>
    <div class="right">right</div>
</section>

效果如下图：
在这里插入图片描述

由于left浮动了，所以right就会自动把左侧区域填满，根据BFC的原理，想要right不影响到其他区域的话就需要触发它的BFC，只需在right上添加overflow:hidden即可。
此处也体现了BFC的另一个原理就是bfc的区域不会与浮动的区域发生重叠。

 <!-- BFC不与浮动元素重叠   -->
    <style>
        .layout{
            background: red;
        }
        .left{
            float: left;
            width: 100px;
            height: 80px;
            background: blue;
        }
        .right{
            height: 110px;
            background: green;
            overflow: hidden;
        }
    </style>
</head>
<body>
<section class="layout">
    <div class="left">left</div>
    <div class="right">right</div>
</section>
</body>

效果如下图：
在这里插入图片描述

此时right就回到自己的区域再也不会影响到其他区域了

4.清除浮动原理（BFC的子元素即使是浮动元素，也会参与到高度计算）

<style>
        .wrapper{
            background: red;
        }
        .float{
            float: left;
            font-size: 40px;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="float">我是浮动元素</div>
</div>
</body>

效果如下：
在这里插入图片描述

上图中可见父元素的高度为0，是因为当普通元素遭遇到这种情况(子元素为浮动元素)，计算父元素的高度时不会把子元素的高度包含进来；而当我们把父元素设置为BFC的时候，子元素的高度才会包含进来参与到计算

解决方法：

 .wrapper{
            background: red;
            overflow: hidden;
        }
        .float{
            float: left;
            font-size: 40px;
        }

效果如下：
在这里插入图片描述

楠丶

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css盒模型以及BFC相关

基本概念：标准模型+IE模型盒子模型的概念可以结合我们日常生活中的“箱子”来理解，日常生活中所见的“箱子”可以装一些物品，这里说到的盒模型，同样也可以放一些内容。标准模型和IE模型的区别标准模型：宽高只包含content的宽高IE模型：宽高包含bordercss如何设置这两种模型box-sizing:content-box; /* 标准模型，浏览器默认 */...
复制链接

扫一扫

专栏目录