CSS的隐藏特性[关闭]
Posted
技术标签:
【中文标题】CSS的隐藏特性[关闭]【英文标题】：Hidden features of CSS [closed] 【发布时间】：2010-10-12 07:41:24 【问题描述】：我确实在关于 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 中发现了哪些技巧、窍门和稀有特性？
【问题讨论】：
为什么不添加border-radius: 10px;对于支持 CSS3 的浏览器？ @Ólafur Waage：s/behaviour/behavior/ 是怎么回事？行为与行为一样正确，因为它是皇后区英语，所以更是如此。 @charset 规则必须在文件的第一行。 对于“隐藏功能”问题，接受的答案意味着什么？是不是最隐蔽的功能？ @X-Istence - ahem 女王的英语（注意撇号） 【参考方案1】：你可以显示文档的title元素：
head, title
display: block;
【讨论】：
这是独一无二的。我认为没有一个 元素是可渲染的。 奇怪的是，它也适用于 @Danko Durbić：当然，它们也只是 DOM 中的元素。 这是我非常喜欢的东西，.elbackground: red;position:absolute;top:0;left:0;right:0;bottom:0;【参考方案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>
【讨论】：
为什么我认为你只能用两个类来做到这一点..... 还要注意.bold.red 和.bold .red 之间的细微差别...
如果多个类具有冲突的属性（例如，如果 .red 和 .GoldBg 都指定了 color 属性），则适用 CSS 特异性规则； class="..." 属性中的类顺序无关紧要。
请注意 IE6 不支持多个类，并且只会应用最后一个类 - 在本例中为 GoldBg。
但如果可以的话，尽量避免命名像“.red”这样的类。有一天，客户希望所有的红色文本都变成蓝色，而现在您已经让所有必须接触该代码的开发人员感到困惑。【参考方案3】：
我真的很喜欢 CSS 精灵。
您只需使用一张图片，每次都将其定位，以便只有您想要的部分可见，而不是为您的所有网站按钮和徽标提供 20 个图像（因此需要 20 个 http 请求，每个请求都有延迟）。
很难发布示例，因为您需要查看组件图像和展示位置 CSS - 但我已经在博客中记录了 Google 对它的使用：http://www.stevefenton.co.uk/Content/Blog/Date/200905/Blog/Google-Uses-Image-Sprites/
【讨论】：
您还可以将精灵用于 javascript 控制的动画。只需循环通过 setInterval 等上的精灵。 来自 Matthew Lock 的好建议 - 该建议的好处是您只需更改图像的位置，而不是图像的来源 - 因此整个动画不需要预加载设置。 jQuery UI 在他们的框架图标主题中使用了这个jqueryui.com/themeroller 与其说是一种功能，不如说是一种设计模式。【参考方案4】：float父元素会导致它扩展以包含其所有floated 子元素。
【讨论】：
知道这个但非常方便。也不要忘记，如果这不是一个选项，你可以使用溢出属性而不诉诸丑陋的清除 div。 我不知道为什么每个人都使用带有 clear 的 div，我认为 br 是一个在语义上更相关的元素，我会认为带有 clear 的 br 不那么难看浮动一切，无论它是否需要它 @Matt 我相信使用overflow: hidden 更加语义化 - 为什么要引入一个仅用于修复布局的元素？【参考方案5】：
也许负边距和相对定位元素中的绝对定位元素。
有关示例，请参阅 How would YOU do this with CSS?。
【讨论】：
愿意解释一下吗？也请维基它【参考方案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;
【讨论】：
我不相信这在 IE 中有效。 我认为一直支持到 IE5.5 绝对位置永远不是灵活布局的首选。 并没有像您期望的那样工作；它也是地狱般的越野车。例如，IE6 会为之后的内容留下工件。 您可能需要将其放在relatively 定位的元素中。【参考方案7】：
看看 Webkit CSS Transformations，例如-webkit-transform: rotate(9deg);
【讨论】：
主流浏览器对这个有多少支持？ @Shawn：基于 WebKit 的浏览器（Safari + Chrome）、Firefox 3.1+（我认为）和 Opera 10.5。所以它非常普遍，除了 IE——一如既往。 :) 您可以使用专有的 IE“过滤器：”进行转换，就像以前对透明 PNG 所做的那样。虽然 IE 变换/旋转参数需要一些基本的三角函数计算。标准令人讨厌的“过滤器：”错误仍然适用。 啊哈哈哈，刚刚旋转了这个文本块！玩得很尽兴。打算写一个greasemonkey脚本来惹人。【参考方案8】：我的是：
像azimuth、pitch这样的听觉表的所有属性...
打印模块的一些属性，例如page-break-after: avoid;
counter-increment: section 1;
border-collapse: collapse;
background-color: transparent;
outline: 1px solid...
【讨论】：
【参考方案9】：不是一个真正的功能，但仍然有用：子选择器适用于除 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>
这是list of selectors（用于 CSS2）和browser compatibility chart。
【讨论】：
我很确定子选择器是一项功能。 =] 它们是一项功能，但您可以使用它们来隔离 IE6 的事实更像是一种技巧。【参考方案10】：上周我遇到了一个我从未听说过的非常有用的 CSS 属性：
text-rendering: optimizeLegibility;
Safari、Chrome 和 Firefox 都理解此属性，并在设置时启用高级字距调整和连字。这是一个很棒的demo。
【讨论】：
它让中文字符在某些浏览器/系统上看起来很糟糕 这是一个 SVG 属性，这些浏览器恰好支持 HTML 元素。【参考方案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
* IE6 中 100% 高度的 html
* html .move
height:100%;
允许长字换行到下一行 - CSS3 Cross browser
.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 ;
【讨论】：
outline: 0; 不要这样做！ outlinenone.com
每当我看到 w3schools 链接时，我都会畏缩【参考方案12】：
您可以使用 CSS 的溢出属性创建滚动区域，而无需借助框架。示例：
div.foo
border: 1px solid;
width: 300px;
height: 300px;
overflow: auto;
overflow: auto 表示如果内容不适合 div，将根据需要显示水平和/或垂直滚动条。
overflow: scroll 表示两个滚动条都将始终存在。如果您只想始终显示一个滚动条，请使用 overflow-x 或 overflow-y（现代浏览器和 IE6 都支持）。
你们中的一些人可能在想“duuuh”，但我惊讶地发现滚动区域可以在没有框架的情况下创建。
【讨论】：
当心，我最近发现 iPad（可能还有 iPhone 和 iPod）不支持此功能，我的意思是它不显示滚动条并切断您的内容。 ios，或者更准确地说，移动 Safari 支持这一点就好了。但是，他们不做的是显示滚动条。你必须用两个手指滚动。所以，并不总是直观的。不知道为什么苹果会做出这个决定。 @John iOS 5 之前的版本让你用两根手指滚动溢出：滚动内容，但你可以使用iScroll 4 来解决这个问题。然而，iOS 5 不需要该脚本，而是在本地完成所有这些。广告@m【参考方案13】：:before 和 :after 伪元素
以下规则会导致在每个 H1 元素之前生成字符串“Chapter:”：
H1:before
content: "Chapter: ";
display: inline;
更多信息，http://www.w3.org/TR/CSS2/generate.html
【讨论】：
【参考方案14】：与其说是隐藏的功能，不如说是一个以CSS tips which every beginning developer should know about为特色的问题
【讨论】：
【参考方案15】：内联块（浮动 div 的替代品）：
.inline_block
display:-moz-inline-box;
display:inline-block;
不要将这个类应用到 div！它不起作用！将其应用于跨度（或内联元素）
<span class="inline_block">
</span>
【讨论】：
IE6 只支持内联元素，对吗？ 不确定哪个浏览器支持或不支持 div，但这就是为什么我说它在 div 上不起作用！ 为什么不支持div？一个 div 是一个带有 display: 块的 span（但可能有浏览器或作者样式表的额外样式）。 你不知道浏览器对我们有什么好处吗？它不适用于具有块显示、在线内联元素的元素。 @strager 虽然你是对的，但不要低估 IE 对标准的实施（或缺乏）【参考方案16】：内联@media 分配：
/* Styles.css */
.foo ... bar ...
...
@media print
.adsdisplay:none
这样您就可以摆脱另一个 HTTP 请求。
【讨论】：
【参考方案17】：我们可以将样式标签显示为块元素并使用 HTML5 contenteditable 属性动态编辑 CSS。 Demo Here.
<body>
<style contenteditable>
style
display: block;
body
background: #FEA;
</style>
</body>
致谢：CSS-Tricks
【讨论】：
值得注意的是，这在 IE 中不起作用——参见：msdn.microsoft.com/en-us/library/ms537837(v=vs.85).aspx 我不会依赖它在任何地方工作。它是一种无效的 HTML，特别被黑客使用。【参考方案18】：并不是真正的“隐藏”，但了解盒子模型和定位模型会有很大帮助。
例如，知道position: absolute 元素的定位相对于其第一个父元素，该父元素的样式为position: relative。
【讨论】：
不，它是相对于最近的父级定位的，any 'position:' 不是默认值，'static' @Gareth - 几乎，“固定”也不算数 @annakata：你确定吗？我只是快速尝试了一下，绝对 div 位于它的父级内 - 一个固定的 div。我添加了另一个具有相同规格但没有父级的绝对 div（好吧，body 将是它的默认父级），并且它的位置与固定内部的不同 - 即它位于页面底部。所以我假设绝对内部固定的作品。【参考方案19】：目前仅适用于 WebKit 但很有趣：CSS Animations
【讨论】：
【参考方案20】：我从未想过使用 css 'border' 属性可以制作不同形状的三角形。这是链接，
（编辑） 以下链接不再起作用。 http://www.dinnermint.org/blog/css/creating-triangles-in-css/
从现在开始，您可以尝试以下方法， http://jonrohan.me/guide/css/creating-triangles-in-css/
【讨论】：
此链接已失效。 @GeorgeEdison：你是对的。我将尝试寻找替代来源来展示示例。【参考方案21】：使用 css 可以轻松完成自动换行，无需任何服务器端技术的帮助。
word-wrap: break-word;
【讨论】：
【参考方案22】：另一个 IE6 选择器
* html .something
color:red;
修复随机 IE6 渲染错误 - 应用 zoom:1 将触发 layout。
【讨论】：
注意缩放不会验证...如果这对您很重要，请尝试 height: 1% 或类似触发 hasLayout【参考方案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;
【讨论】：
这仅适用于 IE6/7 中默认内联的元素，对吗？ 在DIV上工作，这是一个块元素。【参考方案24】：跨浏览器内联块使用组合声明处理块和内联元素：
.column
-moz-inline-box; -moz-box-orient:vertical; display:inline-block; vertical-align:top;
适用于标准浏览器，包括 Firefox 2，并且：
.ie_lte7 .column display:inline;
【讨论】：
【参考方案25】：我不知道这是否是一个隐藏的功能，但我只是惊叹于看到这个： http://www.romancortes.com/blog/css-3d-meninas/
【讨论】：
【参考方案26】：.class
/* red for chrome, ff, safari, opera */
background-color: red;
/* green for IE6 */
.background-color: green;
/* blue for IE7+ */
_background-color: blue;
将使您的
【讨论】：
浏览器破解 aern't 功能？哦，好吧，还是有用的！ 最好使用条件注释quirksmode.org/css/condcom.html 为 IE6 和 IE7 添加单独的样式表，而不是依赖渲染引擎错误。 这是一个非常糟糕的做法。听@Tom ;) 浏览器黑客不是功能。它们是错误。 更好的是，使用 Paul Irish 的甜蜜方法：paulirish.com/2008/…【参考方案27】：border-radius 是 CSS3 规范的一部分。由于 CSS3 还没有完全完成，因此更先进的浏览器同时使用自己的属性（-moz、-webkit）实现了其中的一部分。所以我们已经可以享受圆角，用纯 css 干净编码。
不幸的是，浏览器市场上的另一个大玩家仍然没有实现 css3 功能的迹象。
【讨论】：
以上是关于CSS的隐藏特性[关闭]的主要内容，如果未能解决你的问题，请参考以下文章