kjlong123-CSDN博客

原创设置translate后，内部的fixed元素会失效

今天碰到一个问题就是，当对元素设置translate后，其内部的设置了position:fixed的元素会失效，或者说达不到预期效果。原因是因为，对于设置了translate的元素，浏览器会对其生成一个单独的层，脱离于原来的层。这是该元素内部的fixed元素相对应的定位层则变为了这个新的层。也就是说fixed并没有失效，只是其定位所参照元素变了。mdn对其解释如下：...

2019-01-16 16:46:07 1785

原创关于white-space、word-break和break-wrap

一直以来都只是知道这三个属性都可以在某种情形下控制是否换行，但具体该使用哪一个属性不是很清楚，实战时就一个个试，哪个管用用哪个，今天整理了一下这三个属性具体的意义。一、white-spacewhite-space 是用来设置如何处理元素内的空白的，这里的空白不仅仅指的空格，还包括换行符，所以它才能对文本是否换行有所控制。他的可选值和对应的描述如下：1.normal：默认。空白会被浏览器...

2018-10-13 17:58:00 658

原创原生dom如何对元素的class进行操作

今天看书时突然发现了classList属性，是DOMTokenList的实例，以数组的形式保存元素的class属性。classList可以用来很方便的操作元素的class，对其增删该查操作。说来惭愧，一直以来都是用jquery对元素的class进行操作，以为原生js的class操作必须要通过className属性来实现，指导今天才发现了原来H5早就提供了classList这一属性来方便开发...

2018-08-03 16:21:12 1821

转载国外程序员发帖求助快四十岁了不知道以后该怎么办

编者按：三十而立，四十而不惑。迈入不惑之年，健康、家庭、工作、生活等各个方面其实都发生了一些细微的变化。有一位程序员在Hacker News上发了一则帖子，想咨询一些关于人生职场的建议。本文编译自ycombinator.com上原题为《Ask HN: Turning 40 soon – seeking personal and professional life advice》的文章。 H...

2018-08-03 14:47:14 332

转载 PhotoShop的阴影参数转化为css box-shadow参数

原文链接：https://www.jianshu.com/p/f0b7dc56ab4aUI设计师根据需要设计出阴影效果，那么前端如何快速得到相应的参数呢。阴影效果.png混合模式：PhotoShop提供了多种混合模式，但是CSS3只支持正常模式(normal)。颜色：阴影颜色。对应于CSS3阴影中的color值。不透明度(Opacity)：阴影的不透明度。对应于CSS3阴影...

2018-08-02 11:39:32 1787

在IFC中，盒子水平放置，一个接着一个，从包含块的顶部开始。在盒子间margins,borders,和padding的水平方向的值是有效。这些盒子也许通过不同的方式进行对齐:他们的底部和顶部也许被对齐，或者通过文字的基线进行对齐。矩形区域包含着来自一行的盒子叫做line box。line box的宽度由浮动情况和它的包含块决定。line box的高度由line-height的计算结果决定。一个...

2018-08-01 17:50:12 477

转载关于BFC

BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么？　　在解释 BFC 是什么之前，需要先介...

2018-08-01 17:47:52 160

转载前端页面卡顿？或是DOM操作惹的祸，需优化代码

文档对象模型（DOM）是一个独立于特定语言的应用程序接口。在浏览器中，DOM接口是以JavaScript语言实现的，通过JavaScript来操作浏览器页面中的元素，这使得 DOM成为了JavaScript中重要的组成部分。在富客户端网页应用中，界面上UI的更改都是通过DOM操作实现的，并不是通过传统的刷新页面实现的。尽管DOM提供了丰富接口供外部调用，但DOM操作的代价很高，页面前端代码的性...

2018-08-01 15:39:05 2611

原创用js实现点击复制文本

function copyText(ele){ //复制文本需要在文档中添加一个复制用的input var copyDOM = ele; //要复制文字的节点 var range = document.createRange(); //创建一个range window.getSelection().removeAllRanges(); //清楚页面中已有的...

2018-07-05 17:16:32 3578

原创关于JS原生的offset的一些简单理解

offset这个属性，可以说是非常有用的，顾名思义，offset翻译过来就是偏移量，从名字就可以看出它的具体意义了。也即是元素相当于父元素的偏移量。offset大致包括offsetTop、offsetLeft、offsetWidth、offsetHeight、offsetParent五个部分，直白的翻译过来分别是上偏移、左偏移、偏移宽度、偏移高度、偏移父级。翻译虽不够恰当，但仍可体现出其大致意义。...

2018-06-21 16:09:20 10727

转载 CSS渲染与优化

CSS 引擎查找样式表，对每条规则都按从右到左的顺序去匹配。看如下规则：示例 11#nav li {}看起来很快，实际上很慢，尽管这让人有点费解。我们中的大多数人，尤其是那些从左到右阅读的人，可能猜想浏览器也是执行从左到右匹配规则的，因此会推测这条规则的开销并不高。在脑海中，我们想象浏览器会像这样工作：找到唯一的ID为nav的元素，然后把这个样式应用到直系子元素的li元素上。我们知道有一个ID为...

2018-05-31 14:30:17 642

转载 HTTP协议

HTTP是一个应用层协议，由请求和响应构成，是一个标准的客户端服务器模型 HTTP：Hyper Text Transfer Protocol（超文本传输协议）的缩写，HTTP是一个基于TCP/IP通信协议来传递数据，默认端口号为80　　特点：无连接：限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。　　　　　媒体独立的：只要客户端和服...

2018-05-31 13:50:40 171

原创自动化加载Express的路由设置

在使用node + express进行后台开发时，对路由进行配置时，往往需要现在routes文件夹下创建对应的路由，然后在app.js里逐个的require进来，然后使用 app.use('/path', route)逐个配置，当网站比较简单路由文件较少是还好，但是在路由文件逐渐增加的时候就显得代码有点冗杂且笨。对于配置路由这种机械化的工作当然是交给代码来实现比较好，如下代码，我提供了一个可以帮我...

2018-05-28 16:23:11 1390

转载 js获取整个页面文档的总宽高

可见域：即可以被显示出来的区域，由起高度大小决定，包括所有内边距、滚动条（被滚动出去的内容）和边框大小。网页可见域宽（不包括边框）：document.body.clientWidth 包括内容和内边距，整个文档宽度，即使被卷出去挡住的网页可见域高（不包括边框）：document.body.clientHeight 包括内容和内边距，整个文档高度，即使被卷出去挡住的网页可见域宽（包括边框）：do...

2018-05-23 09:27:28 12680

原创关于undefined和null

Undefined类型只有一个值，即undefined，对声明的变量没有初始化时，这个变量的值就是undefined。Null类型同样只有一个值，即null。null表示一个空对象指针，所以使用typeof检测会返回Object。实际上，undefined是派生自null值的，所以当两者进行比较时会出现以下情况： undefined == null 返回ture undefined =...

2018-05-23 09:26:51 348

原创 firefox浏览器下href执行js代码

firefox浏览器里，标签a的href执行js代码时不能执行台复杂的语句，只能执行单语句代码。即href="javascript: func1();func2();",此时可能会出错。 href="javascript:funct1()"可以正确执行。如果非要执行复杂的语句可以使用onclick来执行

2017-02-17 16:26:33 1789

转载 overflow-x 与 overflow-y设定值为visible时

当overflow-x和overflow-y其中一个设置为visible时，如果另一个不是visible，那么它会被自动重置为auto看看效果先：第一次遇到这个问题时，我还以为是chrome的一个bug，结果测试了一下，所有浏览器都是这样的，看一下效果.div1 { width: 100px; height: 100px; backgro

2017-01-23 11:09:18 1295

原创垂直居中的一个方法

/* Firefox */ display: -moz-box; -moz-box-pack: center; -moz-box-align: center; /* Safari、Opera 以及 Chrome */ display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: cen

2017-01-18 14:35:57 239

原创 :before/:after里iconfont的使用方法

:before/:after是伪元素，fontawesome 是在伪元素的content加入不同的Unicode 来渲染不同的图标的可以放在content 里啊，直接放在 html里的那是字符实体编码，比如 其中&#是开头用以标明这是字符实体，x表示这是十六进制，而CSS的content接受的也是16进制的Unicode编码，所以可以直接写 content: "\e7b

2016-12-30 10:09:50 9701 1

转载 HTML标签marquee实现滚动效果

原文见：http://www.cnblogs.com/zzuIvy/p/marqueeTest_1.html页面的自动滚动效果，可由javascript来实现，但是今天无意中发现了一个html标签 - 可以实现多种滚动效果，无需js控制。使用marquee标记不仅可以移动文字，也可以移动图片，表格等.语法：...；说明：在标记之间添加要进行滚动的内容。重要属性：

2016-12-01 16:22:21 297

原创 input value值的实时监听

oninput,onpropertychange,onchange的用法onchange触发事件必须满足两个条件：a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）b）当前对象失去焦点(onblur)；onpropertychange的话，只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；关于oninput事件oninput 是 HTM...

2016-12-01 15:21:08 5385

转载 JS中关于clientWidth offsetWidth scrollWidth 等的含义

网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offsetHeight (包括边线的宽);网页正文全文宽： document.body.scroll

2016-11-28 17:28:14 167

转载 java 多线程1

最全面的java多线程用法解析，如果你对Java的多线程机制并没有深入的研究，那么本文可以帮助你更透彻地理解Java多线程的原理以及使用方法。1.创建线程在Java中创建线程有两种方法：使用Thread类和使用Runnable接口。在使用Runnable接口时需要建立一个Thread实例。因此，无论是通过Thread类还是Runnable接口建立线程，都必须建立Thread类或它的

2015-10-20 17:07:40 195

u014608930的博客