一易遣、常用css定位流描述
1睦裳、文檔流定位 position: static
(默認(rèn)方式)
頁面元素的默認(rèn)定位方式
- 塊級元素:按照從上到下的方式逐個排列
- 行內(nèi)元素:按照從左到右的方式逐個排列
但是如何讓多個塊級元素在一行內(nèi)顯示? 方法之一:浮動定位
2、浮動定位 float
floa: left/right
這個屬性原本是用來做文字環(huán)繞的镀迂,但是后來大家發(fā)現(xiàn)做布局也不錯尘盼,就一直這么用了
3宦焦、相對定位 position: relative
元素會相對于它原來的位置偏移某個距離,改變元素位置后审残,元素原本的空間依然會被保留(不會脫離文檔流)
4夺刑、絕對定位 position: absolute
特征:
- 1谢翎、脫離文檔流-不占據(jù)頁面空間
- 2盾舌、通過偏移屬性固定元素位置
- 3、相對于最近的已定位的祖先元素實(shí)現(xiàn)位置固定
- 4稽煤、如果沒有已定位祖先元素核芽,那么就相對于最初的包含塊(body,html)去實(shí)現(xiàn)位置的固定
二、浮動的效果
- 1酵熙、浮動定位元素會被排除在文檔流之外-脫離文檔流(不占據(jù)頁面空間),其余的元素要上前補(bǔ)位
- 2轧简、浮動元素會停靠在父元素的左邊或右邊匾二,或拖溃靠在其他已浮動元素的邊緣上(元素只能在當(dāng)前所在行浮動)
- 3、浮動元素依然位于父元素之內(nèi)
- 4察藐、浮動元素處理的問題-解決多個塊級元素在一行內(nèi)顯示的問題
注意
- 1皮璧、一行內(nèi),顯示不下所有的已浮動元素時分飞,最后一個將換行
- 2悴务、元素一旦浮動起來之后,那么寬度將變成自適應(yīng)(寬度由內(nèi)容決定)
- 3譬猫、元素一旦浮動起來之后讯檐,那么就將變成 類似行內(nèi)塊級元素
- 4、文本删窒,行內(nèi)元素裂垦,行內(nèi)塊元素時采用環(huán)繞的方式來排列的顺囊,是不會被浮動元素壓在底下的肌索,會巧妙的避開浮動元素
浮動的影響?
由于浮動元素會脫離文檔流特碳,所以導(dǎo)致不占據(jù)頁面空間诚亚,所以會對父元素高度帶來一定影響。如果一個元素中包含的元素全部是浮動元素午乓,那么該元素高度將變成0(高度塌陷)
三站宗、清除浮動
方案1
- 直接設(shè)置父元素的高度
- 優(yōu)勢:極其簡單
- 弊端:必須要知道父元素高度是多少
方案2
- 在父元素中,追加空子元素益愈,并設(shè)置其clear屬性為both
- clear是css中專用于清除浮動的屬性
- 作用:清除當(dāng)前元素前面的元素浮動所帶來的影響
取值:- 1梢灭、
none
:默認(rèn)值夷家,不做任何清除浮動的操作 - 2、
left
: 清除前面元素左浮動帶來的影響 - 3敏释、
right
:清除前面元素右浮動帶來的影響 - 4库快、
both
: 清除前面元素所有浮動帶來的影響
- 1梢灭、
- 優(yōu)勢:代碼量少 容易掌握 簡單易懂
- 弊端:會添加許多無意義的空標(biāo)簽,有違結(jié)構(gòu)與表現(xiàn)的分離钥顽,不便于后期的維護(hù)
方案3
- 設(shè)置父元素浮動
- 優(yōu)勢:簡單义屏,代碼量少,沒有結(jié)構(gòu)和語義化問題
- 弊端:對后續(xù)元素會有影響
方案4
- 為父元素設(shè)置overflow屬性
- 取值:hidden 或 auto
- 優(yōu)勢:簡單蜂大,代碼量少
- 弊端:如果有內(nèi)容要溢出顯示(彈出菜單)闽铐,也會被一同隱藏
方案5
- 父元素設(shè)置display:table
- 優(yōu)勢:不影響結(jié)構(gòu)與表現(xiàn)的分離,語義化正確奶浦,代碼量少
- 弊端:盒模型屬性已經(jīng)改變兄墅,會造成其他問題
方案6
使用內(nèi)容生成的方式清除浮動
.clearfix:after {
content:"";
display: block;
clear:both;
}
-
:after
選擇器向選定的元素之后插入內(nèi)容 -
content:""
; 生成內(nèi)容為空 -
display: block
; 生成的元素以塊級元素顯示, -
clear:both
; 清除前面元素浮動帶來的影響 - 相對于空標(biāo)簽閉合浮動的方法
- 優(yōu)勢:不破壞文檔結(jié)構(gòu),沒有副作用
- 弊端:代碼量多
方案7
.cf:before,.cf:after {
content:"";
display:table;
}
.cf:after { clear:both; }
- 優(yōu)勢:不破壞文檔結(jié)構(gòu)澳叉,沒有副作用
- 弊端: 代碼量多
注意:display:table本身無法觸發(fā)BFC察迟,但是它會產(chǎn)生匿名框(anonymous boxes),而匿名框中的display:table-cell可以觸發(fā)BFC耳高,簡單說就是扎瓶,觸發(fā)塊級格式化上下文的是匿名框,而不是display:table泌枪。所以通過display:table和display:table-cell創(chuàng)建的BFC效果是不一樣的(后面會說到BFC)概荷。
CSS2.1 表格模型中的元素,可能不會全部包含在除HTML之外的文檔語言中碌燕。這時误证,那些“丟失”的元素會被模擬出來,從而使得表格模型能夠正常工作修壕。所有的表格元素將會自動在自身周圍生成所需的匿名table對象愈捅,使其符合table/inline-table、table-row慈鸠、table- cell的三層嵌套關(guān)系蓝谨。
疑問
- 為什么會margin邊距重疊?
- overflow:hidden, 語義應(yīng)該是溢出:隱藏青团,按道理說譬巫,子元素浮動了,但依然是在父元素里的督笆,而父元素高度塌陷芦昔,高度為0了,子元素應(yīng)該算是溢出了娃肿,為什么沒有隱藏咕缎,反而撐開了父元素的高度珠十?
- 為什么display:table也能清除浮動,原理是什么凭豪?
三宵睦、頁面渲染規(guī)則(Formatting context)
Formatting context是W3C CSS2.1規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域墅诡,并且有一套渲染規(guī)則壳嚎,它決定了其子元素將如何定位,以及和其他元素的關(guān)系和相互作用末早。
最常見的Formatting context有Block fomatting context
(簡稱BFC
)和Inline formatting context
(簡稱IFC
)烟馅。
CSS2.1 中只有BFC
和IFC
, CSS3中還增加了GFC
和FFC
BFC
BFC(Block formatting context)直譯為”塊級格式化上下文”:。它是一個獨(dú)立的渲染區(qū)域然磷,只有Block-level box參與郑趁, 它規(guī)定了內(nèi)部的Block-level Box如何布局,并且與這個區(qū)域外部毫不相干姿搜。
-
block-level box
寡润,display屬性為block, list-item, table的元素,會生成block-level box舅柜。并且參與block fomatting context梭纹。 -
inline-level box
, display屬性為inline, inline-block, inline-table的元素致份,會生成inline-level box变抽。并且參與inline formatting context。
BFC布局規(guī)則:
- 1氮块、內(nèi)部的Box會在垂直方向绍载,按照從上到下的方式逐個排列。
- 2滔蝉、Box垂直方向的距離由margin決定击儡。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
- 3、每個元素的margin box的左邊蝠引, 與包含塊border box的左邊相接觸(對于從左往右的格式化阳谍,否則相反)。即使存在浮動也是如此立肘。
- 4边坤、BFC的區(qū)域不會與float box重疊。
- 5谅年、BFC就是頁面上的一個隔離的獨(dú)立容器,容器里面的子元素不會影響到外面的元素肮韧。反之也如此融蹂。
- 6旺订、計算BFC的高度時,浮動元素的高度也參與計算
觸發(fā)BFC的條件
- 1超燃、根元素
- 2区拳、float (left,right)
- 3意乓、overflow 除了visible 以外的值(hidden樱调,auto,scroll )
- 4届良、display (table-cell笆凌,table-caption,inline-block)
- 5士葫、position(absolute乞而,fixed)
BFC example
- 1、依據(jù)BFC布局規(guī)則第二條:
Box垂直方向的距離由margin決定慢显。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
注意:發(fā)生重疊后爪模,外邊距的高度等于兩個發(fā)生重疊的外邊距的高度中的較大者
<style>
.top{
width:100px;
height:100px;
background:red;
margin:50px;
}
.bottom{
width:100px;
height:100px;
background:blue;
margin:20px;
}
</style>
<body>
<div class="top">上</div>
<div class="bottom">下</div>
</body>
- 2、依據(jù)BFC布局規(guī)則第三條:
每個元素的margin box的左邊荚藻, 與包含塊border box的左邊相接觸(對于從左往右的格式化屋灌,否則相反)。即使存在浮動也是如此应狱。
我們可以看到声滥,雖然有浮動的元素top,但是bottom的左邊依然與包含塊的左邊相接觸侦香。
<style>
.top{
width:100px;
height:100px;
background:red;
float:left;
}
.bottom{
width:200px;
height:200px;
background:blue;
}
</style>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
- 3落塑、依據(jù)BFC布局規(guī)則第四條:
BFC的區(qū)域不會與float box重疊。
看代碼和效果圖罐韩,可以看出憾赁,這次的代碼比上面的代碼多了一行overflow:hidden;用這行代碼觸發(fā)新的BFC后,由于這個新的BFC不會與浮動的top重疊散吵,所以bottom的位置改變了
<style>
.top{
width:100px;
height:100px;
background:red;
float:left;
}
.bottom{
width:200px;
height:200px;
background:blue;
overflow:hidden;
}
</style>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
- 4龙考、依據(jù)BFC布局規(guī)則第六條:
計算BFC的高度時,浮動元素的高度也參與計算矾睦。
到此我們應(yīng)該是解決了上面的所有疑問了晦款。
<style>
p{
width:100px;
height:100px;
background:red;
float:left;
}
div{
width:200px;
border:1px solid blue;
}
</style>
<body>
<div>
<p></p>
</div>
</body>
當(dāng)div增加 overflow:hidden; 時 效果如下
清除浮動的方式有很多種,但是實(shí)現(xiàn)的原理主要是靠clear屬性和觸發(fā)新的BFC枚冗,通過詳細(xì)的解釋與比較缓溅,最后兩種內(nèi)容生成的方式是比較推薦使用的,如果需要考慮margin重疊的問題赁温,就用方案7坛怪,不考慮就用方案6
- 5淤齐、自適應(yīng)兩欄布局
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
overflow: hidden;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
每個元素的margin box的左邊, 與包含塊border box的左邊相接觸(對于從左往右的格式化,否則相反)。即使存在浮動也是如此袜匿。
因此,雖然存在浮動的元素aslide,但main的左邊依然會與包含塊的左邊相接觸更啄。
根據(jù)BFC布局規(guī)則第四條:
BFC的區(qū)域不會與float box重疊。
我們可以通過通過觸發(fā)main生成BFC, 來實(shí)現(xiàn)自適應(yīng)兩欄布局居灯。
.main { overflow: hidden/auto;}
當(dāng)觸發(fā)main生成BFC后,這個新的BFC不會與浮動的aside重疊祭务。因此會根據(jù)包含塊的寬度,和aside的寬度,自動變窄。效果如下:
參考文獻(xiàn):https://blog.csdn.net/FE_dev/article/details/68954481