Tag: CSS
-
display:inline、block、inline-block 的区别
display:block 就是将元素显示为块级元素. block 元素的特点是： 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的 100%，除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li > 是块元素的例子。 display:inline 就是将元素显示为行内元素. inline 元素的特点是： 和其他元素都在一行上； 高，行高及顶和底边距不可改变； 宽度就是它的文字或图片的宽度，不可改变。 <span>, <a>, <label>, <input>, <img>, <strong> 和 < em > 是 inline 元素的例子。 inline 和 block 可以控制一个元素的行宽高等特性，需要切换的情况如下： 让一个 inline 元素从新行开始； 让块元素和其他元素保持在一行上； 控制 inline 元素的宽度（对导航条特别有用）； 控制 inline 元素的高度； 无须设定宽度即可为一个块元素设定与文字同宽的背景色。 display:inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 inline-block 的元素特点： 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性) 并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari 在 IE 中对内联元素使用 display:inline-block，IE 是不识别的，但使用 display:inline-block 在 IE 下会触发…
-
为什么会有 psd 转 css？其优点和缺点？
根本原因在于：psd 文件比 png 图片文件更能转成 html psd 文件具有详细的图层信息，这些都非常方便的转化成对应样式的 html 文件。可以这样说，只要有 psd，就能方便的转化为 html 文件。 基本上会用 photoshop 的人非常多，用其他的设计工具，如 Sketch 和 Axure 都可以做出类似的设计，但是都比不上 photoshop 对位图强大的处理能力。 psd 转 html 的关键所在，还是你的 css 水平，因为现在都非常强调能 “用 css 的地方，就不要使用图片”。 psd 转 html 的最终问题还是 css 的水平。 直接使用 PS 里的图层 css 样式拷贝出来的代码不完整，比如圆角写法应该要写成完整的， -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; 通过软件 copy 出来的就只是 border-radius: 2px; …
-
.clear 万能清除浮动
还有一种是 这个是优化版的清除浮动的样式，很值得推荐。 使用方法：通过在页面中添加 <div class=”clear”></div> 或 <span class=”clear”> </span > 来清除页面中的浮动。
-
懒惰（但聪明地）载入内容
看了下面这一行的 jQuery 代码，明白动态地加载是怎么样做的。 还有进步的空间，可以将图像设定成只显示于指定屏幕，令脚本取决于分辨率。再如，若要限制脚本在小屏上加载，可在脚本上加入简单的分辨率测试。 在 JavaScript 里，开头的 if 陈述等同于媒体查询的 min-width:480px，若屏幕窄于 480px，内附的 JavaScript 就不会失效了。 这个方法还可以精炼。例如，可用轻型的 JavaScript 载入器 LabJS（http://labjs.com）或者 HeadJS（http://headjs.com）, 动态地加载 jQuery、走马灯插件和 custom.js。或者，可以在分辨率高于某个数值时才载入 JavaScript。