一.文檔流 1.概念 2.BFC(Block formatting context) 3.BFC規則 內部的Box會在垂直方向,一個接一個地放置。 Box自身垂直方向的位置由margin top決定，屬於同一個BFC的兩個相鄰Box的margin會發生重疊。 Box自身水平方向的位置由margin左 ...
一.文檔流
1.概念
normal flow(普通流,常規流)將窗體自上而下分成一行一行，塊級元素從上至下、行內元素在每行中從左至右的順序依次排放元素。一個連續具有邏輯上下的頁面整體,出現在頁面中的顯示內容,均可以理解為文檔流中。2.BFC(Block formatting context)
塊級格式化上下文，它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。3.BFC規則
- 內部的Box會在垂直方向,一個接一個地放置。
- Box自身垂直方向的位置由margin-top決定，屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
- Box自身水平方向的位置由margin左或右決定(具體已經參照BFC方位)，屬於同一個BFC的兩個相鄰Box的margin會發生疊加。
二.浮動佈局
1.概念
通過讓元素浮動,可以使元素在水平上左右移動,再通過margin屬性調整位置,就是使當前元素脫離文檔流,相當於浮動起來一樣,浮動的框可以左右移動,直至它的外邊緣遇到包含框或另一個浮動框的邊緣。2.基本語法
float:left | right3.浮動的印象
- 對附近的元素佈局造成改變,使得佈局混亂。
- 因為i浮動元素脫離了文檔流,會出現一種高度坍塌的現象:原來的父容器高度是當前元素撐開的,但是當該元素浮動後,脫離文檔流浮動起來,那父容器的高度就會坍塌(前提是父容器高度小於該浮動元素)
4.清浮動
目的:對父級所在容器中的Block-level Box佈局不產生影響
原理:再浮動佈局情況下,讓父級獲得合適的高度1.浮動的父級設置高度
sup{
height:npx;
}
2.浮動的父級設置overflow
sup{
overflow:hidden;
}
3.浮動的父級兄弟設置clear
brother{
clear: left | right | both;
}
4.浮動的父級偽類清浮動
sup:after{
content:"";
display:block;
clear:both;
}三.流式佈局
1.概念
流式佈局是頁面元素的寬度按照解析度進行適配調整,但整體佈局不變.就是佈局脫離固定值限制,可以根據頁面情況改變相應發生改變。2.流式佈局相關操作
1.百分比設置 %
如:width: 90%;
2.視窗比設置 vw|vh
如:width: 90vw;
3.字體控制 em|rem
em為相對大小,大小為最近設置字體大小的父級規定的字體大小
rem為html字體大小四.定位佈局
1.概念
定位佈局的目的:讓目標標簽在指定參考系下任意佈局2.基本語法
position:static | relative | absolute | fixed- static:靜態定位,預設定位.
- relative:相對定位,未脫離文檔流,以自身原有位置作為參考坐標系.
- absolute:絕對定位,完全脫離文檔流,以最近定位父級作為參考坐標系.
- fixed:固定定位,完全脫離文檔流,以文檔視窗作為參考坐標系.
定位開啟後,四個定位方位便會開啟,且四個方位均參與佈局,如果發生衝突,左右取左,上下取上
