一、css精灵图:
优点:减少网页的http请求,从而大大的提高页面的性能;CSS Sprites能减少图片的字节
二、overflow
参数:
scroll:必会出现滚动条。
auto:子元素内容大于父元素时出现滚动条。
visible:溢出的内容出现在父元素之外。
hidden:溢出隐藏。
三、图片
png是便携式网络图片(Portable Network Graphics)是一种无损数据压缩位图文件格式.优点是:压缩比高,色彩好。 大多数地方都可用。
jpg是一种针对相片使用的一种失真压缩方法,是一种破坏性的压缩,在色调及颜色平滑变化做的不错。在www上,被用来储存和传输照片的格式。
gif是一种位图文件格式,以8位色重现真色彩的图像。可以实现动画效果.
webp格式是谷歌在2010年推出的图片格式,压缩率只有jpg的2/3,大小比png小了45%。缺点是压缩的时间更久了,兼容性不好,目前谷歌和opera支持。
四、高度自适应
外层div使用position:relative;高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="height: 500px;position: relative;">
<div style="height: 100px;"></div>
<div style="position: absolute;top: 100px;bottom: 0px;left: 0px;background: blue;width: 100%;"></div>
</div>
</body>
</html>
五、display:inline-block空格解决
有空格时候会有间隙 解决:移除空格
margin正值的时候 解决:margin使用负值
使用font-size时候 解决:font-size:0、letter-spacing、word-spacing
六、让页面里的字体变清晰,变细用CSS怎么做?
-webkit-font-smoothing在window系统下没有起作用,但是在IOS设备上起作用-webkit-font-smoothing:antialiased是最佳的,灰度平滑。
七、display
inline(默认)–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block
八、水平居中
1.将要居中的元素设置display:inline-block,父元素设置:text-align:center
2.给将要居中的元素设置一个固定的宽度,然后设置margin:0 aotu;
3.给将要居中的元素设置:(前条件,父元素必须要设置相对定位属性)
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
九、让页面里的字体变清晰,变细用CSS怎么做?
-webkit-font-smoothing在window系统下没有起作用,但是在IOS设备上起作用-webkit-font-smoothing:antialiased是最佳的,灰度平滑。
十、浮动实现文字环绕效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 400px;margin: 100px auto;background: silver;padding: 10px;color: white;">
<p style="float: left;">
<img src="img/navBg.png" />
</p>
我打江南走过
那等在季节里的容颜如莲花的开落
东风不来,三月的柳絮不飞
你底心如小小寂寞的城
恰若青石的街道向晚
音不响,三月的春帷不揭
你底心是小小的窗扉紧掩
我达达的马蹄是美丽的错误
我不是归人,是个过客……
——郑愁予《错误》
</div>
</body>
</html>
效果图:
十一、position属性:
1.static:默认。元素框正常生成.
2.inherit:继承。
3.relative:相对定位。相对自己的原来的位置定位。
4.absolute:绝对定位。相对有position属性的父级元素定位,若父级元素没有就继续往上层查找,直到找到为止。如果一直没有就相对body定位。
5.fixed:固定定位。相对视口的位置定位。
6.sticky:(C3新增属性)粘性定位。相当于relative和fixed混合。最初会被当作是relative,相对于原来的位置进行偏移;一旦超过一定阈值之后,会被当成fixed定位,相对于视口进行定位。demo地址(https://jsbin.com/moxetad/edit?html,css,output)
十二、超出隐藏
(1)、超出一行隐藏
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
(2)、超出三行隐藏
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
十三、position:fixed;在android下无效怎么处理
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
文章原文:点击打开链接