CSS通用样式类讲解

需要导入的2个CSS样式类

 <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
 <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">

文本处理

1 文本对齐
普通对齐

<div class="text-left border">左对齐</div>
<div class="text-center border">居中对齐</div>
<div class="text-right border">右对齐</div>

响应式对齐

<div class="text-xs-left  text-sm-center text-md-right border">文本内容</div>

2 文本换行
设置边框宽度：style = "15rem;"

<div class="border mb-5 border-primary" style=" 15rem;"><!--border-primary边框有颜色;加个边框使文本换行-->
    独出前门望野田，月明荞麦花如雪。——白居易《村夜》
</div>
<h4>阻止文本换行：</h4><!--text-nowrap阻止文本换行-->
<div class="text-nowrap border border-primary" style=" 15rem;">
    独出前门望野田，月明荞麦花如雪。——白居易《村夜》
</div>

.text-truncate属性超过边框元素省略

<div class="border border-primary mb-5 text-truncate" style=" 15rem;">
    <!--添加.text-truncate类的元素，只有包含display:inline-block或display:block样式，才能实现效果-->
    独出前门望野田，月明荞麦花如雪。——白居易《村夜》
</div>

3 文本转换

<h3 class="mb-4">字母转换大小写</h3>
<p class="text-uppercase">转换成大写：hello world!</p>
<p class="text-lowercase">转换成小写：HELLO WORLD!</p>
<p class="text-capitalize">转换为每个单词的首字母大写：hello world!</p>

4 粗细和斜体

<p class="font-weight-light">独出前门望野田，月明荞麦花如雪。——白居易《村夜》（font-weight-light）</p>
<p class="font-weight-lighter">独出前门望野田，月明荞麦花如雪。——白居易《村夜》（font-weight-lighter）</p>
<p class="font-weight-normal">独出前门望野田，月明荞麦花如雪。——白居易《村夜》（font-weight-normal）</p>
<p class="font-weight-bold">独出前门望野田，月明荞麦花如雪。——白居易《村夜》（font-weight-bold）</p>
<p class="font-weight-bolder">独出前门望野田，月明荞麦花如雪。——白居易《村夜》（font-weight-bolder）</p>
<p class="font-italic">独出前门望野田，月明荞麦花如雪。——白居易《村夜》（font-italic）</p>

5 其他一些文本类
.text-reset：颜色复位。重新设置文本或链接的颜色，继承来自父元素的颜色。
.text-monospace：字体类。字体包括SFMono-Regular，Menlo，Monaco，Consolas，"Liberation Mono"，"Courier New"，monospace。
.text-decoration-none：删除修饰线。

<div class="text-muted"><!--灰色text-muted-->
    <p><a href="#" class="text-reset">独出前门望野田，月明荞麦花如雪。——白居易《村夜》</a></p><!--text-reset颜色复位-->
    <p class="text-monospace">独出前门望野田，月明荞麦花如雪。——白居易《村夜》</p><!--text-monospac字体类-->
    <p><a href="#" class="text-decoration-none">独出前门望野田，月明荞麦花如雪。——白居易《村夜》</a></p>
    <!--text-decoration-none修饰删除线，把a的作用线删除了-->
</div>

颜色

1 文本颜色

<p class="text-primary">.text-primary——蓝色</p>
<p class="text-secondary">.text-secondary——灰色</p>
<p class="text-success">.text-success——浅绿色</p>
<p class="text-danger">.text-danger——浅红色</p>
<p class="text-warning">.text-warning——浅黄色</p>
<p class="text-info">.text-info——浅蓝色</p>
<p class="text-light bg-dark">.text-light——浅灰色（白色背景上看不清楚）</p>
<p class="text-dark">.text-dark——深灰色</p>
<p class="text-muted">.text-muted——灰色</p>
<p class="text-white bg-dark">.text-white——白色（白色背景上看不清楚）</p>

2 链接颜色

<p><a href="#" class="text-primary">.text-primary——蓝色链接</a></p>
<p><a href="#" class="text-secondary">.text-secondary——灰色链接</a></p>
<p><a href="#" class="text-success">.text-success——浅绿色链接</a></p>
<p><a href="#" class="text-danger">.text-danger——浅红色链接</a></p>
<p><a href="#" class="text-warning">.text-warning——浅黄色链接</a></p>
<p><a href="#" class="text-info">.text-info——浅蓝色链接</a></p>
<p><a href="#" class="text-light bg-dark">.text-light——浅灰色链接（添加了深灰色背景）</a></p>
<p><a href="#" class="text-dark">.text-dark——深灰色链接</a></p>
<p><a  href="#" class="text-muted">.text-muted——灰色链接</a></p>
<p><a href="#" class="text-white bg-dark">.text-white——白色链接（添加了深灰色背景）</a></p>

3 背景颜色

<p class="bg-primary text-white">.bg-primary——蓝色背景</p>
<p class="bg-secondary text-white">.bg-secondary——灰色背景</p>
<p class="bg-success text-white">.bg-success——浅绿色背景</p>
<p class="bg-danger text-white">.bg-danger——浅红色背景</p>
<p class="bg-warning text-white">.bg-warning——浅黄色背景</p>
<p class="bg-info text-white">.bg-info——浅蓝色背景</p>
<p class="bg-light">.bg-light——浅灰色背景</p>
<p class="bg-dark text-white">.bg-dark——深灰色背景</p>
<p class="bg-white">.bg-white——白色背景</p>

边框

1 添加边框
.border-top：添加元素上边框。
.border-right：添加元素右边框。
.border-bottom：添加元素下边框。
.border-left：添加元素左边框。

<div class="border border-primary bg-light">border</div>
<div class="border-top border-primary bg-light">border-top</div>
<div class="border-right border-primary bg-light">border-right</div>
<div class="border-bottom border-primary bg-light">border-bottom</div>
<div class="border-left border-primary bg-light">border-left</div>

去掉指定边框：border-/border-top-；还有right,bottom,left都是这样的格式

<div class="border border-0 border-primary bg-light">border-0</div>
<div class="border border-top-0 border-primary bg-light">border-top-0</div>
<div class="border border-right-0 border-primary bg-light">border-right-0</div>
<div class="border border-bottom-0 border-primary bg-light">border-bottom-0</div>
<div class="border border-left-0 border-primary bg-light">border-left-0</div>

2 边框颜色

<div class="border border-primary">border-primary</div>
<div class="border border-secondary">border-secondary</div>
<div class="border border-success">border-success</div>
<div class="border border-danger">border-danger</div>
<div class="border border-warning">border-warning</div>
<div class="border border-info">border-info</div>
<div class="border border-light">border-light</div>
<div class="border border-dark">border-dark</div>
<div class="border border-white">border-white</div>

3 圆角边框
.rounded类来实现圆角边框效果，也可以指定某一边的圆角边框

<div class="border border-primary rounded">rounded</div> <!--4个角都有圆形-->
<div class="border border-primary rounded-0">rounded-0</div> <!--没有圆角，正方形-->
<div class="border border-primary rounded-top">rounded-top</div><!--设置元素左上和右上的圆角边框-->
<div class="border border-primary rounded-right">rounded-right</div><!--设置元素右上和右下的圆角边框-->
<div class="border border-primary rounded-bottom">rounded-bottom</div><!--设置元素左下和右下的圆角边框-->
<div class="border border-primary rounded-left">rounded-left</div><!--设置元素左上和右上的圆角边框-->
<div class="border border-primary rounded-circle">rounded-circle</div><!--rounder-circle 圆-->
<div class="border border-primary rounded-pill">rounded-pill</div><!--rounded-pill 圆-->

宽度和高度

h w 都是相对于父元素来说的相对高度
1 相对于父元素
宽度

<div class="bg-secondary text-white mb-4">
    <div class="w-25 p-3 bg-success">w-25</div>
    <div class="w-50 p-3 bg-success">w-50</div>
    <div class="w-75 p-3 bg-success">w-75</div>
    <div class="w-100 p-3 bg-success">w-100</div>
    <div class="w-auto p-3 bg-success border-top">w-auto</div>
</div>

高度

<div class="bg-secondary text-white" style="height: 100px;">
    <div class="h-25 d-inline-block bg-success text-center" style=" 120px;">h-25</div>
    <div class="h-50 d-inline-block bg-success text-center" style=" 120px;">h-50</div>
    <div class="h-75 d-inline-block bg-success text-center" style=" 120px;">h-75</div>
    <div class="h-100 d-inline-block bg-success text-center" style=" 120px;">h-100</div>
    <div class="h-auto d-inline-block bg-success text-center" style=" 120px;">h-auto</div>
</div>

最大宽度，最大高度

<div style=" 400px;height: 300px;" class="border border-primary">
    <img src="images/dog.jpg" alt="" class="mw-100 mh-100">
</div>

插个关于d-inline-block的来源和相关知识点(：将元素显示为行内块状元素)

块级元素
会占领页面的一行，其后多个block元素自动换行、 可以设置width，height，设置了width后同样也占领一行、同样也可以设置   margin与padding属性。
ps:常见的块级元素:div,img,ul,form,p等
行级元素
与其他元素在同一行上，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。
ps：em，strong，br,input等
display:inline-block，block，inline元素的区别

1、display：block将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始。

2、display : inline将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。

3、display：inline-block看上去值名inline-block是一个混合产物，实际上确是如此，将元素显示为行内块状元素，设置该属性后，其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。

2 相对于视口（CSS3中的新知识，不理解）

<h3 class="text-center text-dark mb-4 bg-dark">.min-vw-100类和.vw-100类的对比效果;是相对于视口viewport的单位</h3>
<h2 style=" 1200px;" class="min-vw-100 bg-primary text-center">.min-vw-100,元素可以自动调整等于视口的宽度,就是铺满窗</h2>
<h2 style=" 1200px;" class="vw-100 bg-success text-center">vw-100元素会改变</h2>

边距

1 边距的定义

<!--mx-auto设置<h3>水平居中，mb-4设置<h3>底外边距为1.5rem-->
<h3 class="mb-4 mx-auto border border-primary" style="150px">mx-auto:mx用来设置左右两边的类 mb-4 tyle="150px指定边框宽度"</h3>
<!--ml-4设置左外边距为1.5rem-->
<div class="ml-4 border border-primary">ml-4</div>
<div class="border border-primary">正常的盒子</div>
<!--ml-n4设置左外边距为-1.5rem-->
<div class="ml-n4 border border-primary">ml-n4</div>

2 响应式边距（格式:{sm|md|lg|xl}-{0|1|2|3|4|5}）

<div class="mx-auto mr-sm-2 border border-primary" style="150px">mx-auto mr-sm-2 sm>=576</div>

浮动

1 实现浮动

<div class="clearfix text-white border border-primary p-3">
    <div class="float-left bg-primary">左浮动</div><!--.clearfix类来清除浮动，只需把.clearfix
        添加到父元素中即可。-->
    <div class="float-right bg-primary">右浮动</div>
</div>

2 响应式浮动

<div class="clearfix text-white">
    <div class="bg-success w-70">box1</div><!--w-50代表什么 div 宽度width 不对 应该是类似于width作用-->
    <div class="float-md-left bg-danger w-50">box2 md:768</div>
    <div class="float-md-right bg-primary w-50">box3</div>
</div>

display属性

1 实现display属性

背景知识：
在CSS中隐藏和显示通常使用display属性来实现，在bootstrap 4中也是通过它来实现的。只是在bootstrap 4中用d来表示，表达方式如下：
.d-{sm、md、lg或xl}-{value}
value的取值如下所示：
none：隐藏元素。
inline：显示为内联元素，元素前后没有换行符。
inline-block：行内块元素。
block：显示为块级元素，此元素前后带有换行符。
table：元素会作为块级表格来显示，表格前后带有换行符。
table-cell：元素会作为一个表格单元格显示（类似和）。
table-row：此元素会作为一个表格行显示（类似）。
flex：将元素作为弹性伸缩盒显示。
inline-flex：将元素作为内联块级弹性伸缩盒显示。

<p>div显示为内联元素（一行排列）</p>
<div class="d-inline bg-primary text-white">div——d-inline</div>
<div class="d-inline m-5 bg-danger text-white">div——d-inline</div>
<p>span显示为块级元素（独占一行）</p>
<span class="d-block bg-success text-white">span——d-block</span>
<span class="d-block bg-dark text-white">span——d-block</span>

2 响应式的隐藏或显示元素

<!--d-md-none 指的是大于或等于md属性时隐藏-->
<div class="d-md-none d-lg-block bg-primary text-white">在xs、sm设备上显示（蓝色背景）,在大雨992像素宽度也显示，because d-lg-block是块级元素 </div>
<!--d-none是隐藏元素但是，d-md-block是块级元素所以大于md属性显示-->
<div class="d-none d-md-block bg-danger text-white">在md、lg、xl设备上显示（浅红色背景）</div>

嵌入

在页面中通常使用（这其中iframe会使markdown生成个小的空白窗口似的，后面语句都不能显示）
<iframe>、<embed>、<video>、<object>
标签来嵌入视频、图像、幻灯片等。

<!--embed-responsive实现同比例的收缩 embed-responsive-16by9定义16:9的长宽比例
     在父元素中嵌入子元素图片就可以用iframe嵌入-->
<div class="embed-responsive embed-responsive-16by9">
    <iframe src="images/dog.jpg"></iframe>
</div>

内容溢出

.overflow-auto：在固定宽度和高度的元素上，如果内容溢出了元素，将生成一个垂直滚动条，通过滚动滚动条可以查看溢出的内容。
.overflow-hidden：在固定宽度和高度的元素上，如果内容溢出了元素，溢出的部分将被隐藏。

代码

<h4>内容溢出：overflow-auto溢出的话产生个垂直的滚动条查看内容 和overflow-hidden溢出的话隐藏</h4>
<div class="overflow-auto border float-left" style=" 200px;height: 100px;">
    转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。——苏轼《水调歌头》
</div>
<div class="overflow-hidden border float-right" style=" 200px;height: 100px;">
    转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。——苏轼《水调歌头》
</div>

定位

1 .position-static：无定位。
2 .position-relative：相对定位。
3 .position-absolute：绝对定位。
4 .position-fixed：固定定位。
5 .position-sticky：粘性定位

 <!--sticky-top:粘性定位的top阈值，为0固定定位，大于0，相对定位-->
    <nav class="sticky-top bg-primary p-5 mb-5">头部导航栏固定</nav>
    <div class=" bg-secondary p-3">
        <p>内容栏1</p>
        <p>内容栏2</p>
        <p>内容栏3</p>
        <p>内容栏4</p>
        <p>内容栏5</p>
        <p>内容栏6</p>
        <p>内容栏7</p>
        <p>内容栏8</p>
        <p>内容栏9</p>
    </div>

阴影

1 .shadow-none：去除阴影。
2 .shadow-sm：设置很小的阴影。
3 .shadow：设置正常的阴影。
4 .shadow-lg：设置更大的阴影

<div class="shadow-sm p-3 mb-5">小的阴影</div>
<div class="shadow p-3 mb-5">正常的阴影</div>
<div class="shadow-lg p-3 mb-5">大的阴影</div>

关闭图标

<!--关闭图标来表示关闭模态框提示和alter提示组件的内容-->
<button type="button" class="close" aria-label="Close"><!--class="close"定义关闭图标， 
    HTML5新属性aria-label隐藏标签-->
    <span aria-hidden="true">&times;</span>
</button>

记录阅读
《Bootstrap从入门到项目实战》的笔记