按字面上的理解就是:
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的错。
flex布局是一种无论对于块级元素还是行内元素都可以被采用的布局,且它使用起来也是十分的方便
首先是要指定flex布局
当我们指定flex布局方式的时候,其属性值 float、clear、vertical-align就失效了
无论是块级元素还是行内元素,当他们指定使用flex布局的时候,就被称为“ 容器 ”(flex container)
他们的子元素自动成为容器成员,被称为“ 项目 ”(flex item)。
flex布局是通过两根轴决定的,其实现方式其实和直角坐标系很像,都是通过轴来进行定位
每个容器都有两根轴,分别为水平的 主轴 (main axis)和垂直的 交叉轴 (cross axis)。主轴开始位置为main start,结束位置为main end。交叉轴的开始位置为cross start,结束位置为cross end
容器内的项目都是沿着主轴排列的,这点和块级元素有较大的不同,因为每个块级元素默认是占有一整行的,且排列方式为由上到下排列。
每个项目都占有一定的主轴空间和交叉轴空间,分别被称为main size和cross size
flex布局下,容器和项目都有其各自的属性
决定主轴的方向,即决定项目的排列方向,其属性值有
决定了当一行放不下所有的项目时,其换行与否以及换行方式
定义了项目在主轴上的对齐方式,假设主轴是从左向右的水平排列
定义了项目在交叉轴上的对齐方式,假设交叉轴是从上到下排列
在这里重点说一下上面这两个属性。
这样可以很方便的设置水平垂直居中
另外说一下align-items:baseline这个属性值。如描述,这个属性值是通过文字来进行对齐,而不是每个项目的边界或是中心
在容器内具有多根主轴线时,可以定义这些轴线的对齐方式
align-content属性和justify-content属性,这两者的属性值有较大的相似之处,这是因为,justify-content属性定义的是多个项目在主轴上的对齐方式,而align-content属性定义的是多根主轴在交叉轴上的对齐方式,这两者描述的对象就几乎一致
定义了多个项目的排列顺序,其使用方式和z-index属性值有异曲同工之处,都是指定属性值,属性值为整数。对于order属性,属性值越小,则排列越靠前;对于z-index属性,则属性值越小,就越在底层
设置了项目的放大比例,其默认值为1。
设置了项目的缩小比例,默认值为1。
在分配多余空间之前,为项目定义其占据的主轴空间
用来设置单个项目与其他项目不同的对齐方式,其属性值和align-items的属性的属性值基本一致,不过其默认值为auto,表示继承父元素的属性值。