浮動(dòng)定位BFC邊距合并

1.浮動(dòng)元素有什么特征萍虽?對(duì)父容器齐疙、其他浮動(dòng)元素膜楷、普通元素、文字分別有什么影響?
當(dāng)浮動(dòng)元素的邊框觸碰到父元素的邊框或者其他浮動(dòng)元素的邊框贞奋,他就會(huì)停下來赌厅。
浮動(dòng)會(huì)讓元素脫離文檔流,如果浮動(dòng)的元素后面有一個(gè)文檔流中元素轿塔,那么這個(gè)元素的框會(huì)表現(xiàn)的和浮動(dòng)元素不存在一樣特愿。但是框的文本內(nèi)容會(huì)為浮動(dòng)元素留出位置空間仲墨。

2.清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
清除浮動(dòng):清除對(duì)應(yīng)的單詞是 clear,對(duì)應(yīng)CSS中的屬性是 clear:left | right | both | none揍障;
(1)利用clear屬性清楚浮動(dòng)
(2)使父元素形成bfc

3.有幾種定位方式目养,分別是如何實(shí)現(xiàn)定位的,參考點(diǎn)是什么毒嫡,使用場(chǎng)景是什么癌蚁?
Inherit 規(guī)定應(yīng)該從父元素繼承position的值
static 默認(rèn)值,沒有定位元素出現(xiàn)在正常的流中(忽略top兜畸,bottom努释,left,right或者z-index聲名)
relative 生成相對(duì)定位的元素咬摇,相對(duì)于元素本身正常位置進(jìn)行定位伐蒂,因此left 20px會(huì)向元素的left位置添加20px;
absolute 生成絕對(duì)定位的元素,相對(duì)于static定位以外的第一個(gè)祖先元素進(jìn)行定位肛鹏,元素的位置通過left,top,bottom,right屬性進(jìn)行規(guī)定逸邦。
fixed 生成絕對(duì)定位的元素,相對(duì)于瀏覽器窗口進(jìn)行定位在扰,元素的位置通過left昭雌,top,bottom健田,right屬性進(jìn)行規(guī)定烛卧。
Sticky CSS3新屬性,表現(xiàn)類似position:relative和position:fixed的合體妓局,在目標(biāo)區(qū)域在屏幕中可見時(shí)总放,他的行為就像position:relative

4.z-index 有什么作用? 如何使用?
z-index 屬性指定了一個(gè)元素及其子元素的 z-order。 當(dāng)元素之間重疊的時(shí)候好爬,z-order 決定哪一個(gè)元素覆蓋在其余元素的上方顯示局雄。 通常來說 z-index 較大的元素會(huì)覆蓋較小的一個(gè)。
對(duì)于一個(gè)已經(jīng)定位的元素(即position屬性值是非static的元素)存炮,z-index 屬性指定:
1.元素在當(dāng)前堆疊上下文中的堆疊層級(jí)炬搭。
2.元素是否創(chuàng)建一個(gè)新的本地堆疊上下文。

5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
負(fù)margin文檔流的位置發(fā)生偏移穆桂,position:relative文檔流的位置不會(huì)發(fā)生偏移

6.BFC 是什么宫盔?如何生成 BFC?BFC 有什么作用享完?舉例說明
BFC全稱是Block Formatting Context灼芭,即塊格式化上下文。包括浮動(dòng)般又,絕對(duì)定位的元素彼绷,還有某些塊容器(比如設(shè)置絕對(duì)定位巍佑,固定定位,浮動(dòng)寄悯,inline-block萤衰,table-cell,over-flower:auto猜旬,hidden腻菇,scroll的塊級(jí)元素。)昔馋,會(huì)建立新的塊級(jí)格式化上下文。
bfc會(huì)阻止垂直外邊距的折疊糖耸,不會(huì)重疊浮動(dòng)元素秘遏,可以包含浮動(dòng)




7.在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并?如何合并嘉竟?如何不讓相鄰元素外邊距合并邦危?給個(gè)父子外邊距合并的范例同一文檔流中的兩個(gè)相鄰塊級(jí)元素,會(huì)出現(xiàn)外邊距合并舍扰。

合并方式:
(1)上下兩個(gè)相鄰的塊級(jí)元素倦蚪,會(huì)margin發(fā)生合并,合并的值以兩者距離較大的值為準(zhǔn)边苹,可通過建立BFC來取消外邊距合并陵且;
(2)父子元素的外邊距合并「鍪可以給父元素添加邊框慕购,內(nèi)邊距或內(nèi)容當(dāng)做分界線,也可以讓父元素形成bfc茬底,這樣就不會(huì)發(fā)生邊距合并沪悲。



最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市阱表,隨后出現(xiàn)的幾起案子殿如,更是在濱河造成了極大的恐慌,老刑警劉巖最爬,帶你破解...
    沈念sama閱讀 211,817評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件涉馁,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡爱致,警方通過查閱死者的電腦和手機(jī)谨胞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蒜鸡,“玉大人胯努,你說我怎么就攤上這事牢裳。” “怎么了叶沛?”我有些...
    開封第一講書人閱讀 157,354評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵蒲讯,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我灰署,道長(zhǎng)判帮,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,498評(píng)論 1 284
  • 正文 為了忘掉前任溉箕,我火速辦了婚禮晦墙,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘肴茄。我一直安慰自己晌畅,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評(píng)論 6 386
  • 文/花漫 我一把揭開白布寡痰。 她就那樣靜靜地躺著抗楔,像睡著了一般。 火紅的嫁衣襯著肌膚如雪拦坠。 梳的紋絲不亂的頭發(fā)上连躏,一...
    開封第一講書人閱讀 49,829評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音贞滨,去河邊找鬼入热。 笑死,一個(gè)胖子當(dāng)著我的面吹牛晓铆,可吹牛的內(nèi)容都是我干的才顿。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼尤蒿,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼郑气!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起腰池,我...
    開封第一講書人閱讀 37,722評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤尾组,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后示弓,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體讳侨,經(jīng)...
    沈念sama閱讀 44,189評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評(píng)論 2 327
  • 正文 我和宋清朗相戀三年奏属,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了跨跨。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,654評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖勇婴,靈堂內(nèi)的尸體忽然破棺而出忱嘹,到底是詐尸還是另有隱情,我是刑警寧澤耕渴,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布拘悦,位于F島的核電站,受9級(jí)特大地震影響橱脸,放射性物質(zhì)發(fā)生泄漏础米。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評(píng)論 3 313
  • 文/蒙蒙 一添诉、第九天 我趴在偏房一處隱蔽的房頂上張望屁桑。 院中可真熱鬧,春花似錦栏赴、人聲如沸蘑斧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至盆偿,卻和暖如春柒爸,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背事扭。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工捎稚, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人求橄。 一個(gè)月前我還...
    沈念sama閱讀 46,382評(píng)論 2 360
  • 正文 我出身青樓今野,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親罐农。 傳聞我的和親對(duì)象是個(gè)殘疾皇子条霜,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評(píng)論 2 349

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

  • relative:生成相對(duì)定位的元素,通過top,bottom,left,right的位置相對(duì)于其正常位置進(jìn)行定位...
    zx9426閱讀 932評(píng)論 0 2
  • 1.浮動(dòng)元素有什么特征涵亏?對(duì)父容器宰睡、其他浮動(dòng)元素、普通元素气筋、文字分別有什么影響? 特征:浮動(dòng)元素脫離普通文檔流拆内,普通...
    山門龍龍閱讀 285評(píng)論 0 2
  • 1.浮動(dòng)元素有什么特征?對(duì)父容器宠默、其他浮動(dòng)元素麸恍、普通元素、文字分別有什么影響? 任何定義為float的元素搀矫,都可以...
    QQQQQCY閱讀 260評(píng)論 0 0
  • 1. 浮動(dòng)元素有什么特征肄方?對(duì)父容器、其他浮動(dòng)元素蹬癌、普通元素权她、文字分別有什么影響? 浮動(dòng)元素的特征:CSS設(shè)計(jì)flo...
    饑人谷_邵征鵬閱讀 543評(píng)論 0 0
  • 浮動(dòng)元素有什么特征?對(duì)父容器虏肾、其他浮動(dòng)元素廓啊、普通元素、文字分別有什么影響? 特征: 脫離正常文檔流封豪,沿其容器的左側(cè)...
    _Dot912閱讀 709評(píng)論 0 3