让前端飞程序员

一周一章前端书·第24周：《HTML与CSS进阶教程》S02E1

2018-02-21  本文已影响58人  梁同学de自言自语

第14章：重要概念

14.1 containing block(包含块)

14.1.1 什么是包含块

14.1.2 包含块的判断以及范围

根元素的包含块
固定元素的包含块
静态/相对定位元素的包含块
绝对定位元素的包含块
包含块的范围

14.2 BFC和IFC

14.2.1 基本概念

说明：除了块盒子(block-level box)和行内盒子(inline-level box)之外，CSS3还增加了一个run-in box盒子。

14.2.2 什么是BFC

创建BFC

注意：display:block/table的元素会参与BFC，但不会创建BFC。

BFC的特点

14.2.3 BFC的用途

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .wrapper{
                width: 200px;
                border: 1px dashed gray;
                /*为wrapper创建BFC*/
                overflow: hidden;
            }
            
            /*为B创建BFC*/
            #bfc-box{
                overflow: hidden;
            }
            
            #A,#B{
                height: 60px;
                line-height: 60px;
                text-align: center;
                font-size: 30px;
                color-interpolation: #000;
                background-color: purple;
            }
            
            #A{
                margin-bottom: 20px;
            }
            
            #B{
                margin-top: 30px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <!-- A处于为wrapper的BFC -->
            <div id="A"></div>
            <!-- B处于为bfc-box的BFC -->
            <div id="bfc-box">
                <div id="B"></div>
            </div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>创建BFC清除包含的浮动</title>
        <style type="text/css">
            .wrapper{
                width: 200px;
                border: 1px dashed gray;
                /*由于父容器没定义高度，会造成父容器高度塌陷，通过创建BFC解决，因为BFC在计算自身高度时会把子元素的高度计算进去*/
                overflow: hidden;
            }
            
            #first,#second{
                width: 80px;
                height: 40px;
                border: 1px solid brown;
            }
            
            #first{
                float: left;
            }
            
            #second{
                float: right;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div id="first"></div>
            <div id="second"></div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>创建BFC避免文字环绕</title>
        <style type="text/css">
            .wrapper{
                width: 400px;
                height: 200px;
                border: 1px solid gray;
                padding: 10px;
            }
            
            img{
                width: 40px;
                height: 40px;
                float: left;
            }
            
            #content{
                background-color: papayawhip;
                /*由于浮动的img层叠级别比普通文档流高，创建BFC后不会和同级的浮动元素重叠*/
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <img src="../img/weibo.png"/>
            <div id="content">【核电站事故102岁老人拒绝避难自杀 东电被下赔偿命令】东京电力福岛第一核电站事故发生后，在福岛县饭馆村自杀的102岁男性之遗属，向东电要求精神损失费等损害赔偿的诉讼判决，已于20日在福岛地方法院进行。判决命令东电支付1520万日元(约合人民币89万元)</div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #sidebar{
                float: left;
                width: 100px;
                height: 150px;
                background-color: aliceblue;
            }
            
            #content{
                height: 200px;
                width: auto;
                background-color: #CCCCCC;
                /*创建BFC使得浮动元素不会覆盖自己*/
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="sidebar"></div>
        <div id="content"></div>
    </body>
</html>

14.3 stacking content(层叠上下文)

14.3.1 什么是层叠上下文

14.3.2 什么是层叠级别

注意：层叠上下文和层叠级别是两个不同的概念

14.3.3 层叠上下文的特点

上一篇 下一篇

猜你喜欢

热点阅读