1. 盒子模型
margin：外邊距/邊界
border：邊框
padding：內邊距/填充
以上屬性又分上下左右四個方向。
元素實際佔位尺寸 = 元素尺寸+padding+邊框寬度
2. 最基礎的頁面布局結構：
html的三種布局
流動布局：
特點：塊狀（block）元素都會在所包含元素內自上而下按順序垂直延伸分布，因為在預設狀態下塊狀寬度都為100%
內聯（inline）元素都會在所處的包含元素內從左到右水平分布
浮動布局：
特點：預設布局下，塊狀元素這麼霸道都是獨佔一行，如果現在我們想讓兩個塊狀元素併排顯示，就需要用float來實現
層模型：
特點：如果我想要乙個div在另乙個div上面，我們就需要使用絕對定位來完成，層模型的三種定位方式relative,absolute,fixed
absolute
需要設定position：absolute
然後使用left，right，top，bottom屬性相隨與其最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果沒有這樣的包含塊，則相對於body元素
relative
如果想為元素設定層模型中的相對定位，需要設定position：relative（表示相對定位）
它通過left，right，top，bottom屬性確定元素在正常文件流中的偏移位置
相對位置的完成過程是首先按static（float）方式生成乙個元素，然後相對於以前的位置移動，移動的方向和幅度由left，right，top，bottom屬性確定，偏移前的位置保留不動。
其他的元素的位置則不會受該元素的影響發生位置改變來彌補它偏離後剩下的空隙。
fixed
固定定位，與absolute定位型別類似，但它相對移動的座標是檢視本身。
由於檢視本身是固定的，不會隨瀏覽器視窗的滾動條滾動而變化，因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，不會受文件流動影響。
這與background-attachment：fixed；屬性功能相同
前端BFC布局學習
bfc，全稱為 block formatting context 按照我的理解是我們在某一條件下會觸發bfc布局，會產生一定的效果。block formatting contexts翻譯為 塊級元素格式化上下文。它決定了塊級元素如何對它的內容進行布局，以及與其他元素的關係和相互作用。其中塊級元素可以...
前端flex布局學習筆記
flex布局，即為彈性布局，其為盒模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。eg box display flex 行內元素也可以使用flex布局。注意 設定flex布局後，子元素的float clear和vertical align屬性將會失效。採用flex布局 元素 稱為fle...
前端布局之Flex布局
傳統布局方式基於盒模型，依賴display屬性 position屬性 float屬性。由於傳統布局一些操作複雜，2009年w3c提出了flex布局，可以簡便 響應式的實現各種布局，並且能夠相容所有瀏覽器。區別於傳統布局的 盒子 在flex布局中稱為 flex容器 flex container 其所有...