前端必须知道的CSS原理

2020-05-05  本文已影响0人  lisashare

清除浮动原理

一说到清除浮动，作为前端开发者都不陌生，使用最普遍的方法就是下面这段代码了

.clearfix:after{
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

为什么要清除浮动，最常见的是因为外层容器高度坍塌，下面用一段代码演示一下：

<style>
.wrap {
    width: 300px;
    border: 1px solid #333;
}
.wrap:after {
    content: 'after伪元素'; /* Firefox7.0前的版本会生成空格，应写为content: "."; */
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clearfix {
    *zoom: 1;    /* IE6-7专有的清除浮动的方式(其他浏览器会忽略) */
}
.left {
    float: left;
    background: blue;
    height: 100px;
    width: 100px;
}
.right {
    float: left;
    background: red;
    height: 50px;
    width: 100px;
}
</style>
<body>
    <div class='wrap'>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

为了显示清楚一点，在.wrap:after 样式中的content设置为content: 'after伪元素' ，此时如下图所示。

image.png

随后在.wrap:after 样式中加上clear:both:display:block;，表明after伪元素左右两侧均不允许浮动元素，没办法只好把after伪元素放在下面，此时如下图所示。

image.png

顺带撑起了.wrap父元素的高度，这样就相当清除了浮动了，解决了外层容器高度坍塌的问题。
那么我们把.wrap:after 样式中的content设置为content:' ',最后就如下图所示。

image.png

BFC的概念和应用

  1. BFC的概念
    BFC的全称是 Block Formatting Contexts，“块级格式化上下文”
    Formatting Contexts是页面中的一块渲染区域，它拥有一套渲染规则，决定其子元素将如何定位，以及和其它元素的关系和相互作用。说白了就是一个决定如何渲染元素的容器。

  2. BFC的渲染规则
    那么BFC就是一个决定如何渲染元素的容器。我们要了解就是它的渲染规则。

    1. 内部的块级元素会在垂直方向，一个接一个地放置。
    2. 块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻块级元素的margin会发生重叠。
    3. 对于从左往右的格式化，每个元素（块级元素与行内元素）的左边缘，与包含块的左边缘相接触，(对于从右往左的格式化则相反)。即使包含块中的元素存在浮动也是如此，除非其中元素再生成一个BFC。
    4. BFC的区域不会与浮动元素重叠。
    5. BFC是一个隔离的独立容器，容器里面的子元素和外面的元素互不影响。
    6. 计算BFC容器的高度时，浮动元素也参与计算。

  3. BFC的渲染规则详解
    3.1 规则二
    以上渲染规则，第一点比较好理解。第二点我们用一个例子解释一下。

<body>
        <div style="width:100px;height:100px;background:red;margin:20px;"></div>
        <div style="width:100px;height:100px;background:blue;margin:20px;"></div>
</body>
image.png

按样式代码来看，红块和蓝块之间间距应该是40px。但实际上是20px。这就是BFC渲染规则的第二点。

因为BFC的触发条件之一就是根元素，所以body就是一个BFC容器，红块和蓝块是同在body下的相邻块级元素，其margin会生重叠，所以红块和蓝块之间间距只有20px。

3.2 规则三
第三点规则比较难理解我详细解释一下。首先要先理解包含块的含义。

包含块不是一个完整的box，一个完整的box包含margin包含块，border包含块，padding包含块，content包含块。

包含块有可能是box的content包含块，也可能是box的padding包含块。这取决于被包含块所包含的元素的position属性。

例如，如果某个元素position属性是absolute，包含块就是由它的最近的position的值不是 static的父级元素的padding包含块组成。
再例如，如果某个元素的position属性是static或relative，包含块就是由它的父级元素的content包含块。
如果某个元素的position属性是fixed，包含块就是视口。
那么。BFC中的元素应该与其自身的包含块相接触，而非与BFC相接触，这个包含块有可能是BFC中的一部分，也有可能和bfc无关。

正常元素都是从左往右的格式化，那么对元素的position属性是absolute,right为0，或者元素的float的属性为right，那么就是从右往左的格式化，元素的右边缘和包含块的右边缘接触。

元素H触发生成BFC，其中有两个元素A和元素B，元素A的float的属性为left，那么元素A的左边缘和元素H（也是元素A的包含块）左边缘接触，如果元素B的float的属性也为left，元素B的左边缘不和元素H的左边缘接触，而是和元素A的右边缘接触。这种情况就可以用规则中的“即使包含块中的元素存在浮动也是如此，除非其中元素再生成一个BFC”来解释，元素的float的属性不为none会触发生成BFC，所以这种情况是不矛盾的。

image.png

3.3 规则四
这点是BFC最重要的一点渲染规则，可以用这个规则解决很多布局的问题。

3.4 规则五
这个规则，可以用来解决内部元素浮动，导致父级元素的高度坍塌问题。

  1. BFC的触发条件
    根元素
    float的值不是none。
    position的值不是static或者relative。
    display的值是inline-block、inline-flex、flex、flow-root、table-caption、table-cell。
    overflow的值不是visible。
  2. BFC的应用
<body>
    <div style="width:100px;height:100px;background:red;margin:20px;"></div>
    <div style="overflow:auto">
        <div style="width:100px;height:100px;background:blue;margin:20px;"></div>
    </div>
</body>

<style>
    .main{
        background: red;
        height:300px;
        // overflow: auto;
    }
    .sider {
        float: left;
        width: 20%;
        height: 200px;
        background: green;
    }
</style>
<body>
    <div class="sider">我是侧边栏</div>
    <div class="main">我是主体内容</div>
<body>
image.png

首先我们根据规则1，要先把.sider div写在.main div前面。这个.sider div才会浮动起来覆盖在.main div上面。
再根据规则4（BFC的区域不会与浮动元素重叠），给.main加上overflow:auto;触发.main div生成BFC。

image.png

FFC的概念和应用

  1. FFC的概念
    FFC的全称是Flex Formatting Contexts，弹性盒模型。
  2. FFC的生成条件
    父级元素设置display:flex;
  3. FFC的渲染规则
    可以看阮一峰的Flex布局教程：语法篇，讲的非常详细。
    要注意一点。生成FFC后，其子元素的float、clear和vertical-align属性将失效。
  4. FFC的应用
image.png image.png

注意：因为该属性可能会有浏览器兼容问题，所以我在移动端项目中应用较多！


image.png

IFC的概念和应用

  1. IFC的概念
    IFC的全称是Inline Formatting Contexts，也就是“内联格式化上下文”。
  2. IFC的生成条件
    IFC的形成条件非常简单，块级元素中仅包含内联级别元素，需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC。
  3. IFC的渲染规则
    子元素水平方向横向排列，并且垂直方向起点为元素顶部。
    子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。
    在垂直方向上，子元素会以不同形式来对齐（vertical-align）
    能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。
    IFC中的“line box”一般左右边贴紧其包含块，但float元素会优先排列。
    IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同。
    当 inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定。
    当一个“inline box”超过父元素的宽度时，它会被分割成多个boxes，这些 boxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素。
  4. IFC的应用

来源：https://juejin.im/post/5ea45801e51d4546d4399055

上一篇 下一篇

猜你喜欢

热点阅读