H5學習之24 CSS定位

2021-07-16 05:37:29 字數 3169 閱讀 9044

html

>

lang=

"en"

>

"eg_smile.gif"

id="image"

/>

class=

"overflow"

>

當乙個容器無法顯示完文字時可以設定滾動條以此能夠檢視完整的文字當乙個容器無法顯示完文字時,可以設定滾動條以此能夠檢視完整的文字當乙個容器無法顯示完文字時,可以設定滾動條以此能夠檢視完整的文字當乙個容器無法顯示完文字時,可以設定滾動條以此能夠檢視完整的文字

aaa"eg_smile.gif"

id="image2"

/>

bbbb

"eg_smile.gif"

id="image3"

/>

具體效果如下:

**解釋如下:

3種定位方式:

相對定位,絕對定位,固定定位。

相對

h1.pos_rel

/*position:relative

相對定位,相對於原位置的位置

,設定偏移量進行偏移。

如果對乙個元素進行相對定位,它將出現在它所在的位置上。然後,可以通過設定垂直或水平位置,讓這個元素

「相對於

」它的起點進行移動。

重點注意,在使用相對定位時,無論是否進行移動,元素仍然佔據原來的空間。因此,移動元素會導致它覆蓋其它框。

left

:500px

原位置在偏移後位置的左邊

500px

,其實也就是把乙個元素往右偏移

500px

,可以為負

*/

絕對

h2.pos_abs

/*position:absolute

絕對定位。

設定為絕對定位的元素框從文件流完全刪除,並相對於其包含塊定位,

包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉,就好像該元素原來不存在一樣。

元素定位後生成乙個塊級框,而不論原來它在正常流中生成何種型別的框。

絕對定位使元素的位置與文件流無關,因此不佔據空間。

這一點與相對定位不同,相對定位實際上被看作普通流定位模型的一部分,因為元素的位置相對於它在普通流中的位置。

絕對定位的元素的位置相對於最近的已定位祖先元素,如果元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊。

對於定位的主要問題是要記住每種定位的意義。所以,現在讓我們複習一下學過的知識吧:相對定位是

「相對於

」元素在文件中的初始位置,

而絕對定位是

「相對於

」最近的已定位祖先元素,如果不存在已定位的祖先元素,那麼

「相對於

」最初的包含塊。

left

與左邊的距離

top與右邊的距離

都設定成

0但是還是沒有貼著,是因為有

margin

,把margin

設定成0

貼合左上角了。

乙個塊級的沒設定大小的文字沒有

padding

絕對定位是把元素固定在頁面內的那個位置,而不是螢幕的某個位置

(並不是相對於螢幕的上線與左線定位,要與

fixed區分)

,固定定位

fixed

是把元素固定在螢幕的某個位置

絕對定位下,頁面滑下來的話可能就看不到

absoloute

的元素了

*/

固定

h2.pos_fixed

/*position:fixed

其實就是固定在螢幕的某個位置

*/

"eg_smile.gif" 

id="image"

/>

#image

/*通過絕對定位來設定的位置

與上邊的絕對定位一樣

可以設定成百分比值,是處於螢幕的哪個百分比的位置

裁剪clip:rect( px px px px );

將裁剪成矩形,第二個第三個值是裁剪後的長寬。裁剪點在左上角。

第乙個值是從

top開始裁剪去掉多少畫素長度。

第二個值是從

left

開始裁剪去掉多少畫素長度

*/

當文字溢位時:

class=

"overflow"

>

當乙個容器無法顯示完文字時可以設定滾動條以此能夠檢視完整的文字當乙個容器無法顯示完文字時,可以設定滾動條以此能夠檢視完整的文字當乙個容器無法顯示完文字時,可以設定滾動條以此能夠檢視完整的文字當乙個容器無法顯示完文字時,可以設定滾動條以此能夠檢視完整的文字

div.overflow

/*overflow:scroll

瀏覽器出現滾動條來處理溢位內容

overflow:auto

讓瀏覽器自動處理溢位的 內容

overflow:hidden

隱藏溢位內容

*/

位置及遮擋問題

aaa

"eg_smile.gif"

id="image2"

/>

bbbb

"eg_smile.gif"

id="image3"

/>

#image2

/*vertival-align: top

一段文字裡如果有的話,這個是設定文字的位置,雖然是的樣式,但是更改之後改變的是文字的位置

bottom

就是文字到了下邊,預設是這個

.*/#image3 /*設

image3

為相對位置,並且向上移動

100px

,形成遮擋

image2

z-index:-1

把image3

的優先順序設定成

-1,預設是

0.所以會變成

image3

遮擋image2

*/

H5學習筆記(十)定位

定位指的就是將指定的元素擺放到頁面的任意位置 通過定位可以任意的擺放元素 通過position屬性來設定元素的定位 可選值static 預設值,元素沒有開啟定位 relative 開啟元素的相對定位 absolute 開啟元素的絕對定位 fixed 開啟元素的固定定位 也是絕對定位的一種 當元素的p...

H5浮動與定位

h5的奇妙之處就在於它的變幻莫測,接下來我想談一下我對定位浮動的認知。什麼是浮動 首先要了解什麼是浮動 脫離文件流,預設在當前的行對既定的方向進行移動 預設橫排 用浮動可以解決什麼問題 使用浮動之前我們要想明白浮動都可以解決什麼問題 比如我們要放一排的div或是img,我們故可以通過除錯margin...

標準h5的定位 哈弗H5車定位是什麼

哈弗h5的車型定位是緊湊型suv。suv車型一般分為五個等級,按照由高到低的順序排列依次是 全尺寸suv 中大型suv 中型suv 緊湊型suv 小型suv。像是造車平台 汽車軸距 車身尺寸 車輛配置 汽車動力等等,都會影響車輛的等級。截至2019年11月22日,哈弗h5在售的最新車型是2018款,...