CSS3：动画、flexbox、响应式设计、网格布局
自学前端的学习笔记，参考的教程是W3Cschool，写给自己看的，很主观
这里是我一边自学一边写的个人主页，2-3天更新一次，欢迎围观：Your Ideal World
CSS3
一、边框、渐变与字体
1.边框图像 border-image
如何将图片剪裁/拉伸以适应为边框，见CSS边框图像
2. 渐变
- 线性渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, ...) - direction：to [bottom,top] [left,right] | 度数（单位是deg）
- color：不解释
- 径向渐变
background-image: radial-gradient(shape size at position, start-color, ..., last-color)
3. 文本效果
可以制定文字溢出方式（裁剪、省略号等）、换行规则（主要用于英文，单词在换行时是否可分离）、书写模式（文本水平or垂直放置）等，具体见CSS文本效果
4. 外部字体
引入外部字体的格式如下：
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
}
引入CSD的方式一般为在header中使用link（需要从对应CSD的官网上查阅）：
<link rel="stylesheet" href="http://..." />
二、转换：transform
使用方法：transform:function()
注意：不同浏览器需要添加不同前缀
2.1. 2D转换方法
| 方法 | 解释 |
|---|---|
| translate(x,y) | 将元素从当前位置在X，Y上平移，可以拆分为translateX(),translateY() |
| rotate(deg) | 旋转元素，正数顺时针，负数逆时针 |
| scale(宽度倍数, 高度倍数) | 按倍数缩放元素，可以拆分为scaleX()和scaleY() |
| skew(Xdeg,Ydeg) | 沿X轴/Y轴倾斜一定度数，正数左倾（上倾），负数右倾（下倾），范围0~180度，可以拆分为skewX()和skewY() |
| matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) | 以上所有方法的组合 |
| translate-origin:x-ais,y-ais,z-ais | 变化的轴心位置 |
2.2.3D转换方法
| 方法 | 解释 |
|---|---|
| rotateX(deg),rotateY(deg),rotateZ(deg) | 将元素围绕X，Y，Z轴旋转某个度 |
| （看不太懂，等用到的时候再来看） |
三、过渡 transition
当某个属性值发生改变时，平滑地进行这个过程。
使用方法：
transition: transition-property1 transition-duration1 transition-timing-function1, transition-property2 transition-duration2 transition-timing-function2...
追加效果：
transition-delay: time：过渡延迟开始时间；
transition-timing-function：过渡的速度曲线，值可以是：
linear（默认）：始终以相同速度；ease：慢-快-慢ease-in：慢-匀速ease-out：匀速-慢ease-in-out:慢-匀速-慢cubic-bezier(n,n,n,n)：自定义
注意，需要和不同的浏览器适配。
四、动画 @keyframes
使用方式：
- 定义一个
@keyframes name{}规则
@keyframes的代码格式如下：
@keyframes example{
from{css样式}
to{css样式}
}
或是
@keyframes example{
0%{css样式}
m%{css样式}
...
100%{css样式}
}
/* 可以多个时间点并列成一排写。如20%,80%{css1} 40%,60%{css2}*/
- 在元素中指定
animation-name: name, animation-duration:time来应用该动画规则。
以上两个是必须规定的。以下是可选的：
animation-delay延迟秒数（可以是负数）animation-iteration-count动画运行次数，infinite会使动画永远运行下去animation-direction：反向或交替运行动画，值可以是normal,reverse,alternate,alternate-reverseanimation-timing-function:速度曲线，同过渡animation-fill-mode：是否对元素应用动画样式，有none（默认，不应用），forwards(保留最后一个样式),backwards(获取第一个样式)，both同时获取第一个和最后一个样式。
以上所有属性都可依顺序简写在一个
animation内，且需要适配不同浏览器
animation-play-state：动画状态，pausing暂停或running，一般与js连用
五、图片效果
1. 图片滤镜
如以下代码：
img {
filter: grayscale(100%);
}
会将所有图片变成黑白。详见CSS滤镜参考手册
2. object-fit
改变媒体在容器中的填充方式，有以下属性：
fill(默认)：拉伸媒体以适应容器尺寸；cover(常用)：从中心剪裁以适应容器尺寸；contain: 保持媒体原本的比例，最大程度地适应容器尺寸，可能无法填充满；none：不做任何调整；scale-down: 和contain效果类似，不知道啥意思。
六、CSS变量
在.root{}内定义全局变量，使用var()在文档内的任何位置方便地调用。
.root{
--grey: #c1c1c1;
--white:#ffffff;
}
使用时：
div{
background-color: var(--white);
/* 或者，也可以在此新建一个局部变量 */
--black:#000;
}
注意：在局部中重新修改全局变量只会在局部中生效，并不会影响全局变量！
七、box-sizing
默认情况下，元素的实际宽度=width+padding+border，很不方便。（此时box-sizing=content-box）
box-sizing:border-box可以将该规则改写，使得元素实际宽度=width
八、flex-box
CSS3新特性：display:flex弹性响应式布局
可以轻松地设计灵活的响应式布局，会自动随着窗口调整布局。
知乎就是使用flex-box进行的排版。
可以设置的属性如下：
8.1. flex-direction
定义元素的堆叠方向
column,column-reverse, row, row-reverse
8.2. flex-wrap
是否在页面缩小到一定程度时自动换行
wrap（默认）,nowrap wrap-reverse
注意：在设计响应式布局时，不应当使用nowrap
8.3. flex-flow
以上两属性的简写
8.4. justify-content
元素在水平方向上的对齐方式，可以是
- flex-start(默认):开头对齐
- fleax-end, 末端对齐
- center,居中对齐
- space-between,两端对齐
8.5. align-items
元素在垂直方向上的对齐方式，可以是
- stretch(默认)：拉伸元素以填充容器
- center:中央
- flex-start:顶部
- flex-end：底部
- baseline：与“文本所处的基线”对齐
想要改变单个元素的对齐方式，可通过align-self:…
8.6. align-content
在多行元素的情况下的整体（or“弹性线”）对齐方式，可以是
- stretch(默认)：拉伸元素以填充容器
- space-between: 元素间间隔相等且上下边缘紧贴容器
- space-around: 元素间、元素边缘与容器的上下边缘间隔均相等
- center：元素间无间隔，全部元素对齐在容器中间
- flex-start:元素间无间隔，全部元素对齐在容器顶部
- flex-end: 元素间无间隔，全部元素对齐在容器底部
8.7. 用于定制每个flex项目的属性
- order:n, 改变flex项目的顺序；
- flex-grow:n, 规定某个 flex 项目相对于其余 flex 项目拉伸多少;
- flex-shrink:n, 规定某个 flex 项目相对于其余 flex 项目收缩多少，0代表保留原样式不变化；
- flex-basis:length,规定某个 flex 项目的初始长度；
- flex:…，以上三个属性的简写
九、（重点）响应式设计
又称RWD，response-web-design，网页布局能够自动适应不同的访问设备(从桌面电脑、平板电脑到智能手机)，方便用户阅读和导航浏览。
注意，目前用响应式设计适配手机的方式在市面上并不常用。
-
（疑似）使用了响应式设计的网站：zhihu
-
使用媒体查询后重定向至手机专用地址的网站：baidu(m.baidu.com)，bilibili(m.bilibili.com)，豆瓣(m.douban.com)
9.1. 媒体查询
响应式设计实现的基础。检查当前设备的尺寸、视口尺寸、方向（纵向or横向）、分辨率等，语法如下：
@media [[all|not|only] mediatype and] (expressions) [:] {
CSS代码
}
/*[]中的内容为可选*/
其中，mediatype可以是：all, screen(屏幕，最常用)，print(打印机)，speech(阅读器)
expression中可以检测的属性非常多，详见CSS @media规则,常用的是max-width, min-width, max-height, min-height等。
9.2. RWD视口
视口（viewport）是用户在网页上的可见区域，设备上的浏览器会按比例缩小整个网页以适合屏幕大小，导致网页布局出现问题。
可以使用HTML5 中的 标签来控制视口
的作用是提供有关页面的元信息（meta-information），可以为搜索引擎提供信息，或者告知浏览器需要采取的行动。其属性包括：
-
charset：编码模式，常用utf-8 -
http-equiv: 指示服务器在发送实际的文档之前先传送给浏览器的 MIME 文档头部，包含名称/值对。浏览器将会优先执行这个指令。如：<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn">将会在用户进入网页的5秒后重定向至一个新网页。其他属性详见HTML 标签的 http-equiv 属性
-
name：元数据的名称，可以是autor、description、 -
content：定义元数据的内容 -
keywords：网页关键词，为搜索引擎提供字段 -
viewport：控制“视口“（并非浏览器可视区域，而是浏览器上用于显示网页的区域，可能较大也可能较小）。关于视口的详细知识见菜鸟教程：viewport深入理解。简单来说，要让元素宽度=设备屏幕宽度，即px单位不会因为设备的更换而发生改变，只需在header中加入以下代码即可：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
十、网格布局
即display:grid和inline-grid以行列为基础的布局方法，需要兼容不同浏览器。对容器设置如下参数：
grid-template-columns:col1 col2 col3...定义列数及每列的宽度，可以是auto；grid-template-rows:row1 row2 row3...定义行数及每行的宽度，可以是auto；grid-gap：网格之间的间隔，不包括网格与容器的间隔，请用padding；justify-content,align-content：用法同flexbox布局。
注意！当容器的尺寸为auto时，justify-content会取消网格的自动布局。区别见下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3DYHydOh-1667221752908)(C:\Users\73980\AppData\Roaming\Typora\typora-user-images\image-20221031204308382.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YD2hRdwd-1667221752909)(C:\Users\73980\AppData\Roaming\Typora\typora-user-images\image-20221031204612479.png)]
对网格项目设置如下参数：
grid-column: start / end项目从第start列开始，在end-1列结束；grid-column: start / span n项目从第start列开始，跨越n列；gird-row跨行，用法同上
注意：无论项目先前所在是第几列，跨行都会默认移动到第一列，由此会产生一系列布局错乱，如下图所示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qy2VWvSG-1667221752910)(C:\Users\73980\AppData\Roaming\Typora\typora-user-images\image-20221031205732999.png)]
用grid-area规定其列数可解。上图应该成：grid-area: 1 / 2 / 3 / 2
grid-area: start row, start column, end row, end column同时跨列和跨行
为每个计算并指定列数、行数很麻烦，grid-template-areas提供了一种无脑排版的方法。
-
对项目命名：
.item1{ grid-area:header } -
在容器中用项目名称直接进行布局。比如：
grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';会生成布局：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N9HLm0cK-1667221752910)(C:\Users\73980\AppData\Roaming\Typora\typora-user-images\image-20221031210627609.png)]
简单无脑。
}` -
在容器中用项目名称直接进行布局。比如：
grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';会生成布局：
[外链图片转存中…(img-N9HLm0cK-1667221752910)]
简单无脑。