定義
文檔流中：內(nèi)聯(lián)元素默認(rèn)從左到右流辕录，遇到阻礙或者寬度不夠自動(dòng)換行碉考，繼續(xù)按照從左到右的方式布局轿曙。塊級(jí)元素單獨(dú)占據(jù)一行今艺，并按照從上到下的方式布局韵丑。
脫離文檔流
- 文檔一旦脫離文檔流，在算其父元素的高度時(shí)虚缎，就不包括其自身了埂息。
- 脫離文檔流的方法：
-
float:left;2.position: absolute;3.position:fixed
1.png
.v1 { position: fixed;}
3.png
可以看到對(duì).v1進(jìn)行
fixed定位后，其父元素的高度便與他無關(guān)遥巴。具體代碼示例：
相對(duì)定位relative對(duì)文檔流的影響
4.png
.v1 {
position: relative;
top: 20px;
background: yellow;
}
.v2 {
background: blue;
}
5.png
- 總結(jié)1： 通過開發(fā)者工具可知，兩次的
.box的高度是一樣的享幽，所以對(duì)元素進(jìn)行相對(duì)定位不會(huì)影響其父元素的高度铲掐。 - 總結(jié)2： 對(duì)元素進(jìn)行相對(duì)定位，其在父元素的真實(shí)空間位置還是原來的位置值桩，只是肉眼看到的是新位置相對(duì)于原來的位置進(jìn)行移動(dòng)摆霉，所占據(jù)的真實(shí)空間是不變的。
具體代碼示例：
div高度的確定
-
div里面只有一行內(nèi)聯(lián)元素，其高度 = 這一行內(nèi)聯(lián)元素的行高
6.png
7.png
總結(jié)：font-size:20px可是div的高度為26px携栋，當(dāng)字體改變時(shí)font-family:yahoma時(shí)搭盾，div的高度又是另外一個(gè)值，說明div的高度由字的大小x開發(fā)者建議的行高確定婉支，與font-size無關(guān)鸯隅。 - 具體寫入
line-height的值,沒有padding等。
.box2 {
margin: 10px;
line-height: 30px;
border: 1px solid green; /*border其實(shí)是占據(jù)空間的向挖，上下共占據(jù)2px蝌以。*/
}
9.png
總結(jié)：div的高度即為
line-height的值 。（在沒有padding的前提下）
- div里面還有div何之，div的高度
.box3 {
border: 1px solid blue;
padding: 10px;
}
.v1 {
border: 1px solid yellow;
margin: 20px;
padding: 20px;
}
10.png
總結(jié)：div的高度由其自身的
padding+子元素的高度+子元素的margin跟畅、padding。
- div里面有塊級(jí)元素和內(nèi)聯(lián)元素溶推，div的高度
總結(jié)：div的高度由它內(nèi)部文檔流中元素的總和決定徊件。決定！=相等蒜危，還存在行高虱痕、padding、margin等等舰褪。
具體代碼示例：
div的寬度確定
div的寬度不是由div里面的文字決定的皆疹，div默認(rèn)是一行寬。
內(nèi)聯(lián)元素的寬高
內(nèi)聯(lián)元素的寬度由其內(nèi)容+margin+padding決定占拍，但是其高度是不受padding和margin影響的略就。
11.png
