其实一直想写一点有关CSS的文章，奈何积累不够，使用的也只是表面，没有深入。个人感觉CSS没有JavaScript那么容易水，怎么说呢，JavaScript是编程语言，所以自己有了点什么感悟，或者总结，就可以写下来，先不管对错，就这样。CSS就不一样了，你用，我用，大家都用，谁用写出来效果都是那样，也没有什么语法，而且知识点又很杂，很乱，虽然属性很多，但是平时用到的也就是那么些。盒模型，BFC等等概念要真想深入了解，Render Tree什么的一大堆就来了，很气。所以说了这么多，我都不知道我在说什么。
就是水一下...
先说一个关于盒模型的吧。
盒模型其实有2种，大家应该都知道，一种是W3C搞出来的，一种是IE搞出来的。
首先，跟着感觉走，万恶的IE搞出来的，就没什么好的，对吧？无论现在开发什么，只要一听到IE就头疼...
W3C提出的盒模型是指，盒子的宽度,高度只包含content部分，也就是内容部分。什么意思呢，就是如果你给了一个box的style的width等于100px，那么，它的内容部分就是100px，然后加的padding，border都在100px之外，也就是说，你加的padding，border都会让这个box与其他box之间的距离变大（正常文档流，你要拿绝对定位来跟我怼，那没得聊）。
IE是怎么搞的盒模型呢？同样是一个box，被加了width等于100px,那它就真的是100px了，不是content是100px，而是content+padding+border是100px，什么意思呢，就是你加的padding，border无论多大，都不会改变这个box和其他box之间的距离，就是这么纯粹，padding，border影响的，只是box自己的content大小而已，这种打碎牙往自己肚子里咽的精神值得我们学习啊。
水了这么多，到底哪种好用呢？仁者见仁智者见智了，不过网上大多数人更加喜欢W3C盒子模型，但是我更喜欢IE，虽然是万恶的IE，至少在盒模型上我还是蛮喜欢，或者说更容易接受这种模型，（说句无关的话，IE还是有很多思想很优秀的，比如事件冒泡什么的，现在很少会有人用事件捕获吧...）。
下面说一下为什么我更加喜欢IE的盒子模型：
没有首先，直接说了，因为我很懒...额，真的是懒，而且计算能力也不好，单纯的加减乘除各种不好的那种。用IE的盒模型就很好用，为什么？不用怎么计算啊！比如我要用float，一排放3个box，我直接一个width等于33%，然后用nth-child之类的，加点margin0.5%就好啦，在box内部，加padding，border都是随便加啦，反正不会撑出去打乱布局是吧？但是如果是W3C的盒子模型，就要各种计算了，一不小心多了1px，布局就乱了。当然，你用flex布局，当我没说...
重点来了，虽然市面上默认都是W3C盒子模型，那么像我这种IE党，应该怎么做呢？很简单，只需要box-sizing:border-box，就可以变成IE的盒子模型。我一般是把它加在我的CSS reset里面...
再说一下关于background属性。
之前，在一个前端群里，有人提问，说，背景太长了，怎么让它看上去没有这么奇怪。首先，听到的第一反应是，简单嘛，直接一个background-size:100%，或者cover，contain，他说他都试过了，效果不太好，图片长是宽的2倍多，会被拉变形或者显示不完全。首先，调侃了一下UI提供的这张背景图，然后就开始想应该怎么办。我跟他说，要不你试试background-attachment:fixed?他试了之后，说，完美解决。好吧，这个属性也是我和一个朋友偶然间看腾讯的手机官网发现的，当时以为是div固定然后做的背景，后来看源码分析了一波，才知道还有background-attachment这种逆天的属性，CSS1就有了，但是不知道为什么普及度很低的样子。像我这种，懒，不愿意计算背景大小的时候，就用background-attachment:fixed，不仅简单，还让页面多了一种感觉。
在说一下，绝对定位。
不知道在哪里看到的，有人说绝对定位是魔鬼（evil）。
我刚学CSS的时候，可喜欢这个属性了，不知道怎么排版？绝对定位啊，一个元素怎么摆放都摆放不好，绝对定位啊......好吧，这种想法，让我埋下了不少的坑。
有个很典型的，绝对定位的子元素，高度不定，父元素想height:auto，让子元素撑起一片天，这是不可能的。都脱离文档流了，还撑什么天.....
还有一些恶习，比如，用了绝对定位，就一定要用相对定位把他包裹起来，然后left什么的，其实这都是没必要的，需要绝对定位+相对定位来处理的情况很少很少。
还有一些关于绝对定位的小技巧，不要用left等属性，而用margin-left等属性，为什么？因为使用绝对定位无非就是想让该元素脱离文档流，然后做一些‘高难度动作’，如果它的父元素全是static，那么它的left等一系列定位都是根据body，根据body啊，很难以控制和琢磨的有木有？所有很多人给它的父元素来一个相对定位，来管理它。但是，我说但是，如果我们不使用left等属性，而是用margin-left这种相对温柔一点的属性，它就还在掌握之中，依旧在射程之内。
所以，学会用position:absolute+margin，而不是position:absolute+position:relative。
说一下box-shadow
又爱又恨的一个属性，很厉害，很酷炫，和border-radius差不多，满足了广大前端工程师和UI设计师的很多需求。说句无关的,border-radius:50%和border-radius:100%一般情况下没差，为什么？有点复杂，一句话来说，就是浏览器不允许一个盒子的弧度过大而显得不和谐，为了让它和谐，最终就和谐成了一个圆....所以要做一个圆的话，border-radius:50%和border-radius:100%之间的任何一个百分比都能满足你。说回来，box-shadow也算是很厉害的一个属性了，还有text-shadow，但是它们刚出来的时候很少被人用，为什么？性能要求太高了，当时的浏览器很差劲的，渲染相当吃力，卡卡的，所以没人用。现在不一样了，浏览器都可以玩大型游戏了！性能杠杠的，所以这些属性就又复活了，或者说活跃了起来。box-shadow具体的属性值，我们就不介绍了，它有个相当酷炫的设定，那就是，可以有任意多组值。什么意思呢？无论多少组值，都是可以渲染出来的。理论上说，我们把每一组值当成一幅图的1px（本来图片就是1px1px堆叠出来的），box-shadow可以完美构成任意图！这不是我的异想天开，也不是什么黑科技，早就有类似的组件出现了...不过这样构图缺点很明显，构建一幅图的成本太高了，所以没有推广。其实用在一些小图标上还是很赞的，当然，小图标方面有SVG压着，自然没有出头之日了。
这些都不是重点！
关于box-shadow还有一些有点坑的地方。比如，如何构建一个三角形，带阴影的三角形..
构建三角形很简单，网上一大堆嘛。用border做的，但是，一旦加上了box-shadow，就原形毕露了...很气，纠结了很久，没办法，后来有人跟我说，你试试filter:drop-shadow，好吧，完美解决...
之后，我就看了一下filter:drop-shadow，发现和box-shadow差不多，其实差很多...filter:drop-shadow是真正的投影，透明的地方是没影子的，不透明的地方才投影，而box-shadow是盒子的投影，哎，其实看名字就应该明白这个道理了...还有一点，filter:drop-shadow只能投影一次，不能像box-shadow一样，无限叠加。
其实CSS的坑还是蛮多的，很多是因为自己掌握的不够全面，理解不够透彻，而且没办法及时的归纳总结。好吧，先说到这里，码了这么多字，我都不知道我在说些什么...
网友评论