布局
1.正常文件流 主要是 一行一行
2.浮動布局 浮動流 主要解決 頁面模組 水平排列
3.定位 主要解決重疊
一、固定定位
position：fixed；
1.完全脫離文件流，不佔據空間
2.沒有設定寬高元素大小會變成內容實際大小來決定，設定width和height就由width和height決定
3.以瀏覽器的可視視窗作為參考點，一直固定在瀏覽器可視視窗的某一位置**
二、絕對定位
position：absolute；
1.絕對定位完全脫離文件流，不佔據空間
2…沒有設定寬高元素大小會變成內容實際大小來決定，設定width和height就由width和height決定
3.如果所有父元素沒有定位，就由body的（0,0）作為參考點，如果有定位就以最近的乙個有定位的父元素作為參考點
三、相對定位四、絕對定位和相對定位
1.在給子元素設定絕對定位的時候，需要給父元素設定相對定位，如果給父元素設定絕對定位會導致父元素的脫離文件流，影響父元素的兄弟元素
2.一般情況下都是給子元素設定絕對定位，給父元素設定相對定位（父相子絕）
五、定位層級
1.有定位的元素層級高『，誰有定位，誰的層級高
2.定位層級跟元素的書寫順序有關，誰後定位，誰的層級高
3.z-indx 改變層級 取值範圍：-1-9999 數值越大，層級越高 沒有設定數值，預設為0
3.如果有兩個定位的數值相同，那麼依舊依照誰後定位，誰的層級高
4.只有有定位才會有層級
六、粘性定位
position：sticky；
top：50px；
通過粘性定位讓滾動條滾動到某一位置的時候停止
sticky相容性不行，更好的還是使用進行滾動條的監聽
七、display
元素相互轉換的方式
』display：inline； 轉換為行內元素特性；
display：block； 轉換為塊級元素特性；
display：inline-block；把元素轉換為行內、塊級元素特性；
display：list-item；把元素轉換我列表；
display：none；把元素隱藏不顯示，不佔據空間，脫離文件劉
應用：實現滑鼠移入顯示
.xx.xx:hover .xx
八、元素隱藏顯示的多種方式
1.把元素隱藏不顯示，不佔據文件流，脫離文件流 display：none；
2.設定透明度，其取值在0-1之間，並且不會脫離文件流 opacity：0.5；
3.可見狀態，不會脫離文件流## 標題 不可見：visibility：hidden；可見：visibility：visible；
元素居中問題詳解
子元素水平居中于父元素中內容區域 1 width margin par chi2 行內元素居中 par chi3 定位 par chi4 table par chi5 flex par chi子元素垂直居中 1 定位 par chi2 flex par chi3 table par chi水平垂直居...
塊級元素垂直居中問題
1.寬高固定 絕對定位 樣式 box aaa 當然，也可以將margin left 50px margin top 50px 換成 transform translate 50 50 html 2.寬高不固定 絕對定位 aaa 3.after偽類實現垂直居中對齊 樣式 demo demo after...
css中DIV元素居中問題
css中div元素居中問題和 css部分 div元素居中 設有父div元素.center以及子div元素a,b 僅讓a,b在父元素內行居中 margin auto 我的實現如下圖 有三種方法可以讓子div元素在父div元素中水平與垂直居中 1.使用絕對布局 father son2.使用table c...