CSS 此图没看懂求解释

html-css021

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的错。

你的html中只要有匹配这个选择器的dom结构就会自动出现有这个图片的。不过你这个css选择器太复杂了，需要类似下面这个结构才能匹配（为了简便，这里都是用的div标签，实际情况可能会很复杂）：

<div class="public_nav_v3">

<div class="info_wrap">

<div class="info">

<div class="right">

<div class="login_box">

<div class="r_pic">

<div class="avatar_wrap">

<div class="frame frame_1">

......在最里面的这个div里就会出现那个图片了，当然这里很可能还要设定width、height等属性才行，总之就是这么个意思......

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

这个难以言表，主要原因：

1.

浏览器自身问题，浏览器对图片的渲染解析不行

2.

网速过慢，触发小图片加载

3.

CSS解析不够

4.

页面不支持

5.

浏览器完美不支持

既然如此，那就干脆background图片或者是元素里面内联width="43%"算了