每個元素都有乙個預設的display屬性，但我們可以隨時重寫他。
元素分為塊級元素和內聯(內聯級)元素，
（1）塊級元素的display預設為block, 樣式為新開一行並盡量撐滿容器，能夠設定尺寸如寬度和高度
（2）內聯元素的display 預設為 inline, 樣式為嵌入在行內，不換行也不能設定尺寸
（3）一些特殊元素的display 預設為none如script，樣式為在不刪除元素的情況下隱藏元素並脫離文件流
（注：display:none 隱藏元素時不會佔據原來的空間，區別於visibility:hidden ,後者沒有脫離文件流是佔據空間的）
（4） 一些特殊元素的display 預設為list-item如 標籤，
（4） 一些特殊元素的display 預設為table如標籤，
（未完……）
（1）預設屬性值為none， 即不浮動
（2）設定為left 是向左浮動
（3）設定為right 是向右浮動
（4）設定為inherit 是繼承父元素的浮動屬性
float能夠使元素脫離文件流，但不脫離文字流，能夠實現文字浮動在周圍，這只因為設定float的元素在其容器內的高度為0，當設定float的元素高度大於其容器會溢位。
（1）left為清除左浮動
（2）right為清除右浮動
（3）both為清除全部浮動
清除浮動的方法：
（1）當浮動元素的高度大於其容器而溢位時，在其容器上設定overflow: auto 來解決元素溢位容器塌陷的問題。（為滿足ie6，設定成 overflow: auto; 和zoom: 1;）
（1）position屬性預設值為static，除了預設的static之外，設定其他任意乙個屬性值都標記為 「positioned」，此外還要設定top/bottom/left/right 其中某乙個或幾個屬性（如設定top和left）才能實現效果，否則不會變化。
（2）設定relative 屬性值，效果為：元素相對改變前的其本身的位置進行偏移，偏移量由top/bottom/left/right決定，且其他元素不會因為他的改變而改變（改變前的其本身的位置還會保留）。
（3）設定 absolute屬性值，效果為：元素相對最近的「positioned」祖先元素進行偏移，若沒有最近的「positioned」元素，則相對body進行偏移。其他元素的位置會被該元素影響（改變前的其本身的位置不保留）。
（4）設定 fixed 屬性值，效果為：元素相對視窗進行定位，即脫離文件流不受其他元素影響，偏移量由top/bottom/left/right決定，且改變前的其本身的位置不會保留，其他元素會佔據其原有的位置。（注：水平或豎直的偏移量若不設定則預設原來的位置）據說fixed對移動瀏覽器不友好，解決辦法：
（5）sticky是css3新增的屬性值，使用top/bottom/left/right設定目標區域，若在目標區域則相當於relative，滑動到目標區域以外則相當於fixed，不脫離文件流，（改變前的其本身的位置還會保留）
屬性值 relative / absolute / fixed造成了元素的層疊，此時可以設定z-index改變層疊順序（只有positioned屬性值可以）
塊級元素預設盡量撐滿容器，設定width可以調節他的寬度，此時設定該元素的左右外邊距 margin為auto時，
若元素寬度小於容器寬度，則兩邊間距均勻平分，元素在容器內水平居中；
若元素寬度大於容器寬度，則會出現水平滾動條來容納頁面。此時將width換成max-width即可解決。
詳情見盒模型
頁面的尺寸計算如下：
預設頁面的寬度 = width + padding + border-width + margin, 即width不包含padding和boder-width
可以通過設定box-sizing屬性來改變寬度計算，box-sizing: content-box / border-box / padding-box
（1）預設屬性值為content-box，預設頁面的寬度 = width + padding + border-width + margin, 即width不包含padding和boder-width
（2）border-box 頁面寬度 = width + margin 即width包含padding和border-width
（3）padding-box 頁面寬度 = width + border-width + margin 即width包含padding 不包含border-width （注: padding-box 只有firefox 中實現了，但在firefox50中刪除了，一般最好不要用）
由於該屬性比較新，為了相容，最好設定成以下：
*（1）行內元素 text-align: center
（2）塊級元素 margin ：0 auto
（3）對該元素 display : inline-block 對其父元素 text-align : center
優點：相容性好
缺點：子元素的文字也居中，可在子元素設定 text-align:left 還原
（4）對該元素 margin ：0 auto 對其子元素 display : table
優點：只設定了其子元素
缺點：不相容ie6、ie7，把子元素換成
（5）對其父元素設定 display : relative 對該元素設定 position:absolute，left:50%，transform:translatex(-50%)
優點：對其他元素沒有影響
缺點：transform是css3的內容，相容性不太好，要加字首
（6）對其父設定display ：flex 對該元素設定 justify-content ：center
優點：只設定其父
缺點：flex布局低版本（ie6,7,8）不支援
2.垂直居中
（1）已知高度的文字 line-height : height
（未完）
2.1 float + margin（左定寬，右自適應）
（1）float:left + margin-left （margin把浮動的位置空出來）
（2）position:absolute + margin-left
（3）float:left ，margin-right + float:left ，負margin
該方法同雙飛翼，使用左浮動和左欄的右邊距先鋪滿父元素，然後講右欄設定負的margin放在左margin的位置
（4）float + bfc
（1）position:absolute + position:absolute +position:absolute
注意：其父元素position：relative
（2）position:absolute + margin +position:absolute
注意：其父元素position：relative
（3）float:left + margin + float:right
注意div順序為左float，右float，中margin ，若左中右，則右float會被擠到下一行，並且其父元素要清除浮動防止高度塌陷
（4）聖杯布局和雙飛翼布局（三個float:left）
乙個講解簡潔清楚的文章：
其中的margin-left:-100% 中，100%是相對父元素的，向左移動100%個父元素，同類margin-left：-150px是向左移動150px
（5）inline-block布局
注意事項：
（6）table
其父元素設定display:table ，三欄設定display:table-cell
（7）flex
其父元素設定display:flex
（8）grid
百分比寬度的浮動布局
前端布局之Flex布局
傳統布局方式基於盒模型，依賴display屬性 position屬性 float屬性。由於傳統布局一些操作複雜，2009年w3c提出了flex布局，可以簡便 響應式的實現各種布局，並且能夠相容所有瀏覽器。區別於傳統布局的 盒子 在flex布局中稱為 flex容器 flex container 其所有...
web前端布局之flex布局
總的來說，flex布局的原理通過給父元素新增flex屬性，來控制子元素的位置和排列方式。採用flex布局的元素稱為flex容器。flex容器中存在兩條軸，分別為主軸和側軸，容器中的每個單元稱為flex專案。在容器上可以設定6個屬性 分別為 flex direction flex wrap flex ...
css傳統布局
1 position.1 position relative 相對定位.以自己所在位置為參考點.自己所在位置為 top 0 left 0 設定position relative 後，元素位置不變，而且會佔據自己所在位置.通過設定left,top,這兩個很常用 right,bottom,來改變元素所在...