CSS 的隐藏功能 [关闭]

Question

在有关 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 中发现了哪些提示、技巧和罕见功能？

Answer 1

您可以显示文档的title元素：

head, title {
    display: block;
}

Answer 2

将多个样式/类应用于此类元素，例如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>

Answer 3

我真的很喜欢 CSS 精灵。

而不是为您的所有站点按钮和徽标使用 20 个图像（因此 20 个 http 请求，每个请求都有延迟），您只需使用一个图像，并且每次都使用 position，因此只有您想要的位是可见的。

很难发布示例，因为您需要查看组件图像和位置 CSS - 但我已经在博客中发布了 Google 的使用方法： http://www.stevefenton.co.uk/Content/Blog/Date/ 200905/博客/Google-Uses-Image-Sprites/

Answer 4

float父元素的事实将导致它扩展以包含其所有float的子元素。

Answer 5

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

请参阅如何使用 CSS 执行此操作？ 举些例子。

Answer 6

您可以通过指定left和right属性来为绝对定位的元素设置可变宽度。 与简单地将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;
}

Answer 7

看看 Webkit CSS 转换，例如-webkit-transform: rotate(9deg);

Answer 8

上周我遇到了一个非常有用的 CSS 属性，我从未听说过：

text-rendering: optimizeLegibility;

Safari、Chrome 和 Firefox 都理解此属性，并在设置时启用高级字距调整和连字。 这是一个很棒的演示。

Answer 9

我的是：

• 听觉表的所有属性，如azimuth ， pitch ......
• 打印模块的一些属性，如page-break-after: avoid;
• counter-increment: section 1;
• border-collapse: collapse;
• background-color: transparent;
• outline: 1px solid...

Answer 10

不是一个真正的功能，但仍然有用：子选择器适用于除 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）和浏览器兼容性图表。

Answer 11

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
} 

您可以始终使用属性，避免、自动、左、右、固有。 阅读http://www.w3schools.com/CSS/pr_print_pageba.asp上的文档

一种使用“Section 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{
   outline:0;
}

http://www.w3schools.com/CSS/pr_outline.asp

* html 用于 IE6 中的 100% 高度

* 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 ;    

Answer 12

您可以使用 CSS 的溢出属性创建滚动区域，而无需借助框架。 例子：

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

overflow: auto表示如果内容无法容纳在 div 中，将根据需要显示水平和/或垂直滚动条。

overflow: scroll意味着两个滚动条都将始终存在。 如果您只希望始终存在一个滚动条，请使用overflow-x或overflow-y （现代浏览器和IE6 都支持）。

你们中的一些人可能在想“duuuh”，但我很惊讶地发现滚动区域可以在没有框架的情况下创建。

Answer 13

:before和:after伪元素

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

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

更多信息， http://www.w3.org/TR/CSS2/generate.html

Answer 14

内联@media 作业：

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

这样您就可以摆脱另一个 HTTP 请求。

Answer 15

我们可以将样式标签显示为块元素，并使用 HTML5 contenteditable属性动态编辑 CSS。 演示在这里。

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

       </style>
   </body>

学分： CSS-技巧

Answer 16

没有那么多隐藏的功能，而是一个包含CSS 提示的问题，每个初学者都应该知道

Answer 17

内联块（替代浮动 div）：

.inline_block
{
    display:-moz-inline-box;
    display:inline-block;
}  

不要将此 class 应用于 div！ 它行不通！ 将其应用于跨度（或内联元素）

<span class="inline_block">
</span>

Answer 18

我从来没有想过使用 css 'border' 属性我可以制作不同形状的三角形。 这是 go 的链接，

（编辑）以下链接不再起作用。 http://www.dinnermint.org/blog/css/creating-triangles-in-css/

从现在开始，您可以尝试以下方法， http://jonrohan.me/guide/css/creating-triangles-in-css/

Answer 19

不是真的“隐藏”，但了解盒子 model 和定位 model 将有很大帮助。

就像，知道position: absolute元素相对于其第一个父元素定位，该父元素使用position: relative样式设置。

Answer 20

目前仅适用于 WebKit 但非常有趣： CSS Animations

Answer 21

使用 css 可以轻松完成自动换行，无需任何服务器端技术的帮助。

word-wrap: break-word;

Answer 22

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

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

对于标准浏览器，包括 Firefox 2，以及：

.ie_lte7 .column { display:inline; } 

Answer 23

跨浏览器（IE6+、FF、Safari） float替代：

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

Answer 24

另一个 IE6 选择器

* html .something
{
  color:red;
}

修复随机 IE6 渲染错误 - 应用 zoom:1 将触发布局。

Answer 25

我不知道这是否是一个隐藏功能，但我只是惊叹于看到这个： http://www.romancortes.com/blog/css-3d-meninas/

Answer 26

.class {
/* red for chrome, ff, safari, opera */
background-color: red;
/* green for IE6 */
.background-color: green;
/* blue for IE7+ */
_background-color: blue;
}

将使您的 <whatever> 背景在这些浏览器类别中有所不同

Answer 27

边界半径的东西是 CSS3 规范的一部分。 由于 CSS3 还没有完全完成，因此更先进的浏览器同时使用自己的属性（-moz，-webkit）实现了其中的一部分。 所以我们已经可以享受圆角，用纯 css 干净编码。

不幸的是，浏览器市场上的另一个大玩家仍然没有表现出实现 css3 功能的迹象。