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;出現寬度被內容撐開。
4、 超出版心的banner的實現方法
思路:版心區域作為參照物
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值,...