定位和布局
1·1、視覺格式化模型
1·2、視口
1·2、包含塊
2·1、定位體系概述
常規流（normal flow）
浮動（float）
絕對定位（absolute positioned）
2·2、定位體系判定
position 絕對定位為預設值static
float 浮動預設值為 none
預設情況下，元素為常規流定位
2·3、盒模型和定位體系
定位體系影響盒子模型是因為影響auto值得計算
1，盒模型中的尺寸-%
尺寸是包含塊的百分比
2，盒模型中的尺寸-auto
2·4、常規流
常規流，又叫普通流、文件流、普通文件流 常規流是最常見的而定位體系，所有元素預設狀態下都是常規流定位
盒模型中的auto值
水平方向：常規流盒子水平方向上的尺寸，必須等於包含塊的寬度，如果不行，則強行將marginright設定為 auto
常規流下： 1.盒子在包含塊中水平居中：定寬，左右margin為auto
2.盒子左右伸出包含塊：寬度auto，左右margin為負
margin為auto：0px
height為auto：適應內容的蓋度
2·5、盒子位置
1，盒子在包含塊垂直方向上依次擺放
2，垂直方向上，若兩個外邊距相鄰，則進行合併（摺疊）
彈性布局
乙個盒子，如果將其display屬性設定為flex，該盒子變為彈性盒（彈性容器），該盒子的 所有子元素，自動變為彈性專案。
彈性盒本身按照自身的定位體系排列，彈性布局影響的僅 僅是彈性盒中的彈性專案。
**屬性**
**flex-direction ：更改主軸方向**
row ：行 預設值
row-reverse ：反向 主軸從右向左
column ：列 按主軸從上往下排列
column-reverse ：按主軸從下往上
**justify-content ：更改主軸對其方式**
flex-start：預設值主軸起點一次排列
flex-end： 主軸終點對齊
center： 主軸中線對齊
space-between： 左右專案靠邊，中間平均分布
space-around ：所有專案平均分布
**align-items: 更改側軸對齊方式**
stretch ：預設值 拉伸
flex-start： 側軸起點對齊
flex-end ：側軸終點對齊
flex-center ：側軸中線對齊
**flex-wrap**
wrap （換行）
nowrap （不換行）
align-content
規則：彈性專案寬度自動時，表示適應內容的寬度和高度。margin為自動時，會吸收 彈性容器的剩餘空間。
專案屬性
1預設
0不壓縮
0 預設 不增長
水平居中方式
1.文字水平居中，設定文字所在元素的 text-aline:center;
2.常規流塊盒水平居中，定寬，左右m argin 為 auto
3.將該盒子的父元素設定為彈性盒，同時設定 justify-content: center;
4.設定父元素為彈性盒，將需要居中的元素的左右 margin 設定為 auto 。
垂直居中
1.文字在元素中垂直居中，設定行高為元素高度
2.盒子在包含塊中垂直居中，設定父元素為彈性盒，其側軸對齊方式為居中 align-items： center
3.設定父元素為彈性盒，將需要居中的元素上下 margin 設定為 auto 。
布局和定位
網頁的三種布局 流動模型 flow flow 預設的網頁布局模型。浮動模型 flow 可以讓塊級元素顯示在一行，用到float left right 層模型 layer 層模型有三種形式 a position absolute 這種形式將元素從文件流中拖出，然後用left,right,top,bot...
定位和布局。
一 基本概念 視覺格式化模型 css的一種機制，它規定了頁面中的多個盒子如何布局 視覺格式化模型是一套非常複雜的機制，包含錯綜複雜的css規範 本章的課程從實用的角度出發，僅學習在劃分頁面區域的時候需要的核心知識 由於劃分頁面區域時幾乎都使用的是塊盒，因此，本章仍然只涉及塊盒 視口 一種視覺化的視窗...
css 布局和定位
首先，我們說一下flow，實際上就是從html在上面開始，從上到下沿著元素流逐個顯示。對於塊元素，從上到下布局。對於塊元素中的內聯元素，從左上方流向右下方。對於內聯元素我們需要注意間距問題 1.對於併排放置的兩個內聯元素，中間外邊距不會重疊。所以最終兩個元素中間相差兩個外邊距之和。2.對於上下放置的...