![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 65
kjlong123
这个作者很懒,什么都没留下…
展开
-
:before/:after里iconfont的使用方法
:before/:after是伪元素,fontawesome 是在伪元素的content加入不同的Unicode 来渲染不同的图标的可以放在content 里啊,直接放在 html里的那是字符实体编码,比如 其中&#是开头用以标明这是字符实体,x表示这是十六进制,而CSS的content接受的也是16进制的Unicode编码,所以可以直接写 content: "\e7b原创 2016-12-30 10:09:50 · 9766 阅读 · 1 评论 -
input value值的实时监听
oninput,onpropertychange,onchange的用法onchange触发事件必须满足两个条件:a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)b)当前对象失去焦点(onblur);onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的; 关于oninput事件oninput 是 HTM...原创 2016-12-01 15:21:08 · 5399 阅读 · 0 评论 -
CSS渲染与优化
CSS 引擎查找样式表,对每条规则都按从右到左的顺序去匹配。 看如下规则:示例 11#nav li {}看起来很快,实际上很慢,尽管这让人有点费解。我们中的大多数人,尤其是那些从左到右阅读的人,可能猜想浏览器也是执行从左到右匹配规则的,因此会推测这条规则的开销并不高。在脑海中,我们想象浏览器会像这样工作:找到唯一的ID为nav的元素,然后把这个样式应用到直系子元素的li元素上。我们知道有一个ID为...转载 2018-05-31 14:30:17 · 647 阅读 · 0 评论 -
前端页面卡顿?或是DOM操作惹的祸,需优化代码
文档对象模型(DOM)是一个独立 于特定语言的应用程序接口。在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaScript中重要的组成部分。在富客户端网页应用中,界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现 的。尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性...转载 2018-08-01 15:39:05 · 2632 阅读 · 0 评论 -
关于BFC
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么? 在解释 BFC 是什么之前,需要先介...转载 2018-08-01 17:47:52 · 166 阅读 · 0 评论 -
关于IFC
在IFC中,盒子水平放置,一个接着一个,从包含块的顶部开始。在盒子间margins,borders,和padding的水平方向的值是有效。这些盒子也许通过不同的方式进行对齐:他们的底部和顶部也许被对齐,或者通过文字的基线进行对齐。矩形区域包含着来自一行的盒子叫做line box。line box的宽度由浮动情况和它的包含块决定。line box的高度由line-height的计算结果决定。一个...转载 2018-08-01 17:50:12 · 483 阅读 · 0 评论 -
PhotoShop的阴影参数转化为css box-shadow参数
原文链接:https://www.jianshu.com/p/f0b7dc56ab4aUI设计师根据需要设计出阴影效果,那么前端如何快速得到相应的参数呢。阴影效果.png混合模式:PhotoShop提供了多种混合模式,但是CSS3只支持正常模式(normal)。颜色: 阴影颜色。对应于CSS3阴影中的color值。不透明度(Opacity): 阴影的不透明度。对应于CSS3阴影...转载 2018-08-02 11:39:32 · 1803 阅读 · 0 评论 -
关于white-space、word-break和break-wrap
一直以来都只是知道这三个属性都可以在某种情形下控制是否换行,但具体该使用哪一个属性不是很清楚,实战时就一个个试,哪个管用用哪个,今天整理了一下这三个属性具体的意义。一、white-spacewhite-space 是用来设置如何处理元素内的空白的,这里的空白不仅仅指的空格,还包括换行符,所以它才能对文本是否换行有所控制。他的可选值和对应的描述如下:1.normal:默认。空白会被浏览器...原创 2018-10-13 17:58:00 · 713 阅读 · 0 评论 -
设置translate后,内部的fixed元素会失效
今天碰到一个问题就是,当对元素设置translate后,其内部的设置了position:fixed的元素会失效,或者说达不到预期效果。原因是因为,对于设置了translate的元素,浏览器会对其生成一个单独的层,脱离于原来的层。这是该元素内部的fixed元素相对应的定位层则变为了这个新的层。也就是说fixed并没有失效,只是其定位所参照元素变了。mdn对其解释如下:...原创 2019-01-16 16:46:07 · 1831 阅读 · 0 评论