2021年8月10日
1.响应式所具有的特点
（1）网页的宽度自动调整
（2）尽量少用绝对宽度
（3）字体要使用rem、em做为单位
（4）布局要使用浮动、弹性布局
2.规则
@chartset 定义编码
@import 引入css文件(css模块化）
@font-face 自定义字体
@keyframes animation里的关键帧
@media 媒体查询
媒体查询是根据一个或者多个基于设备类型、具体特点和环境来应用的样式@media
3.媒体类型
all 所有设备
print 打印机设备
screen 彩色的电脑屏幕
speech 听觉设备（针对有视力障碍的人士，可以把页面的内容以语音的方式呈现的设备）
4.媒体特性
width 宽度
min-width 最小宽度，宽度只能比这个打
max-width 最大宽度，宽度只能比这个小
height 高度
min-width 最小高度，高度只能比这个大
max-width 最大的高度，高度只能比这个小
orientation 方向
landscape 横屏（宽度大于高度）
portrait 竖屏（高度大于宽度）
aspect-ratio 宽度比
-webkit-device-pixel-ratio 像素比（webkit内核的私有属性）
5.逻辑运算符 用来做条件判断
and 合并多个媒体查询（并且的意思）
, 匹配某个媒体查询（或者的意思）
not 对媒体查询的结果取反
only 仅在媒体查询匹配成功后应用的样式（防范老旧游览器）
2021年8月11日
1.bs4.ntp.org.cn 是BootStrap4的中文文档
2.BootStrap的html内容需要写在<div class="container-fluid">是将屏幕尺寸设置为100%</div>或<div class="container">当用户屏幕大则class设置的屏幕大，用户屏幕小则class设置的屏幕小</div>中
3.BootStrap中栅格系统中的行<div class="row"></div>
4.BootStrap中的栅格系统中的列<div class="col-xl-1"，当class的名字后的数字是几就代表占几列，最多12列
5.col-xl-3;x1为超大屏，屏幕宽度>=1200，容器的宽度固定为1140px，一行可以设置12列。屏幕尺寸<1200的时候，一行只能设置一列
6.col-lg-3;lg为大屏，屏幕宽度>=992px，容器的宽度固定为960px;一行可设置12列
2021年8月12日
1.col-md-3;md为中等屏，屏幕宽度>=768px，容器的宽度固定为720px;一行可设置12列
2021年8月13日
1.col-sm-3;sm为小屏，屏幕宽度>=576px，容器的宽度固定为540px，一行可以设置12列。屏幕尺寸<576的时候，一行只能设置1列
2.col-4;col为超小屏，屏幕宽度<576px，容器的宽度为auto，一行永远可以设置12列
3.设置等宽列，在class中加入名称col，有几个列就将父级的行分成相等的几份，断开等宽需要在断开的col元素后面加上一个元素并且class设置为w-100；
4.设置根据内容调整列的宽度，使用.col-{xl/lg/md/sm}-auto当满足大括号中的要求自动撑成一行
5.2021年8月14日
1.垂直对齐
(1)行的对齐方式
align-items-start 顶对齐
align-items-center 中间对齐
align-items-end 底部对齐
(2)列的单独对齐方式
align-self-start 顶对齐
align-self-center 中间对齐
align-self-end 底对齐
2.水平对齐
（1）justify-content-start 左对齐
（2）justify-content-center 居中对齐
（3）justify-content-end 右对齐
（4）justify-content-around 分散居中对齐（每个元素两侧的间距是相等的）
（5）justify-content-between 左右两端对齐（元素之间的间距是自动平分的）
3.列排序，使用col order-数字,其中数字是几就表示在12列中的第几位，数字越大越靠后，order-first设置第一位，order-last设置最后一位
4.元素偏移.col-{xl/lg/md/sm}-5;相关屏幕中偏移5列
5.mr--{xl/lg/md/sm}-auto使右侧的列远离到最右边
ml--{xl/lg/md/sm}-auto使左侧的列远离到最左侧
6.col-auto宽度由内容撑开，
2021年8月15日
1.Bootstrap框架默认会有清除样式，如table表格想要重置样式需要在加入class="table"
2.<pre></pre>设置带格式的标签
3.副标题标签small，在p标签的class中加上名称h1/h2……h6，将P标签设置成标题样式
4.给标题设置比h1更大的字体，在class中加入名称display-1到4
5.引言在class中加入名字lead用来突出段落
6.给文字加重样式用mark标签，表现删除文字用del标签，表现插入文本用ins标签，表现文字小一点用small标签，表现文本加粗用strong标签，斜体文本用em标签，可以用class名称.mark代替mark,用.small代替small标签
7.缩写标签，用abbr标签，里面有一个属性title=“全称”，class中填入.initialism可以让字体变得小一点
8.引用跟署名使用blockquote标签包裹在并且class中加入.blockquote，引用的人名加上footer标签，并且class中加入.blockquote-footer
9.文字内容对齐在class中加入.text-left/.text-center/.text-right让文字左/居中/右对齐
10.无特效列表，在ul的class中加入.list-unstyled，清除ul.li标签中的默认样式
11.让超出的内容变成省略号，class中加入text-truncate
12.给文字添加颜色code标签
13.代码放在code里，再放到pre标签里，给pre标签上来一个pre-scrollable的class，就会显示一个340px高的框，超过之后就会出现滚动条
14.按钮标签在按钮两个字上加上<kbd></kbd>文字就会出现按钮的形状
15.响应式图片，给图片class添加一个img-fluid
16.给图片设置成缩略图（响应式），给class添加img-thumbnail
17.给图片设置圆角给图片的class加上rounded
18.给元素设置浮动，左浮动在class中加入.float-left，右浮动在class中加入.float-right
2021年8月16日
1.根据不同的尺寸加载不同的图片运用picture标签，主要结构如下
<picture>
<source media="(min-width:1200px)" srcset="images/1140.jpg">
<source media="(min-width:992px)" srcset="image/960px.jpg">
<sorce media="(min-width:768px)" srcset="image/720px.jpg">
<img src="image/img_01.jpg" alt=""><!--当尺寸小于576的时候会显示这个图片-->
</picture>
2.webp格式的图片，体积比jpg小很多倍但是是高清图片；
3.table表格进行颜色添加，隔行换色在table中的class中加入table-strped
4.去除table表格边框.table-borderless;给table添加鼠标高亮显示.table-hover，更小的表格.table-sm
2021年8月17日
1.变成响应式的弹性盒模型 d-{breakpoint}-flex/inline-flex
2.响应式弹性盒模型的子元素排列方向
（1）flex-row 正序水平排列
（2）flex-row-reverse 倒叙水平排列
（3）flex-column 正序垂直排列
（4）flex-column-reverse 倒叙垂直排列
————————————————
版权声明：本文为CSDN博主「无所不能的蓝巨人」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43174912/article/details/123618552