![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
qq_36631168
这个作者很懒,什么都没留下…
展开
-
元素同排方式-css
1.浮动float;2.display:inline-block; 若使用该方法,元素间多出来的距离,可通过在父元素设置font-size:0;来消除, 或者标签元素间不换行, 又或者通过在标签元素后添加一个加上注释的空格.3.flex布局原创 2016-11-07 18:02:51 · 308 阅读 · 0 评论 -
FOUC(无样式内容闪烁)
FOUC - Flash Of Unstyled Content 文档样式闪烁 @import "../fouc.css"; 而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。 解决方转载 2016-11-11 11:43:35 · 352 阅读 · 0 评论 -
性能优化方法
(1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。 (2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数 (3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。转载 2016-11-11 14:27:31 · 290 阅读 · 0 评论 -
项目管理
先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等; 编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行); 标注样式编写人,各模块都及时标注(标注关键样式调用的地方); 页面进行标注(例如 页面 模块 开始和结束); CSS跟HTML 分文件夹并行存放,命名都得统一(例如style.css转载 2016-11-11 15:24:27 · 229 阅读 · 0 评论 -
grunt, YUI compressor 和 google clojure进行代码压缩的用法
YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具,采用Java开发。使用方法://压缩JSjava -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js//压缩CSSjava -jar yuicompressor-2.4.2.jar --type css --转载 2016-11-11 18:27:02 · 336 阅读 · 0 评论 -
css阻塞与js阻塞
js的阻塞特性:所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验,新一代浏览器都支持并行下载JS,但是JS下载仍然会阻塞其它资源的下载(例如.图片,css文件等)。由于浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以就会阻塞其他的下载和呈现。嵌转载 2016-11-11 18:43:31 · 3438 阅读 · 0 评论 -
JS-无阻塞加载
将脚本放在底部。还是放在head中,用以保证在js加载前,能加载出正常显示的页面。标签放在前。成组脚本:由于每个标签下载时阻塞页面解析过程,所以限制页面的总数也可以改善性能。适用于内联脚本和外部脚本。非阻塞脚本:等页面完成加载后,再加载js代码。也就是,在window.onload事件发出后开始下载代码。 (1)defer属性:支持IE4和fierfox3.5更高版本浏览器 (转载 2016-11-11 19:00:41 · 265 阅读 · 0 评论 -
页面重构
编写 CSS、让页面结构更合理化,提升用户体验,实现良好的页面效果和提升性能。转载 2016-11-11 21:13:40 · 286 阅读 · 0 评论 -
网站重构
网站重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。也就是说是在不改变UI的情况下,对网站进行优化,在扩展的同时保持一致的UI。对于传统的网站来说重构通常是:表格(table)布局改为DIV+CSS使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)对于移动平台的优化针对于SEO进行优化深层次的网站重构应该考虑的方面减少代转载 2016-11-11 21:51:25 · 468 阅读 · 0 评论 -
CSS-区别link 和@import
A:(1) link属于HTML标签,而@import是CSS提供的; (2) 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;(3) import只在IE5以上才能识别,而link是HTML标签,无兼容问题; (4) link方式的样式的权重 高于@import的权重.转载 2016-11-11 22:37:24 · 222 阅读 · 0 评论 -
CSS-文字效果
1.1、自定义字体: 使用@font-face自定义字体 @font-face{font-family: xujinglei;src: url('xujinglei.ttf') ,url('xujinglei.eot'); /* IE9+ */}div{font-family:xujingle转载 2016-11-13 17:59:40 · 585 阅读 · 0 评论 -
测试代码性能的工具
Profiler, JSPerf(http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout), Dromaeo转载 2016-11-11 09:51:34 · 1003 阅读 · 0 评论 -
常见兼容性问题
* png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.也可以引用一段脚本处理.* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。* IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。 * 浮动ie产生的双倍距离(IE6双边距问题:在转载 2016-11-10 12:01:39 · 202 阅读 · 0 评论 -
前端-减少页面加载时间的方法
1.优化图片 2.图像格式的选择(GIF:提供的颜色较少,可用在一些对颜色要求不高的地方) 3.优化CSS(压缩合并css,如margin-top,margin-left...) 4.网址后加斜杠(如www.campr.com/目录,会判断这个“目录是什么文件类型,或者是目录。) 5.标明高度和宽度(如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏转载 2016-11-10 15:55:20 · 616 阅读 · 0 评论 -
css盒子模型
一般称IE8及其以上为w3c盒子模型,W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。IE8以下的为IE 盒子模型,IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border和 p转载 2016-11-10 13:05:21 · 166 阅读 · 0 评论 -
浮动
浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。清除浮动的技巧1.使用空标签清除浮动。 这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。2.使用overflow。 给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。3.使用after转载 2016-11-10 12:13:49 · 257 阅读 · 0 评论 -
CSS sprites
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销,因为请求耗时比较长;请求虽然可以并发,但是也有限制转载 2016-11-10 10:37:27 · 176 阅读 · 0 评论 -
BFC规范
BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的margin会发生折叠。 (W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行布局,以及与其他元素的关系和相互作用。)转载 2016-11-09 20:58:23 · 265 阅读 · 0 评论 -
css伪类
CSS3新增伪类举例:p:first-of-type 选择属于其父元素的首个 元素的每个 元素。p:last-of-type 选择属于其父元素的最后 元素的每个 元素。p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。p:only-child 选择属于其父元素的唯一子元素的每个 元素。p:nth-child(2) 选择属于其父元素的第二转载 2016-11-09 18:54:34 · 333 阅读 · 0 评论 -
css优先级
* 优先级就近原则,同权重情况下样式定义最近者为准;* 载入样式以最后载入的定位为准;优先级为: !important > id > class > tag important 比 内联优先级高,但内联比 id 要高转载 2016-11-09 18:48:01 · 244 阅读 · 0 评论 -
css样式属性
* 可继承的样式: font-size font-family color, text-indent;* 不可继承的样式:border padding margin width height ;转载 2016-11-09 18:44:09 · 184 阅读 · 0 评论 -
css选择器
* 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器(li a) 7.通配符选择器( * ) 8.属性选择器(a[rel = "exter转载 2016-11-09 18:37:34 · 283 阅读 · 0 评论 -
position的absolute与fixed共同点与不同点
A:共同点:1.改变行内元素的呈现方式,display被置为block;2.让元素脱离普通流,不占据空间;3.默认会覆盖到非定位元素上B:不同点:absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。当滚动网页时,fixed元素与浏览器窗口之间的距离是不变的。转载 2016-11-09 18:04:49 · 2033 阅读 · 0 评论 -
display:none和visibility:hidden的区别
display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在。visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的空间。转载 2016-11-09 18:00:40 · 180 阅读 · 0 评论 -
CSS-边框效果
2.1、border-image Border-image *{margin:0;padding:0;} div{ width:300px; padding:9px; /*padding:40px;*/ /*border-image: url(img/2.png) 26 26 26 26/10 repeat round ;*/转载 2016-11-14 16:58:56 · 2522 阅读 · 0 评论