css 样式笔记

calc

• calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

object-fit理解

CSS3 background-size出现的比较早，大家应该知道其支持的一些值，除了数值之外，其还支持几个关键字，例如：cover, contain等。

object-fit也是类似的，但还是有些差异，具体有5个值：

.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }
每个属性值的具体含义如下：

1、fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
2、contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
3、cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
4、none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
5、scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

vue本地图片无法显示

设置require('./1jpg') 写链接就行

SSR

什么是SSR？

SSR是服务端渲染：在后台将vue实例渲染为HTML字符串直接返回，在前端激活为交互程序。

传统的服务端渲染
实现原理：

客户端发送请求给服务器
服务器查询数据库，使用视图、模板引擎等拼接成html字符串，返回给客户端
客户端渲染html

优点：

网页内容在服务器端渲染完成，一次性传输到浏览器，所以首屏加载速度非常快
有利于SEO，因为服务器返回的是一个完整的html，在浏览器可以看到完整的dom，对于爬虫、百度搜索等引擎就比较友好

缺点：

在后续跳转其它链接时，整个页面还要重复这样的操作，不断地请求响应、请求响应，相对来说，消耗的带宽资源、后续请求的时间就多了

单页应用SPA

单页应用其优秀的用户体验，使其逐渐成为主流，页面内容由js渲染出来，这种方式称为客户端渲染。它的过程是：

客户端发送请求给服务器
服务器返回html，但这时的html只有基本的结构（比如vue中，只有app这个div结构），没有其他具体的dom结构
客户端渲染html，渲染执行js（比如vuejs），渲染模板template，这时候会再向服务器发送请求，请求具体的数据
服务器查询数据库，返回对应的数据
客户端渲染显示

缺点：

网速很慢的时候，它的首屏等待时间较长
SEO不友好，暴露给搜索引擎只有最基本的html结构(比如：

)

现在流行的服务端渲染SSR

它是传统的服务端渲染和单页应用的一种折中的解决方案：后端渲染出完整的dom结构返回，前端拿到的内容包括：首屏及完整spa结构，应用激活后依然按照spa方式运行，这种页面渲染方式被称为服务端渲染（server side render），它的过程是：

客户端发送请求给服务器
服务器读取模板，解析成dom节点，返回一个完整的首屏html结构
客户端进行首屏激活（把用户写的交互的代码，在前端激活，重新变成一个spa应用）
这样后续，用户再点击超链接、跳转时，不会再向服务器发送请求了，而是使用前端路由跳转，只会发送一些ajax请求数据
优点：

SEO友好
首屏加载快
缺点：

开发逻辑复杂
开发条件限制：比如一些生命周期不能用，一些第三方库也可能不能用
服务器负载大

总结

可以优化页面速度；
SPA单页面应用不利于SEO
SSR对于SEO良好
前端发送请求，后端将vue实例渲染为HTML字符串直接返回，用v-html加入到页面中
参考链接