CSS 此图没看懂求解释

html-css026

CSS 此图没看懂求解释,第1张

我只是猜测,不一定对,单词 Awesome 的意思是:使人畏惧的;极好的;令人敬畏的;可怕的;

按字面上的理解就是:

1.css 是使人畏惧的;

2.css 是极好的;

3.css 是令人敬畏的;

4.css 是可怕的;

我觉得根据这个图,这里想表达的意思估计是第2条:css 是极好的;

因为外面有个框框,这个暗示了一个区块套住文字,当这个区块有一个固定的宽度时,按照“正常”的方式 AWESOME 这个词的宽度超过了外面区块宽度,因此 OME 应该被自动打断后换到下一行,并把区块的高度撑高一行,而这里并没有。

所以我觉得这里是在反讽 css 有无数可怕的细节要处理。

----------------------------------

PS:

我很好奇的百度了这句英文,老外有卖这个杯子的,原来是专门卖给网页设计师的:

About the product:

关于产品:

Clever design for the web designer's inside joke!

对于网页设计师的内部笑话巧妙的设计!

CSS IS AWESOME

Your web developers will overflow their box model when they see you sporting this hilarious new t-shirt! Then they'll go back to using tables.

大意是:CSS是可怕的,您的Web开发人员会遇到溢出边界(暗示遇到各类纠缠不清的细节),当他们看到你的这新T恤(估计还有这个样式的衣服卖)!他们会重新使用表格来制作web页面。

内涵笑话,意思就是懂这个语言的人才看得懂的笑话(其实没什么笑点,老外体内内置的幽默系统跟我们不大一样,也许他们觉得好笑)

我搜索到了一系列杯子,还有c#、java之类的很多编程语言的杯子,也是这种形式讽刺这些语言里面经常被人抱怨的问题,要会这个语言的人才懂。

其实这个css笑话并不怎么样,因为连续的英文或数字超过宽度不断行,表格也存在同样的问题,都需要处理,严格的说这个溢出问题不是css的错。

1.我们以谷歌浏览器为例,来讲讲怎么调试CSS。先打开谷歌浏览器,看截图里的红色箭头,点击“工具”,点击“开发者工具”,就打开调试工具了,也可以按下快捷键F12来打开调试工具;

2.打开的调试工具如下图所示:

3.我们就以百度的首页为例,看看调试效果。看截图,点击那个“抓取元素”的按钮,来获取要审查的元素;

4.看截图,出现下面的界面后,点击“style”,单击那个对勾,就可以看到效果了;

5.我去掉一些样式之后,就出现了下面的效果,看截图;

css中的zoom的作用\x0d\x0a1、检查页面的标签是否闭合\x0d\x0a不要小看这条,也许折腾了你两天都没有解决的 CSS BUG 问题,却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的,而他们很容易犯此类问题。\x0d\x0a快捷提示:可以用 Dreamweaver 打开文件检查,一般没有闭合的标签,会黄色背景高亮。\x0d\x0a\x0d\x0a2、样式排除法\x0d\x0a有些复杂的页面也许加载了 N 个外链 CSS 文件,那么逐个删除 CSS 文件,找到 BUG 触发的具体 CSS 文件,缩小锁定的范围。\x0d\x0a\x0d\x0a对于刚才锁定的问题 CSS 样式文件,逐行删除具体的样式定义,定位到具体的触发样式定义,甚至是具体的触发样式属性。\x0d\x0a\x0d\x0a3、模块确认法\x0d\x0a有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块,寻找到触发问题的 HTML 模块。\x0d\x0a\x0d\x0a4、检查是否清除浮动\x0d\x0a其实有不少的 CSS BUG 问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的,推荐使用 无额外 HTML 标签的清除浮动的方法(尽量避免使用 overflow:hiddenzoom:1 的类似方法来清除浮动,会有太多的限制性)。\x0d\x0a\x0d\x0a5、检查 IE 下是否触发 haslayout\x0d\x0a很多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的 《On having layout》(如果无法翻越穿越伟大的 GFW,可阅读 蓝色上的转帖 )\x0d\x0a快捷提示:如果触发了 haslayout,IE 的调试工具 IE Developer Toolbar 中的属性中将会显示 haslayout 值为 -1。\x0d\x0a\x0d\x0a6、边框背景调试法\x0d\x0a故名思议就是给元素设置显眼的边框或者背景(一般黑色或红色),进行调试。此方法是最常用的调试 CSS BUG 的方法之一,对于复杂 BUG 依旧适用。经济实惠还环保^^\x0d\x0a最后想强调一点的是,养成良好的书写习惯,减少额外标签,尽量语义,符合标准,其实可以为我们减少很多额外的复杂 CSS BUG,更多的时候其实是我们自己给自己制造了麻烦。希望你远离 BUG ,生活越来越美好