CSS 不知道說些什么羊娃?!


其實(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è)boxstylewidth等于100px芒炼,那么,它的內(nèi)容部分就是100px术徊,然后加的padding本刽,border都在100px之外,也就是說,你加的padding子寓,border都會(huì)讓這個(gè)box與其他box之間的距離變大(正常文檔流暗挑,你要拿絕對定位來跟我懟,那沒得聊)斜友。

IE是怎么搞的盒模型呢炸裆?同樣是一個(gè)box,被加了width等于100px,那它就真的是100px了蝙寨,不是content100px晒衩,而是content+padding+border100px,什么意思呢墙歪,就是你加的padding听系,border無論多大,都不會(huì)改變這個(gè)box和其他box之間的距離虹菲,就是這么純粹靠胜,paddingborder影響的毕源,只是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é)。好吧赘艳,先說到這里酌毡,碼了這么多字,我都不知道我在說些什么...

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蕾管,一起剝皮案震驚了整個(gè)濱河市枷踏,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌掰曾,老刑警劉巖旭蠕,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡下梢,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進(jìn)店門塞蹭,熙熙樓的掌柜王于貴愁眉苦臉地迎上來孽江,“玉大人,你說我怎么就攤上這事番电「谄粒” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵漱办,是天一觀的道長这刷。 經(jīng)常有香客問我,道長娩井,這世上最難降的妖魔是什么暇屋? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮洞辣,結(jié)果婚禮上咐刨,老公的妹妹穿的比我還像新娘。我一直安慰自己扬霜,他們只是感情好定鸟,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著著瓶,像睡著了一般联予。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上材原,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天沸久,我揣著相機(jī)與錄音,去河邊找鬼华糖。 笑死麦向,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的客叉。 我是一名探鬼主播诵竭,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼兼搏!你這毒婦竟也來了卵慰?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤佛呻,失蹤者是張志新(化名)和其女友劉穎裳朋,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體吓著,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡鲤嫡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年送挑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片暖眼。...
    茶點(diǎn)故事閱讀 40,872評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡惕耕,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出诫肠,到底是詐尸還是另有隱情司澎,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布栋豫,位于F島的核電站挤安,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏丧鸯。R本人自食惡果不足惜蛤铜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望骡送。 院中可真熱鬧昂羡,春花似錦、人聲如沸摔踱。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽派敷。三九已至蛹批,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間篮愉,已是汗流浹背腐芍。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留试躏,地道東北人猪勇。 一個(gè)月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像颠蕴,于是被迫代替她去往敵國和親泣刹。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案犀被? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,762評論 1 92
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color椅您,font,text-align寡键,li...
    love2013閱讀 2,316評論 0 11
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color掀泳,font,text-align,li...
    wzhiq896閱讀 1,762評論 0 2
  • H5移動(dòng)端知識點(diǎn)總結(jié) 閱讀目錄 移動(dòng)開發(fā)基本知識點(diǎn) calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,527評論 0 26
  • 1员舵、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,640評論 0 7