其實(shí)一直想寫一點(diǎn)有關(guān)CSS的文章埃跷，奈何積累不夠蕊玷，使用的也只是表面，沒有深入弥雹。個(gè)人感覺CSS沒有JavaScript那么容易水垃帅，怎么說呢，JavaScript是編程語言剪勿，所以自己有了點(diǎn)什么感悟贸诚，或者總結(jié)，就可以寫下來，先不管對錯(cuò)酱固，就這樣械念。CSS就不一樣了，你用运悲，我用龄减，大家都用，誰用寫出來效果都是那樣班眯，也沒有什么語法希停，而且知識點(diǎn)又很雜，很亂署隘，雖然屬性很多宠能，但是平時(shí)用到的也就是那么些。盒模型磁餐，BFC等等概念要真想深入了解违崇，Render Tree什么的一大堆就來了，很氣诊霹。所以說了這么多亦歉，我都不知道我在說什么。
就是水一下...
先說一個(gè)關(guān)于盒模型的吧畅哑。
盒模型其實(shí)有2種，大家應(yīng)該都知道水由，一種是W3C搞出來的荠呐，一種是IE搞出來的。
首先砂客，跟著感覺走泥张，萬惡的IE搞出來的，就沒什么好的鞠值，對吧媚创？無論現(xiàn)在開發(fā)什么，只要一聽到IE就頭疼...
W3C提出的盒模型是指彤恶，盒子的寬度,高度只包含content部分钞钙，也就是內(nèi)容部分。什么意思呢声离，就是如果你給了一個(gè)box的style的width等于100px芒炼，那么，它的內(nèi)容部分就是100px术徊，然后加的padding本刽，border都在100px之外，也就是說，你加的padding子寓，border都會(huì)讓這個(gè)box與其他box之間的距離變大（正常文檔流暗挑，你要拿絕對定位來跟我懟，那沒得聊）斜友。
IE是怎么搞的盒模型呢炸裆？同樣是一個(gè)box，被加了width等于100px,那它就真的是100px了蝙寨，不是content是100px晒衩，而是content+padding+border是100px，什么意思呢墙歪，就是你加的padding听系，border無論多大，都不會(huì)改變這個(gè)box和其他box之間的距離虹菲，就是這么純粹靠胜，padding，border影響的毕源，只是box自己的content大小而已浪漠，這種打碎牙往自己肚子里咽的精神值得我們學(xué)習(xí)啊。
水了這么多霎褐，到底哪種好用呢址愿？仁者見仁智者見智了，不過網(wǎng)上大多數(shù)人更加喜歡W3C盒子模型冻璃，但是我更喜歡IE响谓，雖然是萬惡的IE，至少在盒模型上我還是蠻喜歡省艳，或者說更容易接受這種模型娘纷，（說句無關(guān)的話，IE還是有很多思想很優(yōu)秀的跋炕，比如事件冒泡什么的赖晶，現(xiàn)在很少會(huì)有人用事件捕獲吧...）。
下面說一下為什么我更加喜歡IE的盒子模型：
沒有首先辐烂，直接說了遏插，因?yàn)槲液軕?..額，真的是懶棉圈，而且計(jì)算能力也不好涩堤，單純的加減乘除各種不好的那種。用IE的盒模型就很好用分瘾，為什么胎围？不用怎么計(jì)算坝跸怠！比如我要用float白魂，一排放3個(gè)box汽纤，我直接一個(gè)width等于33%，然后用nth-child之類的福荸，加點(diǎn)margin0.5%就好啦蕴坪，在box內(nèi)部，加padding敬锐，border都是隨便加啦背传，反正不會(huì)撐出去打亂布局是吧？但是如果是W3C的盒子模型台夺，就要各種計(jì)算了径玖，一不小心多了1px，布局就亂了颤介。當(dāng)然梳星，你用flex布局，當(dāng)我沒說...
重點(diǎn)來了滚朵，雖然市面上默認(rèn)都是W3C盒子模型冤灾，那么像我這種IE黨，應(yīng)該怎么做呢辕近？很簡單韵吨，只需要box-sizing:border-box，就可以變成IE的盒子模型移宅。我一般是把它加在我的CSS reset里面...
再說一下關(guān)于background屬性学赛。
之前，在一個(gè)前端群里吞杭，有人提問，說变丧，背景太長了芽狗，怎么讓它看上去沒有這么奇怪。首先痒蓬，聽到的第一反應(yīng)是童擎，簡單嘛，直接一個(gè)background-size:100%攻晒，或者cover顾复，contain，他說他都試過了鲁捏，效果不太好芯砸，圖片長是寬的2倍多，會(huì)被拉變形或者顯示不完全。首先假丧，調(diào)侃了一下UI提供的這張背景圖双揪，然后就開始想應(yīng)該怎么辦。我跟他說包帚，要不你試試background-attachment:fixed?他試了之后渔期，說，完美解決渴邦。好吧疯趟，這個(gè)屬性也是我和一個(gè)朋友偶然間看騰訊的手機(jī)官網(wǎng)發(fā)現(xiàn)的，當(dāng)時(shí)以為是div固定然后做的背景谋梭，后來看源碼分析了一波信峻，才知道還有background-attachment這種逆天的屬性，CSS1就有了章蚣，但是不知道為什么普及度很低的樣子站欺。像我這種，懶纤垂，不愿意計(jì)算背景大小的時(shí)候矾策，就用background-attachment:fixed，不僅簡單峭沦，還讓頁面多了一種感覺贾虽。
在說一下，絕對定位吼鱼。
不知道在哪里看到的蓬豁，有人說絕對定位是魔鬼（evil）。
我剛學(xué)CSS的時(shí)候菇肃，可喜歡這個(gè)屬性了地粪，不知道怎么排版？絕對定位啊琐谤，一個(gè)元素怎么擺放都擺放不好蟆技，絕對定位啊......好吧，這種想法斗忌，讓我埋下了不少的坑质礼。
有個(gè)很典型的，絕對定位的子元素织阳，高度不定眶蕉，父元素想height:auto，讓子元素?fù)纹鹨黄爝蠖悖@是不可能的造挽。都脫離文檔流了碱璃，還撐什么天.....
還有一些惡習(xí)，比如刽宪，用了絕對定位厘贼，就一定要用相對定位把他包裹起來，然后left什么的圣拄，其實(shí)這都是沒必要的嘴秸，需要絕對定位+相對定位來處理的情況很少很少。
還有一些關(guān)于絕對定位的小技巧庇谆，不要用left等屬性岳掐，而用margin-left等屬性，為什么饭耳？因?yàn)槭褂媒^對定位無非就是想讓該元素脫離文檔流串述，然后做一些‘高難度動(dòng)作’，如果它的父元素全是static寞肖，那么它的left等一系列定位都是根據(jù)body纲酗，根據(jù)body啊，很難以控制和琢磨的有木有新蟆？所有很多人給它的父元素來一個(gè)相對定位觅赊，來管理它。但是琼稻，我說但是吮螺，如果我們不使用left等屬性，而是用margin-left這種相對溫柔一點(diǎn)的屬性帕翻，它就還在掌握之中鸠补，依舊在射程之內(nèi)。
所以嘀掸，學(xué)會(huì)用position:absolute+margin紫岩，而不是position:absolute+position:relative。
說一下box-shadow
又愛又恨的一個(gè)屬性睬塌，很厲害被因，很酷炫，和border-radius差不多衫仑，滿足了廣大前端工程師和UI設(shè)計(jì)師的很多需求。說句無關(guān)的,border-radius:50%和border-radius:100%一般情況下沒差堕花，為什么文狱？有點(diǎn)復(fù)雜，一句話來說缘挽，就是瀏覽器不允許一個(gè)盒子的弧度過大而顯得不和諧瞄崇，為了讓它和諧呻粹，最終就和諧成了一個(gè)圓....所以要做一個(gè)圓的話，border-radius:50%和border-radius:100%之間的任何一個(gè)百分比都能滿足你苏研。說回來等浊，box-shadow也算是很厲害的一個(gè)屬性了，還有text-shadow摹蘑，但是它們剛出來的時(shí)候很少被人用筹燕，為什么？性能要求太高了衅鹿，當(dāng)時(shí)的瀏覽器很差勁的撒踪，渲染相當(dāng)吃力，卡卡的大渤，所以沒人用≈仆現(xiàn)在不一樣了，瀏覽器都可以玩大型游戲了泵三！性能杠杠的耕捞，所以這些屬性就又復(fù)活了，或者說活躍了起來烫幕。box-shadow具體的屬性值俺抽，我們就不介紹了，它有個(gè)相當(dāng)酷炫的設(shè)定纬霞，那就是凌埂，可以有任意多組值。什么意思呢诗芜？無論多少組值瞳抓，都是可以渲染出來的。理論上說伏恐，我們把每一組值當(dāng)成一幅圖的1px（本來圖片就是1px1px堆疊出來的）孩哑，box-shadow可以完美構(gòu)成任意圖！這不是我的異想天開翠桦，也不是什么黑科技横蜒，早就有類似的組件出現(xiàn)了...不過這樣構(gòu)圖缺點(diǎn)很明顯，構(gòu)建一幅圖的成本太高了销凑，所以沒有推廣丛晌。其實(shí)用在一些小圖標(biāo)上還是很贊的，當(dāng)然斗幼，小圖標(biāo)方面有SVG壓著澎蛛，自然沒有出頭之日了。
這些都不是重點(diǎn)蜕窿！
關(guān)于box-shadow還有一些有點(diǎn)坑的地方谋逻。比如呆馁，如何構(gòu)建一個(gè)三角形，帶陰影的三角形..
構(gòu)建三角形很簡單毁兆，網(wǎng)上一大堆嘛浙滤。用border做的，但是气堕，一旦加上了box-shadow纺腊，就原形畢露了...很氣，糾結(jié)了很久送巡，沒辦法摹菠，后來有人跟我說，你試試filter:drop-shadow骗爆，好吧次氨，完美解決...
之后，我就看了一下filter:drop-shadow摘投，發(fā)現(xiàn)和box-shadow差不多煮寡，其實(shí)差很多...filter:drop-shadow是真正的投影，透明的地方是沒影子的犀呼，不透明的地方才投影幸撕，而box-shadow是盒子的投影，哎外臂，其實(shí)看名字就應(yīng)該明白這個(gè)道理了...還有一點(diǎn)坐儿，filter:drop-shadow只能投影一次，不能像box-shadow一樣宋光，無限疊加貌矿。
其實(shí)CSS的坑還是蠻多的，很多是因?yàn)樽约赫莆盏牟粔蛉孀锛眩斫獠粔蛲笍毓渎覜]辦法及時(shí)的歸納總結(jié)。好吧赘艳，先說到這里酌毡，碼了這么多字，我都不知道我在說些什么...
