炒冷饭9

CSS Sprite的重要性

background-position:默认左上角
x y
x% y%
[top | center | bottom] [left | center | right]
background-repeat:
no-repeat:背景图片在规定位置
repeat-x:图片横向重复
repeat-y:图片纵向重复
repeat:全部重复
background-size:
100px 100px
contain
cover
在http://www.iconfont.cn/ 上使用字体图标
图片合并可以使用这个线上地址 csssprites.com14
在生产环境中使用的图片都需要经过压缩再使用,线上压缩图片地址 tinypng.com13
line-height:2 是指行高是盒子模型里的content的两倍行高
line-height:200%是指行高是父元素的行高的两倍
高度不一样的inline-block元素如何顶端对齐?
vertical-align:top;
inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
inline-block 既呈现 Inline 特性(不占据一整行,宽度由内容宽度决定)又呈现block特性(可设置宽度高,内外边距)
如何去缝隙?
两段span中间的空隙去掉变成一行,不要留出空白字符
.wrap{front-size:0; }
【炒冷饭9】让一个元素"看不见"有几种方式?有什么区别?
display:none;
将元素设置为display:none后,元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘。
visibility:hidden
和display:none的区别在于,元素在页面消失后,其占据的空间依旧会保留着,所以它只会导致浏览器重绘而不会重排。适用于那些元素隐藏后不希望页面布局会发生变化的场景。所以如果是hover点击也是没有的。
opacity:0
这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间,但我们都知道,设置透明度为0后,元素只是隐身了,它依旧存在页面中。所以如果是hover点击可以显示。
background-color:rgba(0,0,0,0.2);设置背景色透明

    推荐阅读