哎呀,各位小伙伴們,咱們今天來聊一聊CSS里面那個好玩得要命的屬性——margin。哈哈,是不是有點激動吶? 那就快跟上咱的腳步,一起來深度挖掘一下這個有意思的東東吧!
先給大家扔個干貨,告訴你們,margin就是CSS里面用來控制元素周圍的“空隙”的屬性,箱子不論多大,總要有個適合自己的空間來發(fā)揮吧,咱們的網(wǎng)頁元素也一樣,需要有個合適的間隔來彼此區(qū)分開來。哎喲,這個margin啊,真是一個重要的家伙呢!
咱們先說說margin的寫法,就是在你要設(shè)置的元素上面加上margin:XX;這個XX就是你要設(shè)置的數(shù)值了,可以是一個正數(shù),也可以是負數(shù)哦!我猜有的小伙伴可能一臉懵逼,好吧,咱們來舉個例子,要是你設(shè)置了一個正數(shù)的margin,那么元素就會從它周圍撐一塊區(qū)域,和其他的元素拉開距離,才好玩呢!對了,這個數(shù)值是可以有單位的,比如說px像素,em字體大小的倍數(shù),rem相對根元素的字體大小,甚至還可以是百分比呢!哇塞,這個margin真是神通廣大??!
不過,小伙伴們切記哦,設(shè)置margin的時候,要分清楚是哪個方向的margin(TOP,右邊,BOTTOM,左邊),咱是中國人講究講究的話,不能亂搞!所以,在設(shè)置的時候一定要準(zhǔn)確地寫明方向哦,不然回事就大了!當(dāng)然,如果你嫌麻煩,可以用縮寫的方式margin: T,R,B,L;這四個方向一次性設(shè)置,哇塞,那得多省勁??!不過小心,別寫錯了哦,不然來了就準(zhǔn)備著改代碼了,想想都頭疼。
嘿嘿,說段細節(jié),margin既可以設(shè)置單個元素的外邊距,也可以設(shè)置包含多個元素的容器的外邊距,這樣就可以起到統(tǒng)一控制的作用了,省去了一一設(shè)置的繁瑣。相信有的小伙伴已經(jīng)在心里盤算著怎么寫代碼了吧!對了,還有一點要注意哦,margin的空隙不會出現(xiàn)在元素的邊框里面,要不然咋還能夠統(tǒng)一布局嘛!
嘿嘿,小伙伴們,margin還有一些“草臺班子”的親戚哦,咱們一起來認識一下吧!只要加上一個margin-top、margin-right、margin-bottom、margin-left就可以設(shè)置不同方向的外邊距啦。還有個足夠犀利的屬性叫做margin:auto,這個牛氣沖天的屬性會幫你把元素自動居中,簡直是一大利器!咱還有個負福利要送給大家,就是margin:0 auto,這個能幫你水平居中哦!
哎呀呀,咱們聊這么久,都忘了說一點了!margin是有個壞習(xí)慣的,它會有個“坍塌”的問題,也就是說,如果兩個元素的margin相鄰,只會顯示較大的那個margin,讓上邊先歇菜,然后較小的margin就會順利退場,嗚嗚,這個bug還挺惹人煩的呢!所以,如果你不想讓margin“坍塌”,就要小心處理,橫向用border、padding、關(guān)系不大的浮動等等方式打散他們,這樣才能保證沒有縫隙。
哇塞,咱們今天真是爆肝?。”P點了CSS里面的margin屬性,閑聊了一堆小技巧,也告訴了大家一些難堪的事實。雖然坑有點多,但是不要怕,咱們一起學(xué)習(xí),一起克服,相信自己,總有一天可以搞定他們!加油吧,小伙伴們! yinyiprinting.cn 寧波海美seo網(wǎng)絡(luò)優(yōu)化公司 是網(wǎng)頁設(shè)計制作,網(wǎng)站優(yōu)化,企業(yè)關(guān)鍵詞排名,網(wǎng)絡(luò)營銷知識和開發(fā)愛好者的一站式目的地,提供豐富的信息、資源和工具來幫助用戶創(chuàng)建令人驚嘆的實用網(wǎng)站。 該平臺致力于提供實用、相關(guān)和最新的內(nèi)容,這使其成為初學(xué)者和經(jīng)驗豐富的專業(yè)人士的寶貴資源。
聲明本文內(nèi)容來自網(wǎng)絡(luò),若涉及侵權(quán),請聯(lián)系我們刪除! 投稿需知:請以word形式發(fā)送至郵箱[email protected]
哎~~算法現(xiàn)在是越來越多了~~~