css
编写响应式样式代码是一个前端开发工程师必备的技能之一,媒体查询是响应式设计的核心,它可以根据设备的特性(如屏幕宽度、分辨率等)来应用不同的样式规则。
Tailwind CSS 是一个用于构建 Web 项目的 CSS 框架,它提供了一系列预定义的原子CSS类,可以帮助开发人员快速构建 Web 界面,并且可以通过自定义主题和扩展来满足不同的需求。
position:sticky 定义元素为粘性定位元素,根据正常文档流进行定位,然后相对它的临近祖先滚动的元素,基于 top , right , bottom , left 的值进行偏移。
在日常网站开发中,我们会使用link来加载外部的css样式文件,然而css的加载会阻塞页面的渲染,直到资源加载完成并等待CSSOM构建完成,所以在使用外部的css文件的时候,尽量移除不需要使用的css代码,如果网站需要自适应,可以通过媒体查询来加载对应的文件内容。
工具
weinre是网页远程审查工具,可以在pc端调试真机的浏览器页面,但是不能用来调试js。weinre是基于nodejs程序,首先全局安装weinre模块
transform属性可以向元素应用2D或者3D转换,可以对元素进行选择,缩放,移动和倾斜
小程序
终于入坑小程序了,最近开发小程序,要实现一个tab切换效果,看到知乎热榜上的滑动切换tab效果还挺舒服的,刚好项目也需要这个功能,就尝试实现一下,首先需要一些基本知识点
盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table 时),该元素定位均不对后续元素造成影响。
块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。
移动端适配<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
其他
现在可以使用<link rel="preload" />来预加载各种资源,例如字体,脚本,图片,音频,这样可以在页面构建dom的时候加载资源,而且不会延迟页面的onload事件,加载后的资源可以给当前页面使用。
我们在浏览网站的时候,从服务器返回html内容到呈现界面给用户的过程,浏览器需要经历以下流程:处理HTML标记并构建DOM树。处理CSS标记并构建CSSOM树。将DOM与CSSOM合并成一个渲染树。