其實(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é)。好吧赘艳,先說到這里酌毡,碼了這么多字,我都不知道我在說些什么...