欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

学习笔记1 - 树懒的追求

程序员文章站 2022-04-18 17:32:56
...
一,background-clip:border-box 默认/ padding-box / content-box;背景被裁剪到边框 / 内边距 / 内容区,css3属性。兼容写法如下:
     -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
     background-clip: padding-box;

二,雪碧图。
CSS Split,中文名CSS雪碧图。
简单的就是说,通过背景定位,将许多小的图片放在同一张大图上面,减少HTTP请求次数,加速网站。要做到这一点需要两个技术:
      1.CSS技术
   background:#color url(#image_src) #left #top #repeat;
参数说明:
#color:图片没有显示之前的颜色,透明的话,不填写
#image_src:背景图片地址
#left:图片水平方向的偏移量
#top:图片垂直方向的偏移量
#repeat:当容器大于图片大小时,背景扩展方式
      2.PS合成图片的定位
===============
示例:
PS制作大图片时,定位一个图片的位置为(10,20)
那么CSS应该这样写 background: url("../background.png") 10px 20px no-repeat;
三,
min-width: 160px;
_width:160px; 最小宽高度这样写。

四,
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);阴影写法。
五,JavaScript 放置在文档最后面可以使页面加载速度更快。