CSS的隐藏特性

在关于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中发现了哪些技巧、窍门和稀有功能？

没有那么多隐藏功能，但是一个问题的特点是

对父元素进行

float

运算会导致父元素展开以包含其所有

float

ed子元素。

可能是相对定位元素中的负边距和绝对定位元素

参见示例。

并非真正的“隐藏”，但了解盒子模型和定位模型将非常有帮助

---

例如，知道一个

位置：绝对
元素相对于其第一个父元素（使用
位置：相对
样式）进行定位，边界半径填充是CSS3规范的一部分。由于CSS3还没有完全完成，更先进的浏览器同时使用自己的属性（-moz，-webkit）实现了其中的一部分。因此，我们已经可以享受圆角，干净地用纯css编码

不幸的是，浏览器市场上的另一个大玩家仍然没有实现css3功能的迹象。
内联块（浮动div的替代品）：

不要将此类应用于div它不会工作的！将其应用于范围（或内联元素）

目前仅适用于WebKit，但非常有趣：
我的是：


听力表的所有属性，如
方位角
，
音高
打印模块的一些属性，如
分页后：避免

计数器增量：第1节

边框塌陷：塌陷

背景色：透明

轮廓：1px实心…
虽然不是真正的功能，但仍然很有用：子选择器适用于除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>



这是一个（用于CSS2）和另一个IE6选择器

* html .something
{
  color:red;
}

修复随机IE6渲染错误-应用zoom:1将触发
 将多个样式/类应用于这样的元素
class=“bold red GoldBg”


.bold{font-weight:bold}
.red{color:red}
.GoldBg{背景色：金色}
食物条（红色）

我非常喜欢CSS精灵

您不需要为所有站点按钮和徽标设置20个图像（因此需要20个http请求，每个请求都有延迟），而只需要使用一个图像，每次定位它，以便只显示您想要的位

很难发布一个示例，因为您需要查看组件图像和放置CSS，但我在这里写了Google对它的使用：
您可以通过指定
left
和
right
属性来设置绝对定位元素的可变宽度。这比简单地将
宽度设置为百分比提供了更多的控制

例如：

#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;
}

跨浏览器内联块使用组合声明处理块和内联元素：

.column { 
-moz-inline-box; -moz-box-orient:vertical; display:inline-block; vertical-align:top; 
} 

适用于标准浏览器，包括Firefox 2和：

.ie_lte7 .column { display:inline; } 

将在这些浏览器类别中呈现不同的背景
查看Webkit CSS转换，例如
-Webkit转换：旋转（9度）

跨浏览器（IE6+、FF、Safari）
float
备选方案：

.inline-block {
    display: inline-block;
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    vertical-align: top;
    zoom: 1;
    *display: inline; }

我不知道这是否是一个隐藏的功能，但我只是惊讶地看到：
您可以显示文档的
标题
元素：

head, title {
    display: block;
}

使用css可以轻松完成单词包装，而无需任何服务器端技术的帮助

word-wrap: break-word;

您可以使用CSS的overflow属性创建滚动区域，而无需使用框架。例如：

div.foo {
    border:   1px solid;
    width:    300px;
    height:   300px;
    overflow: auto;
}

overflow:auto
表示如果内容无法放入div，则会根据需要显示水平和/或垂直滚动条

overflow:scroll
表示两个滚动条始终存在。如果您只希望始终显示一个滚动条，请使用
overflow-x
或
overflow-y
（现代浏览器和IE6支持这两种方式）

你们中的一些人可能会想“duuuh”，但我惊讶地发现，滚动区域可以在没有框架的情况下创建。
上周，我遇到了一个我从未听说过的非常有用的CSS属性：

text-rendering: optimizeLegibility;

Safari、Chrome和Firefox都理解这个属性，设置后可以启用高级内核和连字。这里有一个很好的方法。
内联@媒体分配：

/* Styles.css */
.foo { ... bar ... }
...
@media print{
    .ads{display:none}
}

这样您就可以摆脱另一个HTTP请求。
我从未想过使用css的“border”属性可以生成不同形状的三角形。这是要去的链接

（编辑）
以下链接不再起作用。

从现在起，您可以尝试以下方法，
伪元素之前的：和之后的

以下规则导致在每个H1元素之前生成字符串“Chapter:”：

H1:before { 
  content: "Chapter: ";
  display: inline;
}

更多信息，请参见IE6中的透明PNG
这修复了IE6中PNG的透明度。将“背景”设置为“非”，并将图像包括在过滤器中。不需要任何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
} 

h2:before 
{
   counter-increment:subsection;
   content:counter(section) "." counter(subsection) " ";
}

table
{
   border-collapse:collapse;
}

button{
   outline:0;
}

.whatever {
   word-wrap:break-word;
}

您可以始终使用属性、避免、自动、左、右、固有。阅读文档

使用“Section 1”、“1.1”、“1”对章节和子章节进行编号的方法
h2:before 
{
   counter-increment:subsection;
   content:counter(section) "." counter(subsection) " ";
}

table
{
   border-collapse:collapse;
}

button{
   outline:0;
}

* html .move{
   height:100%;
}

.whatever {
   word-wrap:break-word;
}

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 ;    

   <body>
       <style contenteditable>
           style {
            display: block;
           }
           body {
            background: #FEA;
           }

       </style>
   </body>