CSS
关注
分享
扫一扫
小鸟哗啦啦
日落月深，风华雪月动人，久别遇故人，沉沦
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
滚动条的样式选择器
滚动条的样式选择器原创 2022-06-23 08:42:06 · 217 阅读 · 0 评论 -
盒模型、盒子的尺寸、位置参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒模型、盒子的尺寸、位置参数</title> <style> #content .原创 2021-01-28 15:09:01 · 576 阅读 · 2 评论 -
vue中的 样式穿透
用于修改第三方ui组件库的样式，vue与element-ui 比如说，在vue的某个组件中想要修改element-ui的按钮样式，但是在其他的非子组件中按钮样式又想保持element-ui的风格。就需要使用 scope 和样式穿透 >>> .el-button_danger font-size 20px /deep/ el-button_primary font-size 16px ...原创 2021-01-26 17:31:20 · 291 阅读 · 0 评论 -
2020-09-20 html的微信页面缓存的更新 + css的float如何避免贴边重叠 + JS的对象转换为字符串类型 + 软技能的前端代码评审CheckList
2020-09-20 题目来源：http://www.h-camel.com/index.html [html] 微信H5页面如何更新缓存？ 缓存设置可以在head标签中进行添加 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=8"> <meta http-equiv="Expires" c原创 2020-10-16 09:36:33 · 228 阅读 · 0 评论 -
2020-09-19 html的页面禁止微信中的分享 + css的flex实现一行宽度平均分配 + JS的对象转换为数字类型 + 软技能的预估工作量
2020-09-19 题目来源：http://www.h-camel.com/index.html [html] H5页面在微信中如何禁止分享给好友和朋友圈？ <script> function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu'); } if (typeof WeixinJSBridge == "undefined") { if (document.addEv原创 2020-09-29 09:10:08 · 257 阅读 · 0 评论 -
2020-09-18 html的打印网页换页 + css的height100%如何生效 + JS的暂存死区 + 软技能的屏幕坐标、客户区域坐标、页面坐标
2020-09-18 题目来源：http://www.h-camel.com/index.html [html] 打印网页时，如何让指定的元素另起一页打印呢 // footer 元素后始终插入分页符 @media print { footer {page-break-after: always;} } // h1 标题之前 始终插入分页符 @media print { h1 {page-break-before: always;} } // 避免在pre blockquote 中使原创 2020-09-28 10:09:42 · 478 阅读 · 0 评论 -
2020-09-17 html的列表编号倒序 + css的2个inlineblock之间的空隙 + JS的requestIdleCallback + 软技能的周日报的excel的模板
2020-09-17 题目来源：http://www.h-camel.com/index.html [html] 举例说明只用html和css如何使得一个列表编号倒序？ 方法一： reversed <ol reversed> <li>C</li> <li>B</li> <li>A</li> </ol> 方法二： li 中的 value 值 <ol> <li v原创 2020-09-28 09:08:33 · 293 阅读 · 0 评论 -
2020-09-16 html的http状态码 + css的spacebetween + JS的EventLoop的缺点 + 软技能的管理日常化
2020-09-16 题目来源：http://www.h-camel.com/index.html [html] http中的301、302、307、308有什么区别 100 继续，客户端应继续请求 101 切换协议，server根据client，只能切换到更高的协议 200 OK 请求成功 201 已创建 202 已接受 203 非授权信息 301 永久移动，请求的资源以被永久移动到新的URI，今后的任何新请求都应使用新的URI代替 302 临时移动，资源被临时移动，客户端应继续使用原有原创 2020-09-27 11:08:06 · 258 阅读 · 0 评论 -
2020-09-15 html的input标签添加清除按钮 + css的清除li标签的默认斜体 + JS的requestIdleCallback + 软技能的模块热替换
2020-09-15 题目来源：http://www.h-camel.com/index.html [html] 如何给input的右上角加个清除的按钮？ input右边加个图标，设置它的点击事件，click 去清除input标签的val值 $("#clear").click(function () { $(".input_key").val(""); $(".input_key").focus(); // $(this).hide(); // 可以设置iput的获得焦点事件原创 2020-09-27 08:59:36 · 344 阅读 · 0 评论 -
2020-09-14 html的光标聚焦第一input + css的fixed与float区别 + JS的requestAnimationFrame + 软技能前端如何监控性能
2020-09-14 题目来源：http://www.h-camel.com/index.html [html] 进入编辑页面时，如何把光标聚焦到第一个input？ 首先来看看如何为input设置光标聚集<input type="text" autofocus> 那多个input如何处理呢： let arr = document.querySelectorAll("input"); //arr[0].autofocus = "true"; arr[0].setAttribute(".原创 2020-09-25 10:56:03 · 530 阅读 · 0 评论 -
2020-09-13 html的span的标签嵌套 + css的position fixed定位的基准元素改变的方式 + JS的UI渲染之前处理一些事情你该怎么办 + 软技能的时间
2020-09-13 题目来源：http://www.h-camel.com/index.html [html] html中在span标签里面可以放那些标签？ 元素开始与结束标签嵌套错误，页面可以在大部分浏览器被正常解析，IE9会出现解析错误 在<p>元素内嵌入<div>等元素造成所有浏览器的解析错误吗，亲测可以 在<h1>~<h6>元素内嵌入<div>等元素所有浏览器可以解析正常 在<a>元素内嵌入<a>元素会原创 2020-09-25 09:51:42 · 360 阅读 · 0 评论 -
2020-09-12 html的两个数组的交集 + css的flex脱离viewport会产生什么bug + JS的请求的缓存处理 + 软技能的组织内部矛盾处理
2020-09-12 题目来源：http://www.h-camel.com/index.html [html] const nums1 = [1, 2, 2, 1], nums2 = [2] 交集是什么？ // map方法求两个数组的交集 //使用Map，数组作为键值key，计数器作为value public int[] intersect2(int[] nums1, int[] nums2) { Map<Integer,Integer> map = new HashMap<原创 2020-09-25 09:07:56 · 127 阅读 · 0 评论 -
2020-09-11 html的video的触发顺序 + css的是stacking context + JS的DOM节点的操作如何优化 + 软技能的业务与技术冲突时
2020-09-11 题目来源：http://www.h-camel.com/index.html [html] H5中video的事件的触发顺序是怎样的？ onloadstart ondurationchange onloadedmetadata onloadeddata onprogress oncanplay 用户可以开始播放视频/音频时触发 oncanplaythrough [css] 如何创建stacking context？ stacking context 层叠上下文 ...原创 2020-09-24 10:57:56 · 884 阅读 · 0 评论 -
层叠上下文 stacking context 示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>层叠上下文</title> <script src="js/jquery-3.4.1.min.js"></script> <style> body { background-color: white; .原创 2020-09-24 10:34:09 · 172 阅读 · 0 评论 -
2020-09-10 html的MediaRecorder应用场景 + css的分离图层做动画 + JS的RAIL性能评估模型 + 软技能的管理团队人重要还是事重要
2020-09-10 题目来源：http://www.h-camel.com/index.html [html] 你有使用过MediaRecorder吗？说说它的运用场景有哪些？ MediaRecorder() 构造函数会创建一个对指定的 MediaStream 进行录制的 MediaRecorder 对象。 对指定的流创建一个音频比特率为128kbps,视频比特率为2.5Mbps的媒体录制器. 被录制的媒体数据会以MP4格式封装。 var options = { audioBitsPerSe原创 2020-09-24 08:56:23 · 353 阅读 · 0 评论 -
2020-09-09 html的sharedworker应用场景 + css的动画代替js动画有什么好处 + JS的寄生式组合继承 + 软技能的空降管理团队
2020-09-09 题目来源：http://www.h-camel.com/index.html [html] 说说你对H5的SharedWorker的理解，它有什么运用场景？ Worker SharedWorker 是HTML5为我们提供的多线程的实现机制。解决问题： 如果js花费较长时间来处理一件事，那么浏览器这段时间将不会对用户产生响应。 看看这个主线程调用多个子线程的例子：主线程要完成一个任务需要两个线程，它创建了两个线程worker1,2,先向worker1请求，得到返回的数据后，再请求w原创 2020-09-23 09:32:34 · 236 阅读 · 0 评论 -
2020-09-08 html的sharedworker应用场景 + css的同级li的最后一个li的右边距 + JS的sdk设计 + 软技能的团队管理核心要素
2020-09-08 题目来源：http://www.h-camel.com/index.html [html] 说说你对H5的SharedWorker的理解，它有什么运用场景？ Worker SharedWorker 是HTML5为我们提供的多线程的实现机制。解决问题： 如果js花费较长时间来处理一件事，那么浏览器这段时间将不会对用户产生响应。 看看这个主线程调用多个子线程的例子：主线程要完成一个任务需要两个线程，它创建了两个线程worker1,2,先向worker1请求，得到返回的数据后，再请求w原创 2020-09-23 09:13:12 · 261 阅读 · 0 评论 -
2020-09-07 html的head的必有标签 + css的单位 + JS的sdk设计 + 软技能的团队管理
2020-09-07 题目来源：http://www.h-camel.com/index.html [html] 在head标签中必不可少的是什么？ head标签中主要包括，标题、编码格式、引入的css和js，还有很多meta标签中所定义的部分。 主要包含的内容参考： <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user原创 2020-09-22 16:57:13 · 298 阅读 · 0 评论 -
2020-09-06 html的大数据列表优化 + css的flex + JS的SeaJS与requireJS库 + 软技能的技术管理
2020-09-06 题目来源：http://www.h-camel.com/index.html [html] 如何优化大数据列表（10万+）的性能？说说你的方案 1.列表中固定只显示少量的数据，比如60条 2.在列表滚动的时候不断的去插入删除dom 3.startIndex、endIndex，不断的改变这个值来获取最新的显示列表 4.paddingTop、paddingBottom撑开容器的滚动区域 转自 https://www.cnblogs.com/songbw/p/11613869.h原创 2020-09-22 09:26:11 · 210 阅读 · 0 评论 -
2020-09-05 html的获取所有img标签的src地址 + css的flex 1的完整写法 + JS的非行间样式获取 + 软技能的平衡点
2020-09-03 题目来源：http://www.h-camel.com/index.html [html] 请写一个正则获取html源码中所有img标签的src地址 /// <summary> /// 取得HTML中所有图片的 URL。 /// </summary> /// <param name="sHtmlText">HTML代码</param> /// <returns>图片的URL列表</returns> publi原创 2020-09-22 09:00:02 · 285 阅读 · 0 评论 -
2020-09-04 html的纯htm实现跑马灯效果 + css的弹幕效果 + JS的实现对节点的拖拽 + 软技能的web端的批量打印
2020-09-03 题目来源：http://www.h-camel.com/index.html [html] 如何使用纯HTML实现跑马灯的效果？ 应该是纯css实现的吧，css的动画属性animation:动作名称 动画时间 速度曲线 延时 播放次数 animation: traffic-light 5s linear 0s infinite; [css] 使用css使用一个弹幕的效果 结合动画特性 animation 对div的位置进行修改 tansform: translateX();原创 2020-09-21 10:35:36 · 374 阅读 · 0 评论 -
CSS实现的弹幕效果
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>CSS实现的弹幕效果</title> <scriptsrc="js/jquery-3.4.1.min.js"></script> <style> body{ background-col...原创 2020-09-21 09:38:11 · 871 阅读 · 0 评论 -
2020-09-03 html的网站快速下载模板 + css的grid布局与flex布局 + JS的代理console.log方法 + 软技能的android键盘回落后留白
2020-09-03 题目来源：http://www.h-camel.com/index.html [html] 给你一个参考网站，你能快速下载它的模板吗？用哪些方法？ 浏览器的查看网页源代码，但是这样只能给你个结构排版参考，真正的框架需要自己研究。 建议去模板网站找个类似的demo下载进行修改。 [css] grid布局和flex布局有什么区别？ flex用于一维布局，grid用于二维布局。 1.flex 子元素本身来决定放置方式，只需要设置父级元素 display: flex; 使元素居右自原创 2020-09-18 10:25:41 · 219 阅读 · 0 评论 -
2020-09-02 html的RGB与CMYK + css的grid布局 + JS的输入类型选择器返回DOM元素 + 软技能的http3
2020-09-02 题目来源：http://www.h-camel.com/index.html [html] HTML采用的是RGB颜色还是CMYK颜色？为什么？ RGB色彩模式，红绿蓝三原色。 网页设计常用 CMYK也成为印刷色彩模式，一种依靠反光的色彩模式，需要外界光源才能看到，常用印刷打印场景 [css] 你有使用过grid布局吗？说说你对它的理解 使用Grid布局非常简单，你只需要给容器（container）定义：display:grid，并设置列（grid-template-colu原创 2020-09-18 09:43:55 · 343 阅读 · 0 评论 -
2020-09-01 html的列表元素的兄弟元素为div + css的鼠标悬停图片放大 + JS的class与普通构造函数区别 + 软技能的V8引擎
2020-08-31 题目来源：http://www.h-camel.com/index.html [html] 如果列表元素li的兄弟元素为div，会产生什么情况？ 元素开始与结束标签嵌套错误，页面可以在大部分浏览器被正常解析，IE9会出现解析错误 在<p>元素内嵌入<div>等元素造成所有浏览器的解析错误 在<h1>~<h6>元素内嵌入<div>等元素所有浏览器可以解析正常 在<a>元素内嵌入<a>元素会导致原创 2020-09-17 09:51:15 · 181 阅读 · 0 评论 -
2020-08-31 html的标签嵌套的闭合错误 + css的吊扇旋转动画 + JS的Math的最大最小值 + 软技能的webAssembly
2020-08-31 题目来源：http://www.h-camel.com/index.html [html] html的开始与结束标签嵌套错误会导致哪些问题？ 元素开始与结束标签嵌套错误，页面可以在大部分浏览器被正常解析，IE9会出现解析错误 在<p>元素内嵌入<div>等元素造成所有浏览器的解析错误 在<h1>~<h6>元素内嵌入<div>等元素所有浏览器可以解析正常 在<a>元素内嵌入<a>元素会导致所有原创 2020-09-17 09:32:37 · 372 阅读 · 1 评论 -
旋转的五角星
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-3.4.1.min.js"></script> <style> body { background-color: white; background-image: .原创 2020-09-17 09:23:08 · 630 阅读 · 0 评论 -
2020-08-30 html的密码的明暗文切换 + css的小车行驶动画 + JS的改变作用域链 + 软技能的websocket实现握手
2020-08-30 题目来源：http://www.h-camel.com/index.html [html] 写一个密码默认星号，但可以查看密码的输入框 主要就是改变input标签中的type属性，利用jquery来实现一个比较low的demo： <button id="btn" onmousedown="changeText()" onmouseup="changePwd()">按钮</button><br /> <form> <i原创 2020-09-17 08:47:00 · 345 阅读 · 1 评论 -
2020-08-29 html的不规则形状实现方式 + css的发光霓虹灯位子效果 + JS的各种数组 + 软技能的覆盖率
2020-08-29 题目来源：http://www.h-camel.com/index.html [html] 制作一个不规则形状有哪些方法可以实现？ 各种形状的实现，border-top border-right border-bottom border-left https://www.cnblogs.com/liangxiaofeng/p/5936760.html [css] 使用css实现闪光的霓虹灯文字效果 css实现的文字效果 https://blog.csdn.net/w1781原创 2020-09-14 15:10:41 · 287 阅读 · 0 评论 -
2020-08-28 html的跨域通信方式 + css的元素属性赋值过程 + JS的undefined与not defined + 软技能的持续集成
2020-08-27 题目来源：http://www.h-camel.com/index.html [html] 跨域通信有哪些方式？ JSONP Ajax WebSocket CORS Hash postMessage 各个技术介绍 https://www.cnblogs.com/qianguyihao/p/8523576.html [css] 说说CSS对元素属性赋值的详细过程？ 深入CSS的属性赋值 https://blog.csdn.net/weixin_33712881/ar原创 2020-09-14 14:42:34 · 204 阅读 · 0 评论 -
2020-08-27 html的cookie + css的雪花效果 + JS的数字占内存多少byte + 软技能的人脸识别
2020-08-27 题目来源：http://www.h-camel.com/index.html [html] 说下cookie的优点和使用场景是什么？ cookie采用的是在客户端保持状态的方案，而session是在服务端保持状态的方案。 应用场景： cookie实现自动登录； 根据用户爱好定制站点；用户访问计数； 这是一篇非常全面的文章 https://blog.csdn.net/u011145904/article/details/77745777 [css] 使用css3制作雪花效果原创 2020-09-14 14:20:14 · 172 阅读 · 0 评论 -
2020-08-26 html的预解析dns + css的特性 + JS的全局函数 + 软技能的成长性
2020-08-26 题目来源：http://www.h-camel.com/index.html [html] html哪个标签属性可以通过预解析DNS？ DNS prefetching <link rel=”dns-prefetch” href=”//weibo.com”> [css] 你最不喜欢css的哪些特性是什么？为什么？ 打印属性 [js] 列举出JS的全局函数 1.decodeURI() 解码某个编码的URI 2.decodeURIComponent 解码一个编码的原创 2020-09-14 13:55:55 · 275 阅读 · 0 评论 -
2020-08-25 html的页面优化渲染过程 + css的无法实现的样式 + JS的四则混合运算求值 + 软技能的同步异步区别及应用场景
2020-08-25 题目来源：http://www.h-camel.com/index.html [html] 如何优化页面的渲染过程 首先，页面的渲染过程包括以下几个步骤： 1.HTML解析，构建DOM树 2.CSS解析，构建CSSOM树 3.DOM和CSSOM结合，形成Rendering Tree渲染树 4.根据渲染树来进行布局，计算节点的信息 5.将各个节点绘制到屏幕上 注意：DOM和CSSOM如果被修改了，将会进行重排和重绘 优化： 1.HTML的结构布局完整清晰，标签的合理使原创 2020-09-14 11:57:08 · 170 阅读 · 0 评论 -
2020-08-24 html的预渲染标签 + css的忘记处理 + JS的如何创建private方法 + 软技能的web缓存需要后台如何配合
2020-08-24 题目来源：http://www.h-camel.com/index.html [html] html的哪个标签可以预加载？ 通过浏览器特性来提高资源加载速度的方法： 1.DNS prefetching DNS解析的速度可以通过下面的标签进行预解析 <link rel=”dns-prefetch” href=”//weibo.com”> 2.Preconnect 和DNS预解析差不多，preconnect还会做TCP握手和TLS Negotiation <l原创 2020-09-11 08:58:02 · 226 阅读 · 0 评论 -
2020-08-23 html的标签预加载 + css的新知识 + JS的json的标准格式 + 软技能的能说会道vs安静做事
2020-08-23 题目来源：http://www.h-camel.com/index.html [html] html的哪个标签可以预加载？ 通过浏览器特性来提高资源加载速度的方法： 1.DNS prefetching DNS解析的速度可以通过下面的标签进行预解析 <link rel=”dns-prefetch” href=”//weibo.com”> 2.Preconnect 和DNS预解析差不多，preconnect还会做TCP握手和TLS Negotiation <l原创 2020-09-11 08:46:49 · 247 阅读 · 0 评论 -
2020-08-22 html的a标签防止跳转 + css的高级特性 + JS的判断字符串结尾的字母 + 软技能的功能上线后的报告发布
2020-08-22 题目来源：http://www.h-camel.com/index.html [html] 在a标签中，怎样防止链接跳转？ 一般使用a标签来做按钮时，不需要跳转时，href的值为空。 如果不需要跳转，需要设置href的值：<a href="javascript:void(0);">链接</a> [css] 你觉得css高级的特性有哪些？ transform: translate(); box-shadow animation text-shad.原创 2020-09-11 08:17:24 · 183 阅读 · 0 评论 -
2020-08-21 html的a标签href为空 + css的学习方法 + JS的实现树的路径查询 + 软技能的端到端交付的理解
2020-08-21 题目来源：http://www.h-camel.com/index.html [html] 说说如果a链接href=""（空）时点击时会有什么表现？ 表现就是：刷新页面 一般使用a标签来做按钮时，不需要跳转时，href的值为空。 如果不需要跳转，需要设置href的值：<a href="javascript:void(0);">链接</a> [css] 你是怎么学习css的？说说你的学习方法 多看多写 [js] 写一个方法，实现树的路径查询[代码].原创 2020-09-10 16:20:20 · 462 阅读 · 0 评论 -
2020-08-20 html的canvas的坑 + css的最喜爱特性 + JS的函数实现 + 软技能的https的数据传输安全
2020-08-20 题目来源：http://www.h-camel.com/index.html [html] 使用canvas时你有遇到过哪些坑？是如何解决的？ 坑之一：输入的文字和坐标都是标准的，但是文字就是不给你在标准展示，坐上偏上。 原因：canvas插入文字的坐标（x，y）, 不是左上角相对于画布的坐标，是左下角相对于画布的坐标 （1）x:文字左边相对于画布的坐标 （2）y:文字下面相对于画布的坐标，但是，这个y有个baseline的限制，如果需要严格的上下居中时，需要设置一下它的 b原创 2020-09-10 09:15:47 · 235 阅读 · 0 评论 -
2020-08-19 html的ios下webapp全屏 + css的代码 + JS的N个数放到M个位置上有多少种排列 + 软技能的本地开发如何绑定域名开发
2020-08-19 题目来源：http://www.h-camel.com/index.html [html] 如何在IOS下启用WebApp全屏模式？ 当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果） <meta name="apple-mobile-web-app-capable" content="yes" /> /* 删除苹果默认的工具栏和菜单栏 */ <meta name="apple-touch-fullscreen" co原创 2020-09-10 08:57:07 · 352 阅读 · 0 评论 -
2020-08-18 html的最喜爱标签 + css的下雨动画 + JS的取消promise + 软技能的扫码登录原理及流程
2020-08-17 题目来源：http://www.h-camel.com/index.html [html] 你最喜欢html的哪个标签？为什么？ meta [css] 使用css3制作下雨动画的效果 线性渐变、阴影、缩放来实现下雨动画 https://www.imooc.com/article/279422 [js] 如何取消promise 1.reject function hello() { let _res, _rej: any; const promise = ne原创 2020-09-09 15:54:13 · 181 阅读 · 0 评论