粘性定位（相容性ie瀏覽器支援度不好）
position:sticky;
可以看做相對定位和固定定位的結合體
（一般情況下沒有滾動條滑動內容，內容是佔位的，
如果滾動條滑動內容，粘性定位的元素就會有固定定位的效果，方向top才管用）
注意點：
1、 使用的時候需要設定left、top、bottom、right值，才有固定定位固定的效果
2、避免父元素使用overflow屬性
3、相容性不好，pc端做ie相容不考慮用這個
取消定位
position:static
寬度自適應
塊元素不設定寬度或者塊元素設定寬度100%，塊元素的寬度佔滿整個父級的寬度
1、不設定width（塊元素是佔位置，元素型別沒有受影響）
2、width:100% (元素型別受影響，脫離文件流，設定浮動、絕對定位、固定定位)
calc()可以動態計算數值
加+ 減法- 乘法* 除法/
高度自適應
1、盒子的高度由內容撐開
1、不設定高度
2、height:auto;
2、 最小高度 min-height：600px;
如果內容沒有超過600px ，以最小高度為準，如果內容超過最小高度600px，以內容高度為主
如果專案考慮ie6瀏覽器，（ie6瀏覽器不識別min-height ）
相容其他瀏覽器和ie7以上版本瀏覽器 識別的是 min-height
ie6和ie5 識別是height
min-height：600px;
_height:600px;
2、min-height:600px;
height:auto !important;
height:600px;
高度塌陷
父元素設定最小高度或者不設定高度,高度由內容撐開
如果內容不佔位,父元素沒有高,就會出現高度塌陷
(內容浮動不佔位,父元素無法識別)
解決方法
1 給父元素設定overflow:hidden
(overflow:hidden可以出發bfc,是乙個獨立的渲染區域,區域性規則,浮動元素也參與計算.
缺點:內容溢位父元素範圍就會被隱藏
2.在所有浮動元素的最下方,填寫乙個空盒子
給空盒子設定clear:both 讓空盒子把父元素撐開
3.萬能清除法
.clear-fix:after
.clear-fix
:afterie8以上和非ie瀏覽器才支援,zoom:1是為了解決ie的相容問題
4.設定固定高度
高度自適應
子元素的高度由父元素決定
父元素需要有乙個固定高度
子元素 height：100%
如果盒子的高度等於當前螢幕的高度
html，body
.box
一屏網頁的思路
1.讓大盒子的高度等於當前網頁的高度
2.所有網頁結構的高度都用百分比設定
3.盡量精簡結構,清楚百分比的關係,內容移動 盡量水平居中
內容居中或往下移動
第一種: 可以用vertical-align設定垂直居中
第二種:可以用定位設定內容移動
css寬高自適應及高度塌陷解決方法
偽物件選擇符 網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整，這就是pc自適應。自適應的優點 元素自適應在網頁布局中非常重要，它能夠使網頁顯示更靈活，可以適應在不同裝置 不同視窗和不同解析度下顯示。元素寬度設定為100 塊元素寬度預設為100 或者不設定寬...
寬高自適應，高度塌陷，偽物件選擇符
寬高自適應網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整，這就是pc自適應。自適應的優點 元素自適應在網頁布局中非常重要，它能夠使網頁顯示更靈活，可以適應在不同裝置 不同視窗和不同解析度下顯示。寬度自適應元素寬度設定為100 塊元素寬度預設為100 或者不...
寬高自適應 定位 隱藏
若塊級元素寬度不設定，或者設定成100 都是佔據其父級元素的一整行 應用場景 頁面最外層的盒子一般都要佔據螢幕的大小，所以寬度100 一 父元素的高度由子元素撐開 1 高度塌陷 子元素都浮動了，父元素會沒有高度。解決方案 清除浮動 給父元素新增最後乙個子元素 塊級元素 子元素css 缺點 造成不必要...