css中的负边距(negative margin)是布局中的一个常用技巧，只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距，所以掌握它的用法对于前端的同学来说，那是必须的。本文非常基础，老鸟可以略过。
负边距在普通文档流中的作用和效果
那些没有脱离文档流的元素（指不是浮动元素也不是绝对定位、固定定位的元素等），其在页面中的位置是跟随者文档流的变化而变化的。看下面这幅图：
负边距对这些由文档流控制的元素的作用是，会使它们在文档流中的位置发生偏移，但这种偏移不同于相对定位，通过相对定位偏移......
网上的一些处理方法，很值得参考：
一般的文字截断（适用于内联与块）：
.text-overflow {
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(…) ；需与overflow:hidden;一起使用。*/
}
对于表格文字溢出的定义：
table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
width:......
一、打开浏览器的 Custom.css 文件
本文以 Chrome 为例（CSS 修改后立即生效），进入同事或朋友的电脑，按下面方式打开 Custom.css 文件
Mac：~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
Windows XP：系统盘:\Documents and Settings\用户名\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css（其他 Windows 系统类似，在个人账号中的找“应用数据” AppData……）
Ubuntu (Chromium)：~/.config/chromium/Default/User StyleSheets/Custom.css
......
01. Joefrey Mahusay
很炫的单页网站模板，基于 HTML5 & CSS3 制作，适合用于设计师个人简历、摄影师和平面设计师的个人作品展示。
演示 下载
02. Folder
Folder是一款响应式 HTML5 网站模板，能够自适应各种设备和浏览器尺寸。适合用于创意展示和企业网站项目。
演示 下载
03. Web lab
这款 HTML5 & CSS3 免费网站模板适合范围很广，特别适合用于企业网站、设计和开发的相关网站等等。
演示 下载
04. Left
Left 这款模板是左右两列布局的模式，内置幻灯片和弹出框功能，还有效果精美的二级导航菜单。
演示 下载
05......
作者: owoer
|
发表于:2012年12月7日
|
栏目:前端资源
|
推荐12款非常精致的免费 HTML5 & CSS3 网站模板已关闭评论
阅读全文
如何使用css在不修改图片源的前提下装饰你的图片画廊。这里用到的技巧也很简单，就是在图片之前创建一个<span>，并在span上使用background-image生成一个遮罩的效果。这种方式既简单又灵活，demo中介绍了20多种样式，大家可以参看。
这种css技巧带来的好处
节约时间 — 你不需要在photoshop中创建图片模板，然后为每张图片生成独立文件。
保留原始图片源 — 我们不用担心日后需要更换图片主题的时候，没有原图片。因为我们根本没有修改他。
相当的灵活 — 你只需要调整css就能换一个完全不同的样式。
在任何站点都能工作 — ......