随缘的专栏

图片，也就是img标签，行内元素；div，块级元素。 有时候我们会纠结于如何让这两种元素在父容器DIV中垂直居中显示（当然 ，这里我们抛开表格布局不谈，因为表格可以让内容自动垂直居中） 1. 对于图片，如下所示： .container{ height:350px; border:1px solid #DDDDDD; text-align: center;

前阵子做在线地图应用的时候，有个需求，就是地点标注出来要按区间分段渲染颜色。当然，可以用标签模拟正方形，三角形，再填充颜色，用css3还可以模拟一些圆形出来，但是一来要兼容万恶的IE7，二来又要好看。 近几年移动端浏览器上流行的图标字体（icon font）就派上用场了，最重要是IE6都支持它。下图是使用图标字体后的地图渲染效果，是不是很不错呢？ 使用icon font来生成图标相对于

如下图所示： 解决方案： img{vertical-align:top;} /*解决方案1*/ img{display: block} /*解决方案2*/ div{line-height: 0} /*解决方案3*/ 但是由于图片一般需要居中展示，为了利用text-align:center这个内联属性，推荐 方案1与方案3，方案2不推荐使用。

通过各种减少HTTP请求的来提高网站速度和优化网站已经不是秘密。其中图片合并减少HTTP请求由为被大家所看重，通过合并多个JS文件合并CSS样式文件外还有个减少HTTP请求的密技就是内联图片的使用。    什么是内联图片。    内联图片是一种新型的图像格式(在我看来是这样不知道理解对否),官方称为：data URI scheme。通常我们存储的图片在网页中需要写：而内联图片写法会是 <im

说起文件上传，撇开借助于flash插件或silverlight插件或各类浏览器自家插件的上传组件不说，我们来看看浏览器原生的： 早些年大多数人直接使用的浏览器的原生上传组件样式，但这样会导致不同浏览器下使用体验不一致，比如下图： 过了些时候，产品经理觉得太丑陋，各种浏览器体验不和谐，要求开发人员必须使得体验一致，于是有人就想方设法将的样式修改成绝对定位+ 透明+覆盖在按钮上 来

由于工作上需要一个灯箱插件，需要缩放图片与拖拽图片的功能，网上找遍了也没找着合适的，于是，自己动手，丰衣足食！ 代码已托管到github，童鞋们自己去下载，里面有demo使用样例，很容易使用，代码也没做混淆，兼容IE7+以及所有现代浏览器。 https://github.com/yanglang1987500/lightbox 如果大家觉得有惊喜，有被震撼到的话，还希望大家能在下方评论区

我们都知道，在CSS的盒模型中，当子容器设置了margin-top之后，父容器也会受到相应的影响，如下图所示 要解决这种情况，通常情况下我们会采用父容器的padding属性来替代子容器的margin属性。那么，有没有别的办法可以解决这个问题呢？ 答案是有的！ 我们发现此时的父容器并没有使用border属性或padding属性，可是当我们加上这两个属性中的某一个之后，上