-
BFC
-
形成（4種）
- float
- absolutely positioned elements：
positione: absolute, fixed;- block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes,
display: inline-blocks, table-cells, table-captions;4.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.
overflow: auto, hidden, scroll 同一個(gè)BFC中的元素遵守下列規(guī)則
- 從上到下排列
- 垂直外邊距合并
- 重疊浮動(dòng)元素
- BFC之間的規(guī)則
- BFC會(huì)阻止垂直外邊距（margin-top哄尔、margin-bottom）折疊
- 按照BFC的定義，只有同屬于一個(gè)BFC時(shí)定嗓，兩個(gè)元素才有可能發(fā)生垂直Margin的重疊验庙，這個(gè)包括相鄰元素恩尾，嵌套元素壶熏，只要他們之間沒有阻擋(例如邊框但壮，非空內(nèi)容陶夜，padding等)就會(huì)發(fā)生margin重疊凛驮。
- 因此要解決margin重疊問(wèn)題，只要讓它們不在同一個(gè)BFC就行了律适，但是對(duì)于兩個(gè)相鄰元素來(lái)說(shuō)辐烂，意義不大，沒有必要給它們加個(gè)外殼捂贿，但是對(duì)于嵌套元素來(lái)說(shuō)就很有必要了纠修，只要把父元素設(shè)為BFC就可以了。這樣子元素的margin就不會(huì)和父元素的margin發(fā)生重疊
- BFC不會(huì)重疊浮動(dòng)元素
- BFC可以包含浮動(dòng)
-
-
定位機(jī)制
- CSS有三種基本的定位機(jī)制：普通流厂僧，浮動(dòng)扣草，絕對(duì)定位(absolute,fixed)
- 普通流是默認(rèn)定位方式，在普通流中元素框的位置由元素在html中的位置決定颜屠，這也是我們最常見的方式辰妙，其中position: static與position:relative屬于普通流的定位方式
- 浮動(dòng)定位
- 絕對(duì)定位包括 absolute和 fixed
2和3 元素都會(huì)脫離文檔的普通流
注意：position:relative 屬于普通流，元素位置會(huì)發(fā)生偏移甫窟，但是并不會(huì)影響其他元素的布局 -
絕對(duì)定位寬度
- 絕對(duì)定位寬度是收縮的密浑，如果想撐滿父容器，可以設(shè)置 width: 100%
- transform: translate, scale
-
布局
- 消除兩個(gè)按鈕之間的空隙
- 讓標(biāo)簽之間沒有空隙
- 先display為inline-block粗井，再父元素font-size設(shè)置為0尔破，子元素不為0即可
- 用浮動(dòng)，即先用一個(gè)塊級(jí)元素包裹住按鈕浇衬。然后讓兩個(gè)按鈕浮動(dòng)懒构，清除浮動(dòng)后再讓新添加的塊級(jí)元素居中
1和2不要用，只在面試時(shí)候回答即可耘擂。布局中盡量不用inline-block（除非是inline-block的元素是獨(dú)一無(wú)二的胆剧，沒有兄弟）
- 消除兩個(gè)按鈕之間的空隙
-
flex
- 這可能有些容易混淆，但align-content決定行之間的間隔醉冤，而align-items決定元素整體在容器的什么位置秩霍。只有一行的時(shí)候align-content沒有任何效果
