CSS用了這么多年紊扬，每次調(diào)個位置都靠試照瘾。
今天終于受不了了整理一下，發(fā)現(xiàn)細(xì)節(jié)還真挺多的飘蚯，希望以后可以不用猜了。
文檔流
- 塊級元素
.child {
position: normal;
display: block;
width: 設(shè)置值 > 默認(rèn)100%;
height: 設(shè)置值 > 內(nèi)部撐開 > 默認(rèn)0;
margin: 有福也，垂直margin會引發(fā)邊距重疊;
top-left: 無;
}
- 行內(nèi)元素
行高line-height：
每個字體在不同瀏覽器下都有默認(rèn)行高局骤，等于該字體的占位高度。
手動設(shè)置的行高不影響該高度暴凑，只影響基線距離峦甩。
不推薦設(shè)置1.5em行高，因?yàn)槔^承會繼承計(jì)算px值现喳；設(shè)置1.5行高會繼承倍數(shù)
.child {
position: normal;
display: inline;
width: 內(nèi)容寬度;
height: 永遠(yuǎn)等于默認(rèn)line-height;
margin: 垂直無凯傲，水平有;
top-left: 無;
}
- 行內(nèi)塊元素
幽靈空白節(jié)點(diǎn)：
行內(nèi)元素前永遠(yuǎn)會有一個空白節(jié)點(diǎn)，提供行內(nèi)基線嗦篱，
故行內(nèi)塊撐開冰单，父元素往往會等于行內(nèi)塊高度 + 基線高度而非行內(nèi)塊高度，
解決辦法是使用vertical-align: middle
.parent {
height: 設(shè)置值 > 內(nèi)部撐開 + 基線高度
}
.child {
position: normal;
display: inline-block;
width: 設(shè)置值 > 內(nèi)部撐開 > 默認(rèn)0;
height: 設(shè)置值 > 內(nèi)部撐開 > 默認(rèn)0;
margin: 有灸促，但是沒有邊距重疊;
top-left: 無;
}
相對定位
表現(xiàn)與文檔流基本一致诫欠，除可以設(shè)置偏移位置
.child {
position: relative;
top-left: 相對原位置的偏移狮腿，不會占據(jù)文檔流;
}
絕對定位
*塊級元素
absolute元素不會撐開父元素
經(jīng)典定位方法子絕父相
.child {
position: absolute;
display: block;
width: 設(shè)置值 > 內(nèi)部撐開 > 默認(rèn)0;
height: 設(shè)置值 > 內(nèi)部撐開 > 默認(rèn)0;
margin: 有，但是沒有邊距重疊;
top-left: 相對最近的相對定位元素;
}
- 行內(nèi)元素呕诉，行內(nèi)塊
會變成塊級元素缘厢，與塊級元素表現(xiàn)一致
flex
父子元素都沒有塊級元素、行內(nèi)元素的區(qū)分甩挫，稱作容器以及容器成員
.parent {
display: flex;
width: 與元素本身position表現(xiàn)保持一致;
height: 與元素本身position表現(xiàn)保持一致;
}
.child {
width: 內(nèi)部撐開 > flex-shrink > flex-grow > flex-basis > width *1;
height: 設(shè)置值 > 默認(rèn)100% - margin-top;
margin: 有贴硫，但是沒有邊距重疊;
top-left: 無;
}
- *1.在寬度不足時(shí)，會觸發(fā)flex-shrink縮小寬度伊者，但子元素被內(nèi)容撐開的部分不會被shrink;
在寬度足夠時(shí)英遭，會觸發(fā)flex-grow增加寬度。
這兩種情況不會同時(shí)觸發(fā)亦渗。
但神奇的是width可以控制內(nèi)部撐開的寬度挖诸，內(nèi)部撐開卻不受flex控制。 - 子元素絕對定位法精，不受flex控制多律；
相對定位，可以設(shè)置left/top
