浮動定位BFC邊距合并

1. 浮動元素有什么特征难衰?對父容器捏卓、其他浮動元素、普通元素否纬、文字分別有什么影響?

浮動元素會脫離原本的文檔流吕晌,浮動框會根據(jù)設(shè)定值在左右移動,直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣临燃。
對父容器而言睛驳,父元素的 height 和 width 不會因為浮動元素的存在而被撐開,如果這個父容器內(nèi)包含的子元素全部是浮動元素膜廊,那么它的寬高都會默認為0乏沸。
對其他浮動元素而言,如果包含塊太窄無法容納水平排列的全部浮動元素爪瓜,那么其它浮動元素會向下移動蹬跃,直到有足夠的空間,而如果浮動元素的高度不同铆铆,那么向下移動的時候可能會被卡住蝶缀。
對其他普通元素而言,浮動元素的框會表現(xiàn)得像不存在薄货,但普通元素框內(nèi)的浮動元素旁邊的行框會被縮短翁都,給浮動元素留出空間,行框圍繞著浮動框谅猾,即文字會圍繞著浮動框柄慰。

2. 清除浮動指什么? 如何清除浮動? 兩種以上方法

使用 clear 屬性可以設(shè)置不允許元素左右出現(xiàn)浮動元素:

  • clear: left 不允許元素左邊出現(xiàn)浮動元素
  • clear: right 不允許元素右邊出現(xiàn)浮動元素
  • clear: both 元素兩邊都不可以出現(xiàn)浮動元素
  • clear: none 不清除浮動

清除浮動是為了解決浮動父容器高度塌陷問題,讓父元素在視覺效果上包裹浮動元素赊瞬。

  1. 將父元素的最后子元素的 clear 屬性值為 both 先煎,父元素被撐開,在視覺上父元素包裹住所有子元素巧涧。
  2. 可以將父元素設(shè)置為BFC來清除浮動。

3. 有幾種定位方式遥倦,分別是如何實現(xiàn)定位的谤绳,參考點是什么占锯,使用場景是什么?

  • static —— 默認值缩筛,沒有定位消略,元素出現(xiàn)在正常流中
  • relative —— 相對定位,相對于元素本身正常位置定位瞎抛,對其他元素來說艺演,相對定位的元素的原位置仍然可見,定位時保留
  • absolute —— 絕對定位桐臊,相對于第一個非 static 定位的祖先元素進行定位胎撤,以該祖先元素的內(nèi)邊框為基準,即包括內(nèi)容區(qū)和內(nèi)邊距断凶,對其他元素來說伤提,絕對定位的元素的位置是不可見的,原位置也不做保留
  • fixed —— 絕對定位认烁,相對于瀏覽器窗口進行定位肿男,對其他元素來說,絕對定位的元素的位置是不可見的却嗡,原位置也不做保留
  • sticky —— CSS3新屬性舶沛,相當于relative和fixed的結(jié)合,但兼容性差窗价,不常使用
  • inherit —— 從父元素繼承 position 屬性

4. z-index 有什么作用? 如何使用?

z-index 可以控制元素的疊放順序冠王,z-index 越高,元素位置越靠上舌镶。
z-index 的默認值為 auto柱彻,不具有繼承屬性,可以通過設(shè)置數(shù)值或 inherit 從父元素繼承來設(shè)置 z-index 的屬性值餐胀,可以設(shè)置負值哟楷。

5. position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別

  1. 負 margin 可以和其他定位方式結(jié)合使用,但如果設(shè)置 position: relative 就不能再使用其他的定位了否灾。
  2. 使用 position: relative卖擅,元素本身在文檔流中的位置不會發(fā)生改變,但使用負 margin 會使元素本身在文檔流中的位置發(fā)生改變墨技。

6. BFC 是什么惩阶?如何生成 BFC?BFC 有什么作用扣汪?舉例說明

BFC 塊級格式化上下文(block format content)断楷,BFC就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素崭别。
元素設(shè)置左/右浮動冬筒,overflow 屬性設(shè)置為 hidden 或 scroll恐锣,display 設(shè)置為inline-block、table-cell 或 table-captain舞痰,position 設(shè)置為 absolute 或 fixed土榴,即可生成BFC。
BFC會阻止垂直外邊距合并响牛;BFC可以包含浮動玷禽;BFC不會重疊浮動元素。
可以使用BFC解決外邊距重疊問題呀打,也可以用來清除浮動矢赁。

7. 在什么場景下會出現(xiàn)外邊距合并?如何合并聚磺?如何不讓相鄰元素外邊距合并坯台?給個父子外邊距合并的范例

外邊距合并指的是,塊級元素的上外邊距和下外邊距相遇時有時會合并為單個外邊距瘫寝。
以下三種情況會導致外邊距合并:

  1. 毗鄰兄弟元素:
    毗鄰的兩個兄弟元素之間的外邊距會塌陷(當后者被清除浮動時除外)蜒蕾,此時兩元素之間的外邊距為上面元素的下外邊距和下面元素的上外邊距中的較大值。
  2. 塊級父元素與其第一個/最后一個子元素:
    如果塊級父元素中焕阿,不存在上邊框咪啡、上內(nèi)邊距、inline content暮屡、清除浮動這四條屬性時撤摸,那么這個塊級元素和其第一個子元素的上邊距就挨到了一起,此時這個父元素對外展現(xiàn)出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者褒纲。類似的准夷,若塊級父元素的 margin-bottom
    與它的最后一個子元素的margin-bottom之間沒有父元素的 border、
    padding莺掠、inline content衫嵌、height
    、min-height彻秆、max-height 分隔時楔绞,就會發(fā)生 下外邊距合并 現(xiàn)象。
  3. 空塊元素:
    如果存在一個空的塊級元素唇兑,其 border
    酒朵、padding、inline content扎附、height蔫耽、min-height 都不存在。那么此時它的上下邊距中間將沒有任何阻隔帕棉,此時它的上下外邊距將會合并针肥。

外邊距合并計算規(guī)則

  • 當兩個外邊距都是正值時饼记,按較大值的外邊距顯示
  • 當兩個外邊距一正一負時香伴,保留兩個外邊距值相加之和的外邊距慰枕,如果計算值為負值,則下層的元素會被覆蓋一部分
  • 當兩個外邊距都為負值時即纲,按絕對值較大的外邊距顯示

阻止外邊距合并:
為父元素設(shè)置 border具帮、padding,使父子元素的外邊距接觸不到低斋,就可以避免父子元素的外邊距合并蜂厅,另外形成BFC也可以阻止外邊距合并。

有css代碼如下:

.fa{
  margin: 20px;
  background-color: #abc;
}

.child1{
  z-index:20;
  background-color: pink;
  margin: 20px;
}

.child2{
  background-color: yellow;
  margin: 30px;
}

.child3{
  background-color: #786;
  margin:40px;
}

如圖膊畴,方塊1的上外邊距和父元素的上外邊距發(fā)生了合并掘猿,方塊3的下外邊距和父元素的下外邊距發(fā)生了合并,1唇跨、2稠通、3之間也發(fā)生了外邊距合并:


外邊距合并
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市买猖,隨后出現(xiàn)的幾起案子改橘,更是在濱河造成了極大的恐慌,老刑警劉巖玉控,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件飞主,死亡現(xiàn)場離奇詭異,居然都是意外死亡高诺,警方通過查閱死者的電腦和手機碌识,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來虱而,“玉大人筏餐,你說我怎么就攤上這事⊙” “怎么了胖烛?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長诅迷。 經(jīng)常有香客問我佩番,道長,這世上最難降的妖魔是什么罢杉? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任趟畏,我火速辦了婚禮,結(jié)果婚禮上滩租,老公的妹妹穿的比我還像新娘赋秀。我一直安慰自己利朵,他們只是感情好,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布猎莲。 她就那樣靜靜地躺著绍弟,像睡著了一般。 火紅的嫁衣襯著肌膚如雪著洼。 梳的紋絲不亂的頭發(fā)上樟遣,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天,我揣著相機與錄音身笤,去河邊找鬼豹悬。 笑死,一個胖子當著我的面吹牛液荸,可吹牛的內(nèi)容都是我干的瞻佛。 我是一名探鬼主播,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼娇钱,長吁一口氣:“原來是場噩夢啊……” “哼伤柄!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起忍弛,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤响迂,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后细疚,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蔗彤,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年疯兼,在試婚紗的時候發(fā)現(xiàn)自己被綠了然遏。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡吧彪,死狀恐怖待侵,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情姨裸,我是刑警寧澤秧倾,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站傀缩,受9級特大地震影響那先,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜赡艰,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一售淡、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦揖闸、人聲如沸揍堕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽衩茸。三九已至,卻和暖如春蹲嚣,著一層夾襖步出監(jiān)牢的瞬間递瑰,已是汗流浹背祟牲。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工隙畜, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人说贝。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓议惰,卻偏偏與公主長得像,于是被迫代替她去往敵國和親乡恕。 傳聞我的和親對象是個殘疾皇子言询,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361

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