随笔分类 -  css

摘要:在某些项目中需要加载大量的图片,会大大的影响加载速度。这里总结了几种前端关于图片优化的方法: 1 使用恰当的图片格式: 常见的图片格式有png\jpg\gif等,有的修饰图片或者有特殊要求的图片例如背景要求透明可能更适合无损压缩的png,而绝大多数的图片用jpg格式的就可以满足需求了。GIF格式的多 阅读全文
posted @ 2017-01-27 17:02 千与千寻* 阅读(596) 评论(0) 推荐(0)
摘要:在项目中经常会遇到设置元素水平垂直居中的需求。而且具体的场景也不同,所以将个人总结的方法做个汇总,希望对浏览者有用。 以下所举的例子都以一个html为准,这里规定好一些公用样式。 body { background color: efefef; } main { background color: 阅读全文
posted @ 2017-01-27 16:45 千与千寻* 阅读(1013) 评论(1) 推荐(4)
摘要:坚持每天做总结。今天下班还算早。写个跟css兼容有关的知识点。便于后期查看与学习。一、先说说各种主流浏览器的内核 浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“渲染引擎”,不同的浏览器内核对网页编写的解释也不同,反映在网页上的效果也会有所差别。 Trident Ge 阅读全文
posted @ 2016-08-15 19:48 千与千寻* 阅读(2292) 评论(0) 推荐(0)
摘要:css中的伪元素before和after,其实有很多小的妙用。 一、基础用法 w3c中的基础用法:用来给元素的内容前面(对应:before)或者后面(对应:after)插入新内容。 分别显示的是“I love you” 、图片、地址。 二、扩展 除此之外,我们还能常常见到before和after伪元 阅读全文
posted @ 2016-08-11 20:34 千与千寻* 阅读(755) 评论(0) 推荐(1)
摘要:在工作中经常会遇到文本显示的一些样式调整,今天就来说说文本显示的几个问题 。 一、强制换行的方法 1 word-break 是css3中的文本属性,规定非中日韩文本的换行规则,规定自动换行的处理方法,通过这个属性,可以让浏览器在特定的位置断行。w3c中有3个取值。 如果不设置宽度值,或者word-b 阅读全文
posted @ 2016-08-01 20:31 千与千寻* 阅读(1114) 评论(0) 推荐(0)
摘要:盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局。下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用。 一、css盒子模型概念 CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(p 阅读全文
posted @ 2016-07-22 18:41 千与千寻* 阅读(93248) 评论(1) 推荐(28)