css定位 錨點 pc端寬高自適應總結

2021-10-04 13:46:33 字數 1722 閱讀 8323

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值,...