3.1.2外邊距疊加
只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距疊加,行內(nèi)框段直、浮動(dòng)框或絕對(duì)定位框之間的外邊距不會(huì)疊加
3.2定位概述
3.2.1可視化格式模型
css中有3種基本的定位機(jī)制:普通流、浮動(dòng)、絕對(duì)定位。
如何修改行內(nèi)框的尺寸革骨?
1、行內(nèi)框在一行中水平排列其垄,可以使用水平內(nèi)邊距、邊框卤橄、外邊距調(diào)整他們的水平間距
2绿满、行內(nèi)框高度并不受垂直內(nèi)邊距、邊框窟扑、和外邊距的影響
3喇颁、行內(nèi)框設(shè)置顯式的高度和寬度也沒(méi)有影響
4漏健、修改行內(nèi)框尺寸的唯一辦法就是修改行高或者水平邊框、水平內(nèi)邊距和外邊距
3.2.2相對(duì)定位
相對(duì)定位移動(dòng)位置之后,元素仍然占據(jù)原來(lái)的空間橘霎,因此蔫浆,這樣移動(dòng)會(huì)造成它覆蓋其他框
.myBox{
position:relative;
left:20px;
top:20px;
}
3.2.3絕對(duì)定位
相對(duì)定位實(shí)際上可以看做普通流定位模型中的一部分,因?yàn)樵氐奈恢檬窍鄬?duì)于他在普通流中的位置姐叁。
絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)瓦盛,因此不占據(jù)空間,普通文檔流中其他元素的布局就是絕對(duì)定位的元素不存在一樣外潜。
相對(duì)定位是“相對(duì)于”元素在文檔流中的初始位置原环,而絕對(duì)定位是“相對(duì)于”距離它最近的已定位祖先元素,如果不存在已定位的祖先元素处窥,那么相對(duì)于初始包含塊
3.2.4浮動(dòng)
1嘱吗、現(xiàn)象
浮動(dòng)會(huì)讓元素脫離文檔流,不再影響不浮動(dòng)的元素滔驾,實(shí)際上并不完全如此谒麦。
浮動(dòng)元素后面的文檔流元素,這個(gè)元素的框不受浮動(dòng)影響哆致,但是其中的文本元素會(huì)受影響绕德,會(huì)移動(dòng)以留出空間。技術(shù)術(shù)語(yǔ):浮動(dòng)元素旁邊的行框被縮短沽瞭,從而給浮動(dòng)元素留出空間迁匠,因此行框圍繞浮動(dòng)框。實(shí)際上驹溃,創(chuàng)建浮動(dòng)框使文本可以圍繞圖像城丧。