要骂就骂的爽快---CSS篇
转自知乎
@Ivony
其实有这种感觉并不奇怪，因为你把CSS当作了一门程序设计语言一样的东西。
而事实上他只不过是一群醉汉拍脑袋胡乱发明出来的语焉不详的乱码的拼凑。
近年已经好太多了，早期的程序员甚至要通过调试了解浏览器会如何处理CSS并试图用这个玩意儿去控制浏览器的处理行为得到自己想要的结果。
这是一种极其高端的编程技巧，就像通过你的计算器的一些Bug写个游戏出来一样。
唯一的好消息是，CSS实现的Bug实在太多了，使得你真的可以用这些Bug来编写程序。反对所有认为CSS是一种正儿八经的编程语言的说法，CSS事实上是这样一种编程语言，其中占绝大多数的组成部分是UB（未定义的行为）。（至少在2.x之前的版本就是这样的）刚去W3C网站上去看了下，似乎CSS 2.x以前的版本都已经被美化或者删除了，如果你能找到原始的文档去看一下，你就会知道没搞懂这玩意儿怎么会造成各种奇怪的效果，压根儿不是你的错。
CSS这玩意儿完全就是搞排版的那群人弄出来的玩意儿，毋庸置疑的是，他们的思维模式和写程序的完全不一样。举个简单的栗子，作为程序员，当我们看到width的时候，我们会本能的询问，which width？是框的？内容的？实际展现的？设置的？包含填充的？父元素的？而对于CSS的设计者而言，他觉得width is just width，这是很显然的事情……有个好消息是，现在终于有程序员加入CSS工作组了。他们终于知道程序员要的是tell me behavior，而不是width is just width。还有很多人非要杠width的问题，这样吧，我直截了当的问你：
<table width="100px" cellspacing="0" border="1"><tbody><tr><td>a</td></tr></tbody></table>
<img width="100px" height="20px" border="1">
<div style="width: 100px"></div>
<table style="width: 100px; border: 1px;padding: 5px;" border="1"><tbody><tr><td>a</td></tr></tbody></table>
<img style="width: 100px; height: 20px; border: 1px;">
你能画出来这五个元素的正确的宽度吗？
不问清楚width到底是什么东西能达到我们想要的效果吗？
说CSS标准系统规范的，你能画出来下面这段HTML实际的显示样式吗？
<div style=" border: solid 1px;">
<span style="font-size: 20px">fptABC</span>
<span style="font-size: 40px">fptABC</span>
<span style="font-size: 80px">fptABC</span>
<img style="height: 50px; width: 50px; border: 1px; padding: 5px; margin: 5px;">
<span style="height: 50px; width: 50px; border: 1px; padding: 5px; margin: 50px; font-size: 40px;">fptABC</span>
</div>
多么简单的代码。所以，img的基线在哪里？span的又在哪里？margin会不会冲出外框？下一行的元素又怎么对齐？
你说这是个描述性语言，好啊，你告诉我这样描述出来的玩意儿唯一的符合标准的行为是什么？
我们要的是唯一确定的行为，不是TMD什么TMD描述。
另一个可以体现CSS设计狗血的地方在于默认样式。我们知道事实上HTML元素都有自己的默认样式行为，在没有任何CSS样式设置的时候，他们就会呈现出这种默认样式行为。但是，在漫长的时间里面，CSS压根儿就没有覆盖这些原本就有的默认样式行为。这就带来了大量的面向行为编程，例如table布局。并不是程序员喜欢用table来布局，而是table的默认样式行为（制造一个可以垂直居中的盒子）压根儿没有办法用CSS来表示（直到flexible box的加入）。为了达到这样的效果，我们不得不搞一个table来控制浏览器的行为……
就拿评论中的最常见的垂直居中的问题来说吧，在CSS里面我们怎么让一个块元素在页面居中呢？
我们得写成这样：
<body style="display: flex; height: 100vh; box-sizing: border-box; margin: 0px; align-items: center; justify-content: center;">
<div>
</div>
</body>
这么多样式到底是干啥的？
一个个来解释：box-sizing: border-box，用于定义后面设置的的高度为边框盒子高度而不是匪夷所思的内容高度，这几乎是布局所必需的。
margin: 0px，因为margin在边框盒子外面，所以还得把这个干掉。
height: 100vh，这三个属性加一起才能真正实现body元素的外框高度与浏览器视窗的高度一致。
display: flex，用于把body变成一个用于布局的弹性盒子
align-items: center，垂直居中
justify-content: center，水平居中
事实上我们用了三个属性才完成了这一件创举，让我们的body的高度与浏览器视窗的高度一致，这就是CSS设计者的脑回路。
再用了三个属性才使得我们的内容在水平和垂直两个方向都居中。
更别提这里面的box-sizing、flex和vh单位都是HTML5之后才出现的。说白了，整个flex体系都是微软和谷歌的程序员介入后才真正搞出来的。
在没有这些东西之前，唯一的方法就是做个table，然后那些大师们还叫嚣着，不要用table，用盒子，用盒子……
在没有flex和grid之前，盒你!@&^&!……
浙公网安备 33010602011771号