十分钟复习CSS盒模型与BFC

verano 发布于2019-08-02 10:48 / 946人阅读

摘要：盒模型与本文为收集整理总结网上资源旨在系统复习盒模型与节省复习时间阅读分钟什么是盒模型每一个文档中，每个元素都被表示为一个矩形的盒子它都会具有内容区盒模型主要分两种标准盒模型盒模型怪异盒模型两者的区别标准盒模型的宽高则为内容区域的宽高盒模型

css盒模型与BFC

本文为收集整理总结网上资源

旨在系统复习css盒模型与bfc

节省复习时间

阅读10分钟

什么是盒模型

每一个文档中，每个元素都被表示为一个矩形的盒子,它都会具有内容区、padding、border、margin

.png)

盒模型主要分两种

标准盒模型

IE盒模型(怪异盒模型)

两者的区别：

标准盒模型的宽高则为内容区域的宽高

IE盒模型则宽高为 border + padding + 内容区

如何切换盒子模型?

使用box-sizing来进行切换

border-box 切换为IE盒模型

content-box 默认属性为标准模式

盒模型的边距重叠

主要分三种重叠，重叠规则：一大一小取最大,一正一负取和

相邻元素之间的重叠

父子嵌套的重叠

空的块级元素

1.相邻元素之间

// css
* {
  margin:0;
  padding:0;
  border:0;
}

#d1 {
  width:100px;
  height:100px;
  margin-top:20px;
  margin-bottom:20px;
  background-color:red;
}

#d2 {
  width:100px;
  height:100px;
  margin-top:10px;
  background-color:blue;
}

// html

2.父子嵌套重叠

// css

* {
  margin:0;
  padding:0;
  border:0;
}

#outer {
  width:300px;
  height:300px;
  background-color:red;
  margin-top:20px;
}

#inner {
  width:50px;
  height:50px;
  background-color:blue;
  margin-top:10px;
}

// html

3.空的块级元素

BFC (边距重叠处理方案) 什么是BFC

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

块级盒

每个块级盒子都会参与块格式化上下文（block formatting context）的创建，而每个块级元素都会至少生成一个块级盒子，即主块级盒子（principal block-level box）

有时候定义了一个块级元素,设置了宽高虽然占据一行在chrome下会发现除了元素以外的一个包裹盒子像margin一样的颜色,这个就是块级盒;

每一个块级元素会生成一个

块级盒子的几种特性

块级盒会在垂直方向，一个接一个地放置，每个盒子水平占满整个容器空间

块级盒的垂直方向距离由上下 margin 决定，同属于一个 BFC 中的两个或以上块级盒的相接的 margin 会发生重叠

BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

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

如何创建BFC?

根元素或包含根元素的元素

浮动元素（元素的 float 不是 none）

绝对定位元素（元素的 position 为 absolute 或 fixed）

overflow 值不为 visible 的块元素

display的值为inline-block、table-cell、table-caption

BFC的应用？

清除浮动

布局

解决块级盒边距重叠

布局

原理就是触发BFC重新计算元素尺寸

// html


    开始清除浮动清除浮动清除浮动....


// css
    *{
        margin: 0;
        padding: 0;
    }
        div{
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
        p{
            background: #f0faa5;
            overflow: hidden;
        }

清除浮动

// html

        
            float1    
        
        
            float2
        
    
    
//css
*{
    margin: 0;
    padding: 0;
}
div{
    width: 100px;
    height: 100px;
    background: green;
    float: left;
}
.div2{
    background: red;
}
.divwrap{
    border:3px solid #000;
    overflow: hidden;
}

解决边距重叠

// html

        
            hello world
        
    

    
        hello world
    
    
        hello world
    

// css
    *{
        margin: 0;
        padding: 0;
    }
    .BFC{
        overflow:hidden;
    }
    p{
        color:black;
        background:#D499B9;
        line-height:100px;
        width:200px;
        text-align:center;
        margin:50px;
    }

最后

最后感谢每个阅读的小伙伴与所有写博客分享的人

参考资料

MDN-CSS盒模型

MDN-外边距合并

w3school-外边距重叠

MDN-视觉格式化模型

MDN-块格式化上下文

芋头君-CSS之BFC详解

OBKoro1-布局概念关于CSS-BFC深入理解

云服务器 GPU云服务器盒模型盒模型html吗简述html盒模型对象模型与数据模型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52564.html

十分钟复习CSS盒模型与BFC

摘要：盒模型与本文为收集整理总结网上资源旨在系统复习盒模型与节省复习时间阅读分钟什么是盒模型每一个文档中，每个元素都被表示为一个矩形的盒子它都会具有内容区盒模型主要分两种标准盒模型盒模型怪异盒模型两者的区别标准盒模型的宽高则为内容区域的宽高盒模型 css盒模型与BFC 本文为收集整理总结网上资源旨在系统复习css盒模型与bfc 节省复习时间阅读10分钟什么是盒模型每一个文档中，每...

suxier 2019-08-30 15:53 评论0 收藏0
一篇文章带拿下盒模型BFC渲染机制

摘要：它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。一个的范围包含创建该上下文元素的所有子元素，但不包括创建了新的子元素的内部元素。走在前端的大道上本篇将自己读过的相关盒模型BFC 文章中，对自己有启发的章节片段总结在这（会对原文进行删改）,会不断丰富提炼总结更新。一.常见定位方案在讲 BFC 之前，我们先来了解一下常见的...

DangoSky 2019-08-30 15:55 评论0 收藏0
CSS盒模型与BFC

摘要：什么是盒模型概念每一个文档中，每个元素都被表示为一个矩形的盒子它都会具有内容区。不同类型的，会参与不同的一个决定如何渲染文档的容器，因此内的元素会以不同的方式渲染。最常见的有简称和简称。根据布局规则第四条的区域不会与重叠。 1.什么是CSS盒模型 1.1 概念每一个文档中，每个元素都被表示为一个矩形的盒子,它都会具有内容区、padding、border、margin。盒模型分为两种：...

mmy123456 2019-08-29 17:29 评论0 收藏0
常见的面试问题：【CSS】CSS盒模型

摘要：标准盒模型盒子总宽度高度。以上支持，除此外还可以取到相对于视窗的上下左右的距离。包括高度宽度内边距和边框，不包括外边距。主要看怎么父元素的盒模型如何设置。空元素的边距重叠是取与的最大值。一、概念 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。CSS盒模型：标准模...

android_c 2019-08-30 15:44 评论0 收藏0