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加入到页面中
参考链接

posted @ 2023-03-25 16:36  &漠。  阅读(16)  评论(0)    收藏  举报