day15
1、 固定定位
position:fixed; 固定定位
a:參照物：瀏覽器視窗；
b:不佔據空間，脫離布局流；
讓乙個元素在瀏覽器視窗左右上下居中？
第一種方法：
position:fixed;
left:50%;right:50%;
margin-left:-元素寬度的一半；
margin-top:-元素高度的一半；
第二種方法：
position:fixed;
left:0;right:0;
top:0;bottom:0;
margin:auto;
2、 粘性定位
position:sitcky;
執行邏輯：
預設情況下：當瀏覽器視窗滾動條不滾動，當前元素沒有超出整個瀏覽器視窗的時候；執行position:relative; 如果元素超出當前視窗，則執行position:fixed;
3、 定位總結
position:
static 靜態定位
absolute 絕對定位
relative 相對定位
sticky 粘性定位
脫離布局流的定位：
position:absolute;
position:fixed;
注：如果塊狀元素沒有設定寬度的時候；新增position:absolute; / positon:fixed;出現寬度被內容撐開。思路：版心區域作為參照物
banner，絕對定位，left:50%; （讓最左側和版心中心線對齊）
：margin-left:-寬度的一半；
5、 輪播圖的結構：
實現方法邏輯：
輪播圖移動不是，而是包含多張的整個盒子；
給盒子設定overflow-x:hidden; 超出顯示區域的隱藏；
通過賦予盒子定位屬性，實現的移動；
輪播按鈕的設定：
按鈕設定半透明狀態；
通過定位屬性給按鈕定位；
注意：按鈕的定位以要顯示區域的父級盒子為參照物，和盒子同級；不可以實際盒子為參照物；
6、 錨點
錨點：超連結的一種：
作用：在同乙個頁面中，實現不同位置的跳轉。
描述：讓錨點繫結的id名稱的元素回到瀏覽器視窗的最頂端；
實現方法：
《標籤 id=」」>
7、 pc端 寬度和高度的自適應問題
寬度：預設情況下塊狀元素：
當width不設定的時候，或者width:100%;當前元素的寬跟隨父元素的變化而變化。
高度：高度自適應的第一種情況：
當元素height不去設定或者是設定為height:auto; 元素的高度是被內容撐開的。（此種情況下，當內容極少或者沒有內容的時候，高度很小，不符合設計要求）
高度自適應的第二種情況：
需求1：當內容增加的時候，內容能把容器撐開；
需求2：當內容極少或者沒有內容的時候，讓容器保持乙個最小高度。
實現方法：
設定最小高度：
min-height:;
可以滿足需求1和需求2的要求。
拓展（了解即可）
min-height ie的低版本不支援（ie8以下版本）。
但是：ie6預設的把height解析成最小高度。
寬高自適應 定位 隱藏
若塊級元素寬度不設定，或者設定成100 都是佔據其父級元素的一整行 應用場景 頁面最外層的盒子一般都要佔據螢幕的大小，所以寬度100 一 父元素的高度由子元素撐開 1 高度塌陷 子元素都浮動了，父元素會沒有高度。解決方案 清除浮動 給父元素新增最後乙個子元素 塊級元素 子元素css 缺點 造成不必要...
CSS 實現寬高自適應問題
網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整，這就是pc端自適應。自適應的優點 元素自適應在網頁布局中非常重要，它能夠使網頁顯示更靈活，可以適應在不同裝置 不同視窗和不同解析度下顯示。相對視窗和父元素的自適應寫法 寬度 當塊狀元素不寫寬度的時候，預設的寬...
粘性定位 寬高自適應 高度塌陷
粘性定位 相容性ie瀏覽器支援度不好 position sticky 可以看做相對定位和固定定位的結合體 一般情況下沒有滾動條滑動內容，內容是佔位的，如果滾動條滑動內容，粘性定位的元素就會有固定定位的效果，方向top才管用 注意點 1 使用的時候需要設定left top bottom right值，...