一、知识框架

03工具 - 图1

二、如何使用？

3.1显示(`display`属性类)

作用：切换组件的显示和隐藏状态
表达方式：

.d-{sm\md\lg\xl}-{value}

3.1.1基本元素

.d-none:不显示，隐藏（并不是删除，而是隐藏） .d-inline:内联元素，行内元素，不换行 .d-inline-block:行内块元素 .d-block:块级元素，换行

行内元素：
1.默认宽度和高度由元素内容所决定，设置高度宽度无效
2.可以与其他元素共用一行
如：

文本标记，a，span

块级元素：
1.独占一行
2.默认宽度100%，高度由内容所决定
3.可以设置高度宽度
如：

h1-6，p,div，ul,li,

行块元素：
整合了块级元素和行内元素的特点
1.默认宽度和高度由内容所决定
2.可以设置高度和宽度
3.可以与其他元素共用一行
如：

input img

例1

<body>
<div >
        <h1 class="d-inline border border-primary" style="height: 100px width:200px">标题1</h1>
        <h2 class="d-inline border border-danger" style="height: 200px;width: 100px">标题2</h2>
        <p> 这是很<strong class="d-block border border-primary" style="height: 100px;width: 200px">重要</strong>的一段话。详情单击 <a href="#" class="d-block border border-primary" style="height: 100px;width: 200px">链接</a></p>
    </div> 
</body>

例1运行效果：
例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            border:solid 1px red;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="box">1</div><!-- 
     --><div class="box">2</div><!-- 
     --><div class="box">3</div>
</body>
</html>

运行效果：

在div空白部分增加注释，或者删除空白部分（这样会导致格式排版不好看），可以删除盒子之间的空隙。

3.1.2表格元素（代替table标签，提高加载速度）

.d-table:作为块级表格 .d-table-cell:作为表格单元格显示(类似和),可实现垂直居中和等高 .d-table-row:作为表格行

例3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            border:solid 1px red;
            text-align: center;
            vertical-align: middle;/*垂直居中*/
            /*display: table-cell;*/

        }
    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</body>
</html>

运行结果：

加上display:table-cell之后，模拟表格的居中，运行结果如下图

3.2 浮动

3.2.1实现浮动

.float-left .float-right

例4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 100px;
            background-color: rgba(255, 0, 0, .3);
            float: left;
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: rgba(0, 255, 0, .3);
            float: left;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 255,.3);
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

三个盒子：
将box1float-left：运行结果：

盒子1，由于左浮动，相当于将木块1，向屏幕顶端向左靠拢浮动，这时，由于盒子1浮动的变化，盒子2会当做第一个元素自动代替之前的盒子1，于是出现重合的情况。

再将box2float-left：

由于盒子1，盒子2，都向左浮动，因此，盒子3会作为之前的第一个元素；而盒子2因为有了盒子1的float-left属性，因此盒子1是老大，盒子2得靠边站，于是盒子1盒子2会横向排列。

再将box3float-left：

盒子1，2,3均有float-left属性，都是同一世界的人，因此根据先来后到排序，1,2,3依次排列浮动

浮动的缺点：会脱离文档流。对于下面非浮动元素，会直接往上顶，会覆盖上面的元素，带来排版问题。
比如：上列事例中，用一个容器将三个盒子包裹起来，再将三个盒子浮动起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .container{
            border: solid 5px #00f;

        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: rgba(255, 0, 0, .3);
            float: left;
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: rgba(0, 255, 0, .3);
            float: left;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 255,.3);
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>

</body>
</html>

运行结果：

将三个盒子浮动之后：

如图，由于三个盒子左浮动，container会认为里面没有元素，所以container下面的边界会挤到上面去。
如何解决这个问题？
BS4中用.clearfix类解决

3.2.2清除浮动

clear:left，表示该元素的左侧不允许有浮动元素。
clear:right，表示该元素的右侧不允许有浮动元素。
clear:both，表示该元素的左右两侧均不允许有浮动元素。
例5：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .container{
            border: solid 5px #00f;

        }
        .box{
            float: left;

        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: rgba(255, 0, 0, .3);
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: rgba(0, 255, 0, .3);
            clear: left;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 255,.3);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>

</body>
</html>

运行效果：
box2中加入 clear:left，表示在box2的左边不允许有浮动元素，因此，box2就会“掉下去”。
那么问题来了，我想把2号盒子右边的box3消除掉，是不是，在box2中，加入clear：right就行了呢?
即：

.box2{ width: 150px; height: 150px; background-color: rgba(0, 255, 0, .3); clear: left; clear: right;

假想图：，实际运行效果:
why?
注意了：

1.box2中同时用clear，后面的clear会将前面的clear``覆盖。即相当于只使用了clear：right 2.clear属性，只能作用在自己本身，只能对前面的元素起作用，即只能消除前面的浮动元素。

那clear：right又有什么用呢？
我们来看看，
将box属性中的浮动改为右浮动

.box{ float: right; }

运行效果：
此时在box2中加入clear：right
效果：
因此无论是both，还是left，还是right，clear始终无法处理他**后面的元素**

3.2.3 利用clear实现包裹浮动元素

前面例4中提到，当元素浮动之后，容器的下边框会往上挤，认为没有元素，此时若要包裹他们该怎么办呢？
这就要利用clear属性了。
首先需要了解的是浮动的特点：会脱离文档流，因此，当浮动覆盖时，不会覆盖内容。
例6：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .container{
            border: solid 5px #00f;

        }
        .box{
            float: left;

        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: rgba(255, 0, 0, .3);
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: rgba(0, 255, 0, .3);

        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 255,.3);

        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div >12345678</div>
    </div>

</body>
</html>

运行效果：
利用clear实现包裹：
加入以下代码：
.clear-container{
clear: both;
}
<div class="clear-container">12345678</div>
运行效果：

那下面的内容怎么办？
很简单，删掉不就行了嘛。
那要实现包裹浮动元素，这里的clear-container似乎显得很多余，但是又必须存在，才能达到这种效果，这样不就显得很麻烦吗？
因此，有人想出这样的办法：
在父元素中这样处理，
在container父元素追加伪元素:

.container::after{//::after在元素内容的最后面添加新内容。
            content:'';
            display: block;
            clear: both;
            height: 0;
        }

运行效果图：

3.3可见性

3.3.1删除

.d-done:将元素隐藏，不**会占据位置**，相当于删除。

<body>
        <h1 class="d-none">hello world</h1>
        <h2>hello world</h1>
        <h3>hello world</h1>
</body>

未使用d-none：，使用d-none之后：隐藏了该元素，相当于删除了元素。

3.3.2隐藏

.invisible:也是隐藏该元素，但是会占据位置，影响排版。
如图：。
因此，大多数情况下，隐藏会优先选择d-none,因为不会占据位置，从而不会影响布局。

3.3.3针对屏幕阅读器

.sr-only:同样也是隐藏元素，但是会保留1px，像素供屏幕阅读器识别，因为如果设置0px大小，屏幕阅读器会认为没有任何元素。

3.3.4图片替换

.text-hide:将文字的部分隐藏掉，用图片去替换。

03工具