Jeff Starr 发布了一条推文,其中分享了一个简单的技巧
如果您将一个内联元素浮动,它会被视为块级元素,因此无需在样式表中包含“display: block;”。
确实就是这样发生的。 规范
此属性的值具有以下含义。左:元素生成一个块级框……[关于浮动工作原理的实际内容]
浏览器正是这样实现的。以下是一个 LOLCSS 屏幕截图,以便更清楚地说明
这意味着您可以使用宽度和高度属性,并且元素会尊重它们。但这并不意味着元素会像非浮动块级元素那样自动扩展到其父元素的宽度。其宽度和高度将是您设置的值,或者如果您未设置,则会扩展以适应您在其内部放置的任何内容。
对于绝对定位的元素,它的工作原理完全相同。
了解这一点很有趣,感谢 Chris。
很不错,不过我不得不说,我有点失望地发现没有找到任何 LOLCSS 网站…… :(
我也立即在 Google 上搜索了 LOLCSS,同样感到失望。
不过这是一个不错的技巧!
明天……可能来自同一批带来 wtfjs.com 的人。呵呵
而且更好的是……该域名仍然可以购买。
我最多给它几天时间,从这篇文章发布开始,它就会出现……
(并在之后整齐地嵌套在我的阅读器中)
我刚刚检查了域名,Chris 已经注册了它 :-)
http://who.godaddy.com/WhoIs.aspx?domain=lolcss.com
哎呀,我再次这样做。
我曾短暂考虑过购买它……甚至把它放在我的购物车里。但老实说,我没有时间做任何事情……
很高兴有人会好好利用它……让我们免受网络上那些无用的东西的困扰
嗯,今天学到了新东西。不知道它在浮动时会自动将元素设为块级元素。如果我想让它像块级元素一样工作,我总是将其声明为块级元素。
不过常见的情况是,如果我浮动一个块级元素,我发现自己需要将其设置为内联元素以停止 IE6 的双边距错误。
不错的快速技巧!继续保持,Chris!
不错,感谢分享。
我们想要更多 LOLCSS 图片! :)
(是的,我也在 Google 上搜索过,同样感到失望)
你以前不知道这个吗?
http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
好吧,你妈妈不知道,所以我认为我会在这里发布它,让她了解一下最新情况。
我开玩笑的。
但说真的,我会在这里发布任何级别的技巧,只要我认为它有趣。
也许他妈妈确实知道?!
http://xkcd.com/341/
除了这个技巧之外(顺便说一句,谢谢),最好的事情就是快速浏览一下这个家伙被痛骂。Hristo——给你的妈妈写信道歉……
很棒的技巧——谢谢。
了解这一点真是太好了,Chris,再次感谢!
哇——很棒的技巧。我非常喜欢 Chrome 中的检查器显示计算样式的方式,包括浏览器规范/默认值。
我笑了。
我想看一篇关于 LOLCODE 的笑话文章。有一个 PHP 解析器可用,因此您可以使用它实际编写一个简单的 Web 应用程序。哈哈。
更好的是,这里有一个针对经典 IE6 的 hack 机会。当将元素向左浮动并在其上放置左外边距(或向右浮动并放置右外边距)时,IE6 会错误地将该外边距加倍。最简单的解决方法是浮动元素,但将其显示设置为内联。因为它被浮动,所以“display: inline”将被覆盖,但在此过程中,边距错误将得到修复。
是的,我已经使用了一段时间了。愚蠢的 IE6 总是需要随机修复。
这种行为还有另一个有用的功能。浮动元素默认情况下会根据其内容进行调整。因此,您实际上可以拥有行为类似于内联元素的块级元素。
关于内联元素的不错提示。谢谢。
兄弟,我想看看一些关于 CSS3 中 HSL 属性的教程。如果您能提供一些示例,那就太好了。
谢谢
Chris,继续保持!不错的快速技巧!
嗯,这太……我没想到会在 css-tricks.com 上看到这种非常非常基础的信息。
此外
您确实需要包含 *display:inline*,因为存在 IE 浮动双边距错误……至少,如果您在浮动元素上应用了边距。
您应该*始终*为浮动元素指定宽度
http://www.w3.org/TR/CSS2/visuren.html#floats
这很麻烦,但事实就是这样。不这样做可能会在某些浏览器中导致真正的问题。
所以您浮动的每个图像都应该有自己的类来设置宽度?您和我都知道这将非常愚蠢。Div 是不同的野兽。
Chris 在下面一针见血地指出了这一点。
@John,您是否费心阅读了您链接到的规范?在 CSS2 中,浮动元素需要具有宽度,但正如您的链接和同一规范的第 10.3.5 节所示,在 2.1 中进行了更改
如果“width”计算为“auto”(默认值),则使用值将是“缩放到适合”宽度。