1、响应式布局
利用媒体查询，即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。
常见选项：
媒体类型
and、not
min-width、max-width:
例如
@media all and (min-width:500px) and (max-width: 700px){
.box{background: blue;}
}
当分辨率大于最小宽度并小于最大宽度时，执行{}内的样式(注意and两边要空格隔开)
在all前面加not表示取反;多个响应时要注意操作顺序：
@media all and (min-width:500px) {
.box{background: blue;}
}
@media all and (min-width: 700px){
.box{background: yellow;}
}
这样写width=500~700时显示蓝色，大于700时显示黄色，顺序反过来则只显示蓝色
orientation：portrait、orientation：landscape:
针对横竖屏的响应式触发，先写条件，选择器和样式写在{}内，注意and两边一定要用空格隔开：
@media all and (orientation: portrait){
.box{ background: blue;}
}
@media all and (orientation: landscape){
.box{ background: yellow;}
}
<link>:
<link rel="stylesheet" href="style1.css" media="all and (min-width:400px/orientation: portrait)">
当满足()内条件时，引入相应的css文件,条件也可以写横竖屏，实现横竖屏不一样的样式
常见修改样式：
display
float
width
注：响应式代码写到要适配的css后面
两种常见的响应式方法：
1、被动的：
@media all and (min-width: 1200px){
.container{max-width: 1140px;}
}
{}内的选择器不变，当()内条件改变时，相同的选择器内样式不同。
2、主动式：
@media all and (min-width:768px){
.mt-md-50{margin-top: 50px;}
}
{}内的选择器不同，当需要不同样式时，在body里添加相应的类：
<div class="container mt-lg-50">hello media</div>
*重要的一个小细节，在浏览器页面按住ctrl+鼠标滚轮，向前滚，表面上是放大，其实是减小分辨率；同理向后滚，表面上是页面缩小，实际上是增大分辨率。浏览器右上角的百分数100%时为正常页面分辨率；超过100%为减小浏览器分辨率(这个浏览器显示的像素)；小于100%表示增大浏览器分辨率；别弄混了！
2、Bootstrap
Bootstrap是最受欢迎的Html、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目
特色：
1、响应式布局
2、基于flex的栅格系统
3、丰富的组件和工具方法
4、常见的交互使用
官网：https://getbootstrap.com/
熟悉相应类名的定义，了解其功能，通过使用相关类名达到布局的效果。
(意思就是，某个类名框架已经给你写好样式了，你只需要记住这个类名，当需要用到这种样式时，为相关标签添加该类名就可以了)
*具体可以参考官网文档与例子
Containers:版心属性
container
container-fluid
Responsive breakpoints
Grid system:栅格系统
Grid options:网格配置
Responsive classes：响应式的类
Gutters：间距
Alignment：对齐方式
Reordering：排序
Offsetting：位置边距
....
[class*=col]{border: 1px black solid;}该选择器表示，所有包含col的类
*即该框架向当于把几乎所有的新特性样式集成到各个类名里面，编写程序时，把直接添加(调用)样式的方式变为为标签添加封装有相应样式的类名即可。主要的意义在于省的让我们自己去写样式；只要背几个class就不用了写任何样式的设计网页，就是该框架的初衷。
常见的margin类：
mr-auto:margin-top:auto;
mt-5:margin-top:5rem; 注意了这些类的单位都是rem
mt-md-5:margin-top:5rem; md响应式范围内生效
mx-5:margin-left:5em; margin-right:5rem;
my-5:margin-left:5em; margin-right:5rem;
mt-n5:margin-top:-5rem;
py-5:padding-top:5rem;padding-bottom:5rem;
Content
Reboot：重置默认样式
Typography：针对设备
Code:代码
Image:图片
Tables：表格
Figures：图片描述
..
*使用时去官网看文档:很多的类都是以样式名来命名的
Components:组件
Alerts:弹出提示
Badge:徽章
Breadcrumb：面包屑(导航的一搬叫面包屑)
Buttons：按钮
Button group：按钮组
Card：卡片
....
*多看参考文档，多练习，才能掌握Bootstrap
(非常重要)*利用Bootstrap插件可以快速创建相关样式，格式为b4-相关样式名称。
Utilities：工具方法
Borders：边框
Clearfix：清除浮动
Close icon：关闭icon
Colors：颜色
Display：显示类型
Embed：媒体
...
*通過Blog首页的制作，熟悉了Bootstrap的基本使用，它适合快速搭建中小型项目，不适合搭建大型项目，因为类会太多。还有一个优点是，适合用来做针对不同设备的响应式布局。
3、CSS新特性之自定义属性
CSS自定义属性（也称为了"CSS变量"），在目前所有的现代浏览器中都得到了支持。
定义与使用: --color:red;通过"--"来定义； background: var(--color);这样来使用
计算
默认值
作用域
CSS新特性之shapes
CSS Shapes布局可以实现不规则的文字环绕效果，需要和浮动配合使用。
shape-outside
clip-path
shape-margin
4、CSS新特性之scrollbar
CSS scrollbar用于实现自定义滚动条样式(主要利用伪元素实现)
::-webkit-scrollbar: widht: 1px;定义的是滚动条的横向宽度，即它有多粗
::-webkit-scrollbar-thumb:设置拖拽块的样式
::-webkit-scrollbar-track:定义滚动条上下移动的容器样式
5、CSS 新特性之Scroll Snap
CSS Scroll Snap（滚动捕捉）允许你在用户完成滚动后多锁定特定的元素或位置,即是滚动条移动到相应区域。
scroll-snap-type
x
mandatory
例如： scroll-snap-type: x mandatory;与scroll-snap-align配合使用
scroll-snap-align
start:每个子元素靠左对齐(即防止出现滚动条拖动的位置只显示某个子元素的一部分)
center
end