xiaolong446的博客

响应式网页设计，指的是，利用 CSS 或 JavaScript，让同一个网页，能根据屏幕的大小，自动调整布局和样式，包括对容器元素、布局、图片和字体的响应式调整。要注意的是，原生的 HTML 元素，在没有编写任何 CSS 的情况下，本身就是响应式的，不过每个网页都避免不了使用 CSS 设置样式，响应式则主要针对设置了固定宽度，或者影响布局的元素进行调整。之后，网页的可视区域（视口）就会取移动设备屏幕的宽度，设置了 initial-scale 为 1.0 之后，就会使用正常的缩放比例，即 1 倍，不缩放。

第二个区别是id选择符引用的是id属性的值，并不是class属性的值，这显而易见。当然，要让类选择符起作用及，必须先给元素的class属性一个类（属性值），而我们在CSS样式表中，需要将相应你要处理的元素的class属性值作为类选择符，并且在前面要用. + 相应的元素的class属性值。:first-of-type和:last-of-type，会选择第一个或最后一个元素，并且这个元素在父元素中的其它相同元素中的第一个或最后一个元素，和:first-child，:last-child是有区别的。

CSS过渡允许在给定的时间内平滑的改变属性值。如需创建过渡效果，必须明确两件事：（1）要添加效果的CSS属性（2）效果的持续时间。

互联网圈子里有造“轮子”的说法，能用现成的就不要自己去捣鼓了，既省时又省力！今天介绍的就是一款性能强悍的CSS动画库（）的使用指导。1.基本功能< h1 class = "animate__animated animate__bounce animate__delay-2s animate__repeat-2" > 延时2s后，重复跳动 2 次动画效其中，为跳动效果；：延时x秒后使用动画，项目提供了4种延时模式从2s到5s,默认情况是延时1s，我们也可以修改默认值。

这里笔者直接记录的使用方式，也是为了使用的时候更加的直观，这里说下，在使用线性渐变的时候，使用角度以及百分比去控制渐变，会更加的灵活.contain:图片放大至满足背景区域的最小边即止，当背景区域与背景图片的宽高比不一致的情况下，背景区域可能会长边下有空白覆盖不全。cover:图片放大至能满足最大变时为止，当背景区域与背景图片的宽高比不一致时，背景图片会在短边下有裁切，显示不全。通常在做响应式布局的时候，以及大屏的时候很常用的，从而实现在不通分辨率下，实现不同的展示效果。的时候背景，字体颜色。