网站备案名字填写,做外贸网站好的公司,南通网站建设,自己做的网站程序怎么发布大家好我是没钱的君子下流坯#xff0c;用自己的话解释自己的知识 前端行业下坡路#xff0c;甚至可说前端已死#xff0c;我还想在前段行业在干下去#xff0c;所以从新开始储备自己的知识。 从CSS——Javascript——VUE2——Vuex、VueRouter、webpack——用自己的话解释自己的知识 前端行业下坡路甚至可说前端已死我还想在前段行业在干下去所以从新开始储备自己的知识。 从CSS——Javascript——VUE2——Vuex、VueRouter、webpack——VUE3——pinia、Vite把前端基本的从新顺一遍找出自己的不足。再去把一些组件给仔细研究一些自己以前没有发现的细节使用方法。 希望大家都能找到自己的出路。
21. 选择器的权重计算方式 !important 最高* 为0行内样式 A 组加一id 选择器 B 组加一类、伪类、属性选择器 C 组加一元素、伪元素 D 组加一。 22. 如何避免重绘或者重排 首先会触发重绘重排的事件 任何改变用来构建渲染树的信息都会导致一次重排或重绘 添加、删除、更新DOM节点通过display: none隐藏一个DOM节点-触发重排和重绘通过visibility: hidden隐藏一个DOM节点-只触发重绘因为没有几何变化移动或者给页面中的DOM节点添加动画添加一个样式表调整样式属性用户行为例如调整窗口大小改变字号或者滚动。 我们往往通过改变 class 的方式来集中改变样式 // 判断是否是黑色系样式
const theme isDark ? dark : light// 根据判断来设置不同的class
ele.setAttribute(className, theme)使用 DocumentFragment 我们可以通过createDocumentFragment创建一个游离于DOM树之外的节点然后在此节点上批量操作最后插入DOM树中因此只触发一次重排 var fragment document.createDocumentFragment();for (let i 0;i10;i){let node document.createElement(p);node.innerHTML i;fragment.appendChild(node);
}document.body.appendChild(fragment);23.如何优化图片 对于很多装饰类图片尽量不用图片因为这类修饰图片完全可以用 CSS 去代替。 对于移动端来说屏幕宽度就那么点完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载可以计算出适配屏幕的宽度然后去请求相应裁剪好的图片。 小图使用 base64 格式 将多个图标文件整合到一张图片中雪碧图 选择正确的图片格式 对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法能带来更小的图片体积而且拥有肉眼识别无差异的图像质量缺点就是兼容性并不好小图使用 PNG其实对于大部分图标这类图片完全可以使用 SVG 代替照片使用 JPEG 24. CSS3 新增了那些东西 CSS3 新增东西众多这里列举出一些关键的新增内容 选择器盒子模型属性border-radius、box-shadow、border-image背景background-size、background-origin、background-clip文本效果text-shadow、word-wrap颜色新增 RGBAHSLA 模式渐变线性渐变、径向渐变字体font-face2D/3D转换transform、transform-origin过渡与动画transition、keyframes、animation多列布局媒体查询 25. 实现一根只有 1px 的长线 参考答案 实现的方式很多下面是一种参考方案 .line {
width: 100%;
height: 1px;
overflow: hidden;
font-size: 0px;
border-bottom: dashed 1px #ccc;
}div classline/div26.bootstrap响应式原理 bootstrap使用的是栅格布局栅格布局的原理就是通过定义容器大小把页面分成12份再调整内外边距最后结合媒体查询就制作出了强大的响应式网格系统。 27.less、sass 是什么为什么要用它 Less 和 Sass 被称之为 CSS 预处理器。 CSS 预处理器可以为 CSS 增加变编程特性通过编译器将使用新语法的文件输出为一个 CSS 文件解决 CSS 难以复用、代码冗余、可维护性低的缺点。常见的预处理器有 less、sass、stylus。 使用他们来书写 CSS 代码可以更符合编程思维、简化代码、提高代码重用、便于维护。 28.什么是选择器有哪些选择器 选择器决定将样式应用在哪个或哪些元素身上。 元素选择器例如 div{…} p{…}id 选择器 例如 #box{…}类选择器 例如 .box{…}属性选择器[href“#”]{…}通配*{…}组合并集选择器div,p,a,.main{…}交集选择器input[type“text”]{…}后代选择器header nav{…}子级选择器 ulli{…}伪类选择器 :nth-child(num){…}:nth-child(odd){…}:nth-child(even){…}:nth-of-type{…}:first-child{…}:last-child{…}only-child{…}a:link{…}a:visited{…}:hover{…}a:active{…} 伪元素选择器 ::before{…}::after{…}::first-letter{…}::first-line{…} 29.CSS 的计算属性 calc( ) 函数 主要用于指定元素的长度支持所有 CSS 长度单位运算符前后都需要保留一个空格。 比如 width: calc(100% - 50px); 30. transition、transform、animate 的区别 transition过渡效果它有4个属性 transition: property duration timing-function delay;property css属性的名称 duration 多长时间完成 timing-function转速曲线 delay开始的时候。 transform 应用于元素的 2D 或 3D 转换。这个属性允许你将元素旋转缩放移动倾斜等。 旋转rotate缩放scale移动translate倾斜skew animate应用动画效果。语法如下 animation: name duration timing-function delay iteration-count direction fill-mode play-state;name 定义的名称duration 多长时间完成delay 开始前多长的延迟iteration-count播放几次direction 指定是否应该轮流反向播放动画。fill-mode结束的状态play-state指定动画是否正在运行或已暂停。
