H5學習筆記(十)定位

2021-10-03 07:33:39 字數 1095 閱讀 1641

定位指的就是將指定的元素擺放到頁面的任意位置

通過定位可以任意的擺放元素

通過position屬性來設定元素的定位

可選值static:預設值,元素沒有開啟定位

relative:開啟元素的相對定位

absolute:開啟元素的絕對定位

fixed:開啟元素的固定定位(也是絕對定位的一種)

當元素的position屬性設定為relative時,則開啟了元素的相對定位

1.當開啟了元素的相對定位以後,而不設定偏移量時,元素不會發生任何變化

2.相對定位是相對於元素在文件流中原來的位置進行定位

3.相對定位的元素不會脫離文件流

4.相對定位會使元素提公升乙個層級

5.相對定位不會改變元素的性質,塊還是塊,內聯還是內聯

當開啟了元素的定位(position屬性值是乙個非static的值)時,可以通過left right top bottom四個屬性來設定元素的偏移量

通常偏移量只需要使用兩個就可以對乙個元素進行定位,一般選擇水平方向的乙個偏移量和垂直方向的偏移量來為乙個元素進行定位

.box
當position屬性值設定為absolute時,則開啟了元素的絕對定位

1.開啟絕對定位,會使元素脫離文件流

2.開啟絕對定位以後,如果不設定偏移量,則元素的位置不會發生變化

3.絕對定位是相對於離他最近的開啟了定位的祖先元素進行定位的(一般情況,開啟了子元素的絕對定位都會同時開啟父元素的相對定位)

如果所有的祖先元素都沒有開啟定位,則會相對於瀏覽器視窗進行定位

4.絕對定位會使元素提公升乙個層級

5.絕對定位會改變元素的性質,內聯元素變成塊元素,塊元素的寬度和高度預設都被內容撐開

.box
當元素的position屬性設定fixed時,則開啟了元素的固定定位

固定定位也是一種絕對定位,它的大部分特點都和絕對定位一樣不同的是:

ie6不支援固定定位

.box
如果定位元素的層級是一樣,則下邊的元素會蓋住上邊的

.box

H5 學習筆記3

html標籤 表單 input標籤 屬性 type text文字框 password密碼框 radio單選框 checkbox多選框 button按鈕 reset重置 submit提交 select標籤 屬性 option 下來框 textarea標籤 文字域 button標籤 作用範圍比較廣 fo...

H5學習筆記(六)

1 複雜選擇器 1 兄弟選擇器 兄弟 具備相同父元素的一組元素稱為兄弟元素 1 相鄰兄弟選擇器 1 什麼是相鄰兄弟選擇器 匹配指定元素的相鄰兄弟元素 2 語法 結合符 選擇器1 選擇器2 2 通用兄弟選擇器 1 什麼是通用兄弟選擇器 匹配指定元素下面所有的兄弟選擇器的元素 2 語法 結合符 選擇器1...

h5學習筆記 Table

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!編寫乙個 作為練習。當中有個比較重要的樣式在學習過程中遇到,border collapse collapse 能夠去除雙重的邊框。table可以合併單元格所以 對td屬性設定 colspan 2 則代表可以設定單元格。table 當中thead,t...