CSS的隐藏function
我已经在关于PHP和XHTML的隐藏特性样式问题中明确地提出了一些有用的提示。
所以这里是一个覆盖CSS。 虽然容易拾起，但需要一点时间来了解一切，他们的默认行为，属性等
这里有一些开始球
@charset "UTF-8"; /* set the character set. must be first line as Gumbo points out in comments */ .element { /* takes precedence over other stylings */ display: block !important; /* mozilla .... rounded corners with no images */ -moz-border-radius: 10px; /* webkit equivalent */ -webkit-border-radius: 10px } 这些并不是很隐蔽 ，但它们的使用并不常见。 你用CSS发现了什么提示，技巧和难得的function？
您可以显示文档的title元素：
head, title { display: block; }
将多个样式/类应用到像这样的元素class="bold red GoldBg"
<html><head> <style> .bold {font-weight:bold} .red {color:red} .GoldBg {background-color:gold} </style> </head><body> <p class="bold red GoldBg">Foo.Bar(red)</p> </body></html>
我真的很喜欢CSS精灵。
而不是有20个图像为所有您的网站button和标志（因此20个http请求与周围的延迟），你只是使用一个图像，每次定位，所以只有你想要的位是可见的。
很难发布一个示例，因为您需要查看组件图像和展示位置CSS，但是我已经在此使用Google的博客： http : //www.stevefenton.co.uk/Content/Blog/Date/ 200905 /博客/谷歌用途-图像-精灵/
float父元素的事实将导致它扩大到包含所有的float子元素。
可能在相对定位元素中有 负边距和绝对定位元素 。
看看你怎么用CSS做这个？ 举些例子。
您可以通过指定right属性来为绝对定位的元素设置variables宽度。 这比简单地将width设置为百分比提供了更多的控制。
例如：
#myElement { position: absolute; left: 5px; right: 10px; }
另一个例子
#myElement{ /* fill up the whole space :) */ background: red; position:absolute; left: 0; right:0; top: 0; bottom: 0; }
看看Webkit的CSS转换，例如-webkit-transform: rotate(9deg);
我的是：
- 声音表的所有属性，如
azimuth，pitch… - 打印模块的一些属性，如
page-break-after: avoid; -
counter-increment: section 1; -
border-collapse: collapse; -
background-color: transparent; -
outline: 1px solid...
不是一个真正的function，但仍然有用：子select器在IE6以外的所有浏览器中都能正常工作，允许您在不使用黑客或条件样式表的情况下隔离IE6或使代码无效。 因此，以下代码中的链接将在IE6中为红色，在其他所有浏览器中为蓝色。
CSS
/*Red for IE6*/ .link {color:#F00;} /*Blue for everything else*/ #content>.link {color:#00F;}
HTML
<div id="content"> <a class="link" href="#">Link</a> </div>
这是一个select器列表 （用于CSS2）和一个浏览器兼容性图表 。
上周我遇到了一个我从未听说过的非常有用的CSS属性：
text-rendering: optimizeLegibility;
Safari，Chrome和Firefox都能理解这个属性，当设置启用高级字距和连字。 这是一个很棒的演示 。
IE6中的透明PNG此function修复了IE6中的PNG透明度。 将背景设置为非，并在filter中包含图像。 不需要任何JavaScript或HTC。
.whatever { background: none; /* Hide the current background image so you can replace it with the filter*/ width: 500px; /* Must specify width */ height: 176px; /* Must specify height */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png'); }
在元素之后设置分页行为 – 跨浏览器
table { page-break-after:always }
你可以总是使用属性，避免，自动，左，右，固有的。 阅读文档在http://www.w3schools.com/CSS/pr_print_pageba.asp
使用“第1部分”，“1.1”，“1.2”等编号部分和子部分的方法 – 跨浏览器
h2:before { counter-increment:subsection; content:counter(section) "." counter(subsection) " "; }
http://www.w3schools.com/CSS/pr_gen_counter-increment.asp
将表格边框折叠为单个边框或与标准HTML – 跨浏览器分离
table { border-collapse:collapse; }
http://www.w3schools.com/css/pr_tab_border-collapse.asp
从button或input字段中删除select边框或虚线。 有其他很好的用途 – 跨浏览器
button{ outline:0; }
http://www.w3schools.com/CSS/pr_outline.asp
*在IE6 100％身高的HTML
* html .move{ height:100%; }
允许长词分裂并包装到下一行 – CSS3跨浏览器
.whatever { word-wrap:break-word; }
http://www.w3schools.com/css3/css3_pr_word-wrap.asp
速记
之前
font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-family: serif
后
font: 1em/1.5em bold italic serif;
之前
background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left;
后
background: #fff url(image.gif) no-repeat top left;
之前
list-style: #fff; list-style-type: disc; list-style-position: outside; list-style-image: url(image.gif)
后
list-style: disc outside url(something.gif);
之前
margin-top: 2px; margin-right: 1px; margin-bottom: 3px; margin-left: 4px
后
margin:2px 1px 3px 4px; /*also works for padding*/ margin:0; /*You can also do this for all 0 borders*/ margin:2px 3px 5px; /* you can do this for top 2px, left/right 3px, bottom 5px and ;
通过使用CSS的溢出属性，您可以创build滚动区域而不诉诸框架。 例：
div.foo { border: 1px solid; width: 300px; height: 300px; overflow: auto; }
overflow: auto表示如果内容不能在div内，则会根据需要显示水平和/或垂直滚动条。
overflow: scroll意味着两个滚动条将始终存在。 如果您只想要一个滚动条总是存在，请使用overflow-x或overflow-y （现代浏览器和IE6支持）。
你们当中的一些人可能会想到“duuuh”，但是我很惊讶地发现，可以在没有框架的情况下创build滚动区域。
：之前和之后：伪元素
以下规则会在每个H1元素之前生成string“Chapter：”：
H1:before { content: "Chapter: "; display: inline; }
有关更多信息， 请参阅http://www.w3.org/TR/CSS2/generate.html
没有太多隐藏的function，但一个CSS提示的问题，每个开始的开发人员应该知道
内联块（浮动div的替代）：
.inline_block { display:-moz-inline-box; display:inline-block; }
不要将这个类应用于一个div！ 它不会工作！ 将其应用于跨度（或内联元素）
<span class="inline_block"> </span>
内联@media分配：
/* Styles.css */ .foo { ... bar ... } ... @media print{ .ads{display:none} }
这样你可以摆脱另一个HTTP请求。
我们可以将样式标签显示为块元素，并使用HTML5 contenteditable属性dynamic编辑CSS。 在这里演示。
<body> <style contenteditable> style { display: block; } body { background: #FEA; } </style> </body>
积分： CSS技巧
不是真的“隐藏”，但是理解盒子模型和定位模型将会有很大的帮助。
就像知道一个position: absolute元素相对于它的第一个parent： position: relative是position: relative 。
目前只适用于WebKit，但很有趣： CSSanimation
我从来没有想过，使用CSS“边界”属性，我可以做出不同形状的三angular形。 这里是链接去，
（编辑）以下链接不起作用了。 http://www.dinnermint.org/blog/css/creating-triangles-in-css/
从现在起，您可以尝试以下方法， http://jonrohan.me/guide/css/creating-triangles-in-css/
使用css可以轻松地完成文字换行，而不需要任何服务器端技术的帮助。
word-wrap: break-word;
另一个IE6select器
* html .something { color:red; }
修复随机IE6渲染错误 – 应用缩放：1，这将触发布局 。
跨浏览器（IE6 +，FF，Safari） float替代方法：
.inline-block { display: inline-block; display: -moz-inline-box; -moz-box-orient: vertical; vertical-align: top; zoom: 1; *display: inline; }
跨浏览器内联块使用组合声明在块和内联元素上工作：
.column { -moz-inline-box; -moz-box-orient:vertical; display:inline-block; vertical-align:top; }
对于包括Firefox 2在内的标准浏览器，以及：
.ie_lte7 .column { display:inline; }
我不知道这是不是一个隐藏的function，但我只是看到这个： http : //www.romancortes.com/blog/css-3d-meninas/
.class { /* red for chrome, ff, safari, opera */ background-color: red; /* green for IE6 */ .background-color: green; /* blue for IE7+ */ _background-color: blue; }
将在这些浏览器类别中呈现您的<whatever>背景不同
边界半径的东西是CSS3规范的一部分。 由于CSS3还没有完全完成，同时更先进的浏览器使用自己的属性（-moz，-webkit）来实现它的一部分。 所以我们已经可以享受圆angular，纯粹的CSS编码。
不幸的是，浏览器市场的另一个大玩家仍然没有看到实现css3function的迹象。
