css浮動、BFC、定位問題

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

  • 何謂浮動元素?有什么特征?
    所謂浮動元素,即是設(shè)置了浮動屬性的元素。其特征為:

  • 1.浮動的框可以向左或者向右移動,直到它的外邊緣碰到包含框(其父元素)或者另一個浮動框為止,這條屬性也就意味著浮動元素可以像行內(nèi)元素的樣式一樣水平排列,但如果高度設(shè)置存在問題,那么多個浮動元素水平排列會存在“卡住”的情況,簡單的測試一下: 框3就被框1卡住了

  • 2.浮動的框不在文檔的普通流中,所以文檔普通流中的塊框感知不到浮動框的存在;

  • 3.在css中任何元素都可以浮動,浮動元素會生成一個塊級框,而不論該元素本身是什么元素。

  • 對父容器、其他浮動元素、普通元素、文字分別有什么效果?
    浮動最初的目的是為了實行文字的環(huán)繞效果.

    根據(jù)測試可以看出:
      - 對于處于文檔普通流中的塊級元素而言,它無法感知到浮動元素的存在,故實際的效果為浮動元素覆蓋了塊級元素的一部分,當然也可以說塊級元素的一部分鉆到了浮動元素的下面;
      - 而塊級元素包含的文本則可以感知到浮動元素的存在(設(shè)定如此),因此環(huán)繞著浮動元素排列。
    - 那么除了文本之外,像圖片(一般認為圖片是行內(nèi)元素),一些表單元素(如單行文本域、單行密碼域、單選按鈕、多選按鈕、多行文本域、下拉菜單、上傳域、隱藏域、提交按鈕、普通按鈕)這些行類元素,他們產(chǎn)生行類框是否能夠識別到浮動元素了?這個待測試。。。。。
    
    • 簡單測試二
    • 如果一個父元素包含浮動元素,按照設(shè)想,應(yīng)該是浮動元素在父元素的框內(nèi)向左浮動或者向右浮動,然而實際測試發(fā)現(xiàn),父元素未被浮動元素撐開,父元素的高度坍塌。

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

  • 清除浮動指什么?
    由測試2可以看出,浮動元素會脫離文檔的普通流,而其父容器在普通流中,則存在父元素高度坍塌問題,如果我們希望浮動元素在其父容器內(nèi)部浮動,則需要清除浮動,而浮動元素的能夠浮動,是因為包圍它的行框縮短了,從而給浮動元素留下了空間,浮動原理簡述,而清除浮動就是讓包圍浮動元素的行框恢復(fù)原長度,但浮動元素客觀存在(雖然不在普通文檔流中),占據(jù)了一定空間,為了恢復(fù)原長度,行框應(yīng)該向下或向上移動,直到左右沒有浮動元素為止(即給浮動元素上面或下面添加了足夠的清除空間),這樣也就恢復(fù)了原長度。
  • 如何清除浮動?
    清除浮動主要是兩種方法,即使用clear屬性 ,或者BFC清除浮動。

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

static
元素框正常生成。塊級元素生成一個矩形框,作為文檔流的一部分,行內(nèi)元素則會創(chuàng)建一個或多個行框,置于其父元素中。
relative
元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所占的空間仍保留。
absolute
元素框從文檔流完全刪除,并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉,就好像元素原來不存在一樣。元素定位后生成一個塊級框,而不論原來它在正常流中生成何種類型的框。
fixed
元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute,不過其包含塊是視窗本身。

  • 提示:相對定位實際上被看作普通流定位模型的一部分,因為元素的位置相對于它在普通流中的位置。

    • 1.普通流,即為設(shè)置元素的默認位置;
    • 2.相對定位,即相對于元素在文檔流中的默認位置進行偏移;
    • 3.絕對定位,即相對于最近的已包含的祖先元素,如果元素沒有最近的祖先元素,那么則相對于最初的包含塊。

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

z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
注釋:元素可擁有負的 z-index 屬性值。
注釋:Z-index 僅能在定位元素上奏效(例如 position:absolute;)!
說明
該屬性設(shè)置一個定位元素沿 z 軸的位置,z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù),則離用戶更近,為負數(shù)則表示離用戶更遠。

  • 取值與意義
    auto 默認。堆疊順序與父元素相等。
    number 設(shè)置元素的堆疊順序。
    inherit 規(guī)定應(yīng)該從父元素繼承 z-index 屬性的值。

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

簡單測試一下:

  • 絕對定位有偏移
  • 加了負margin也偏移了
    兩者的區(qū)別在于:
    position:relative;只相對自己原本位置發(fā)生偏移,不影響其它普通流中元素的位置。
    margin:除了讓元素自身發(fā)生偏移還影響其它普通流中的元素。

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

  • BFC是什么?
    BFC英文全稱是block formatting context,中文翻譯為塊級話格式上下文(個人認為這個翻譯太過直譯了,應(yīng)該采用意譯更好),在css的W3C官方文檔中是這樣介紹的

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
For information about page breaks in paged media, please consult the section on allowed page breaks.
翻譯則為:
浮動元素和絕對定位元素,非塊級盒子的塊級容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不為“visiable”的塊級盒子,都會為他們的內(nèi)容創(chuàng)建新的BFC(塊級格式上下文)。
在BFC中,盒子從頂端開始垂直地一個接一個地排列,兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中,兩個相鄰的塊級盒子的垂直外邊距會產(chǎn)生折疊。
在BFC中,每一個盒子的左外邊緣(margin-left)會觸碰到容器的左邊緣(border-left)(對于從右到左的格式來說,則觸碰到右邊緣)。
翻譯參考

  • BFC如何產(chǎn)生?
    可見官方的解釋是比較晦澀的,那沒可以先這樣簡單理解,即BFC是一種獨立的布局模式,當元素滿足上述特征時,即會為元素及其內(nèi)容創(chuàng)建一個獨立BFC布局模式,這種布局模式只對創(chuàng)建元素及其內(nèi)容有作用,對外界其他元素則沒有影響。
    簡單點說,當對元素設(shè)置以下屬性就可以生成BFC:
    float: left | right;(浮動元素)
    overflow: hidden | auto | scroll;(overflow值不為visable)
    display: table-cell | table-caption | inline-block;(非塊級元素)
    position: absolute | fixed;(絕對定位元素)

-BFC有什么作用(特性)?

  • 1、BFC會阻止垂直外邊距(margin-top、margin-bottom)折疊

    • 按照BFC的定義,只有同屬于一個BFC時,兩個元素才有可能發(fā)生垂直Margin的重疊,這個包括相鄰元素,嵌套元素,只要他們之間沒有阻擋(例如邊框,非空內(nèi)容,padding等)就會發(fā)生margin重疊;

    • 因此要解決margin重疊問題,只要讓它們不在同一個BFC就行了,但是對于兩個相鄰元素來說,意義不大,沒有必要給它們加個外殼,但是對于嵌套元素來說就很有必要了,只要把父元素設(shè)為BFC就可以了。這樣子元素的margin就不會和父元素的margin發(fā)生重疊;

  • 2、 BFC不會重疊浮動元素;

  • 3、BFC可以包含浮動;
    我們可以利用BFC的第三條特性來“清浮動”,這里其實說清浮動已經(jīng)不再合適,應(yīng)該說包含浮動。也就是說只要父容器形成BFC就可以。

BFC的問題還是需要研究,目前似懂非懂!!!!!!!!

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

在CSS當中,相鄰的兩個盒子(可能是兄弟關(guān)系也可能是祖先關(guān)系)的外邊距可以結(jié)合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊,并且因而所結(jié)合成的外邊距稱為折疊外邊距。

  • 當兩個盒子的外邊距均為正時,折疊外邊距取外邊距更大的那個;
  • 當兩個盒子的外邊距 均為負時,折疊外邊距取外邊距絕對值更大的那個;
  • 當兩個盒子的外邊距一正一負時,折疊外邊距取兩個外邊距值的和。

產(chǎn)生折疊的必備條件:margin必須是鄰接的!
而根據(jù)w3c規(guī)范,兩個margin是鄰接的必須滿足以下條件:

  • 1.必須是處于常規(guī)文檔流(非float和絕對定位)的塊級盒子,并且處于同一個BFC當中。
  • 2.沒有線盒,沒有空隙(clearance),沒有padding和border將他們分隔開
  • 3.都屬于垂直方向上相鄰的外邊距,可以是下面任意一種情況:
    • 元素的margin-bottom與其下一個常規(guī)文檔流的兄弟元素的margin-top
    • height為auto的元素的margin-bottom與其最后一個常規(guī)文檔流的子元素的margin-bottom
    • 高度為0并且最小高度也為0,不包含常規(guī)文檔流的子元素,并且自身沒有建立新的BFC的元素的margin-top和margin-bottom

以上的條件意味著下列的規(guī)則:

  • 1.創(chuàng)建了新的BFC的元素(例如浮動元素或者'overflow'值為'visible'以外的元素)與它的子元素的外邊距不會折疊
    浮動元素不與任何元素的外邊距產(chǎn)生折疊(包括其父元素和子元素)
  • 2.絕對定位元素不與任何元素的外邊距產(chǎn)生折疊
    inline-block元素不與任何元素的外邊距產(chǎn)生折疊
  • 3.一個常規(guī)文檔流元素的margin-bottom與它下一個常規(guī)文檔流的兄弟元素的margin-top會產(chǎn)生折疊,除非它們之間存在間隙(clearance)。
  • 4.一個常規(guī)文檔流元素的margin-top 與其第一個常規(guī)文檔流的子元素的margin-top產(chǎn)生折疊,條件為父元素不包含 padding 和 border ,子元素不包含 clearance。
  • 5.一個 'height' 為 'auto' 并且 'min-height' 為 '0'的常規(guī)文檔流元素的 margin-bottom 會與其最后一個常規(guī)文檔流子元素的 margin-bottom 折疊,條件為父元素不包含 padding 和 border ,子元素的 margin-bottom 不與包含 clearance 的 margin-top 折疊。
  • 6.一個不包含border-top、border-bottom、padding-top、padding-bottom的常規(guī)文檔流元素,并且其 'height' 為 0 或 'auto', 'min-height' 為 '0',其里面也不包含行盒(line box),其自身的 margin-top 和 margin-bottom 會折疊。

以上引用自
文章來源
簡單測試一下父子外邊距合并

8.代碼部分

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,572評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,071評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,409評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,569評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,360評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 54,895評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,979評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,123評論 0 286
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,643評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,559評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,742評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,250評論 5 356
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 43,981評論 3 346
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,363評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,622評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,354評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,707評論 2 370

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,774評論 1 92
  • 一,浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響? 浮動模型是一種可視化格式模型,浮動...
    DeeJay_Y閱讀 888評論 0 4
  • relative:生成相對定位的元素,通過top,bottom,left,right的位置相對于其正常位置進行定位...
    zx9426閱讀 954評論 0 2
  • 1.浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響? 浮動元素不在文檔的普通流中,它可以...
    饑人谷_Young丶K閱讀 442評論 0 0
  • 我只覺得虛空
    磨砂琥閱讀 146評論 0 1