關於定位：
position：relative;相對定位
position:absolute;絕對定位
定位口訣：子絕父相（兒子用絕對定位，父親用相對定位，但這是相對的，不是絕對的，視情況而定）
絕對定位有四個值：top right bottom left;
用了相對定位的地方依然占有空間
用了絕對定位的地方不占有空間
如果子屬性用了絕對定位，父屬性沒有用相對定位，子屬性就會以瀏覽器為相對物進行定位。多個屬性同時與乙個屬性相對，且在同一直線上，z-index:數字；數字越大越優先顯示。絕對定位使元素脫離文件流，因此不佔據空間。普通文件流中元素的布局就像絕對定位的元素不存在時一樣。（因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其他元素並可以通過z-index來控制它層級次序。z-index的值越高，它顯示的越在上層。）關於定位的是：position:relative | absolute | static | fixed；static(靜態) 沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。 relative(相對定位) 物件不可層疊、不脫離文件流，參考自身靜態位置通過 top,bottom,left,right 定位，並且可以通過z-index進行層次分級。absolute(絕對定位) 脫離文件流，通過top, bottom, left, right 定位。選取其最近乙個最有定位設定的父級物件進行絕對定位，如果物件的父級沒有設定定位屬性，absolute元素將以body座標原點進行定位，可以通過z-index進行層次分級。fixed（固定定位） 這裡所固定的參照對像是可視視窗而並非是body或是父級元素。可通過z-index進行層次分級。 注：css中定位的層疊分級：z-index: auto | namber;auto 遵從其父物件的定位；namber 無單位的整數值。可為負數
網頁可以看成由乙個個"盒子"組成，
div+css布局中主要css屬性介紹：margin：margin屬性用於設定兩個元素之間的距離，外邊距/邊界。
border：border屬性用於設定邊框。
padding:：padding屬性用於設定乙個元素的邊框與其內容的距離，內邊距/填充。
float：float屬性是div+css布局中最基本也是最常用的屬性，用於實現多列功能，
我們知道標籤預設一行只能顯示乙個，而使用float屬性可以實現一行顯示多個
div的功能，最直接解釋方法就是能實現**布局的多列功能。
清除一下浮動，否則上面的布局會影響到下面。
盒子層次關係：第1層：盒子的邊框(border)，
第2層：元素的內容(content)、內邊距(padding)
第3層：背景圖(background-image)
第4層：背景色(background-color)
第5層：盒子的外邊距(margin)
從這個層次關係中可以看出，當同時設定背景圖和背景色時，背景圖將在背景色的上方顯示。
水平居中包含兩種情況：塊級元素的水平居中：margin:0px auto;
文字內容的水平居中：text-align: center;
垂直居中：常見的單行文字的垂直居中可設定文字所在行的height與行高樣式屬性一致，
浮動屬性：理解浮動屬性首先要搞清楚，什麼是文件流？
文件流：瀏覽器根據元素在html文件中出現的順序，從左向右，從上到下依次排列
浮動屬性是css中的定位屬性，用法如下：float: 浮動方向(left、right、none);
left為左浮動、right為右浮動、none是預設值表示不浮動，設定元素的浮動，該元素將脫離文件流，向左或向右移動直到它的外邊距碰到父元素的邊框或另乙個浮動元素的邊框為止。clear只對塊級元素有效，表示如果前乙個元素存在左浮動或右浮動，則換行clear屬性的取值：rigth、left、both、none
對於盒子寬度高度的計算：盒子的寬度=預設的寬度+邊框的寬度+外邊距+內邊距
盒子的高度=預設的高度+邊框的高度+外邊距+內邊距
在實際布局中想減少因為設定的邊框，外邊距，內邊距造成的預設寬度、高度的增加，可以增加一條css樣式：box-sizing:border-box;
CSS 浮動布局與定位布局
布局常用的方法 用float設計浮動布局 float預設值為none,可根據頁面需要設定為左浮動left，或右浮動right 瀏覽器中效果 因為 div 是區塊元素，每個 div 獨佔一行，要想讓三個 div 在同一行裡顯示，就需要給三個子元素設定浮動，但浮動會使元素脫離文件流，父元素高度崩塌，所以...
CSS布局與定位（2）
left right父級元素新增clearfix content left middle right塊級元素，設定固定寬度，左右margin等於auto box對塊級的父級使用，能讓內部的匿名行盒 文字 行內元素 span inline block元素在父親裡水平居中 container1 flex...
關於相對定位與絕對定位
1.相對定位 相對自身正常位置的偏移 position relative 1 top 10px left 10px 2 bottom 10px right 10px 兩種情況如下所示 綠色塊狀為初始正常位置，橙色指的是給它相對定義後的位置 2.絕對定位 指相對于父元素的四個方向 top,left，r...