HTML與CSS中的定位個人分享

SillyMonkey 發布于2019-08-29 16:30 / 2171人閱讀

摘要：定位默認值幾乎不用了解就可以絕對定位不為元素預留空間脫離文檔流如果當前元素的父級元素是元素的話是相對于當前頁面的定位如果當前元素的父級不是元素的話父級元素沒有開啟定位則是相對于頁面的定位如果當前元素的父級不是元素的話父級元素開啟定位

定位

static - 默認值 (幾乎不用,了解就可以)

absolute - 絕對定位,不為元素預留空間,脫離文檔流:

如果當前元素的父級元素是元素的話 -> 是相對于當前頁面的定位

如果當前元素的父級不是元素的話,父級元素沒有開啟定位 -> 則是相對于頁面的定位

如果當前元素的父級不是元素的話,父級元素開啟定位 -> 則是相對于父級元素定位

fixed - 固定定位,不為元素預留空間:

是相對于窗口來定位元素位置,脫離文檔流

relative - 相對定位,不脫離文檔流

相對定位是相對于自身元素原來的位置的定位

定位的方式解析圖:

堆疊

z-index屬性值大的在上方,小的在下方,就是所z-index屬性值大的覆蓋小的

堆疊分析圖:

繼承于層疊 繼承

繼承就是父級元素的屬性,子級元素使用可以不用設置直接使用

注意: CSS屬性中不是所用屬性都可以繼承

CSS的樣式屬性:

可繼承的屬性 - 指定元素的樣式,同時作用其后代元素

不可繼承的屬性 - 只能作用在指定的元素

備注: 繼承中有一個inherit值 - 就是是繼承于祖先元素屬性的意思,當子級元素的屬性設置inherit值時代表繼承父級元素使用的屬性值.

一花一世界,一葉一孤城

繼承于層疊分析圖

層疊

就是選擇器的優先級別,當為某個選擇器設置 !important 時該選擇器優先級別最大

注意: 為某個選擇器設置!important時會打亂原本選擇器的優先級別的規則可能會影響整個頁面布局,所以能不用就不用,知道有這個東西就行

GPU云服務器云服務器 css與html html與css html與css區別 css與html的區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113793.html

HTML與CSS中的定位個人分享

摘要：定位默認值幾乎不用了解就可以絕對定位不為元素預留空間脫離文檔流如果當前元素的父級元素是元素的話是相對于當前頁面的定位如果當前元素的父級不是元素的話父級元素沒有開啟定位則是相對于頁面的定位如果當前元素的父級不是元素的話父級元素開啟定位定位 static - 默認值 (幾乎不用,了解就可以) absolute - 絕對定位,不為元素預留空間,脫離文檔流: 如果當前元素的父級元素是元素...

sihai 2019-08-02 16:31 評論0 收藏0
HTML與CSS中的,鏈接與圖像個人分享

摘要：鏈接與圖像鏈接元素元素表示鏈接元素作用從當前頁面跳轉到指定頁面屬性設置指定跳轉頁面的路徑路徑分類相對路徑相對于當前頁面的路徑絕對路徑訪問的路徑地址不變化示例代碼相對路徑的鏈接文本陰影案例他是鏈接絕對路徑的鏈接他也鏈接與圖像鏈接元素 < a >元素 - 表示鏈接元素作用 - 從當前html頁面跳轉到指定html頁面屬性 href - 設置指定跳轉html頁面的路徑 ...

cocopeak 2019-08-29 16:34 評論0 收藏0
HTML與CSS中的,鏈接與圖像個人分享

摘要：鏈接與圖像鏈接元素元素表示鏈接元素作用從當前頁面跳轉到指定頁面屬性設置指定跳轉頁面的路徑路徑分類相對路徑相對于當前頁面的路徑絕對路徑訪問的路徑地址不變化示例代碼相對路徑的鏈接文本陰影案例他是鏈接絕對路徑的鏈接他也鏈接與圖像鏈接元素 < a >元素 - 表示鏈接元素作用 - 從當前html頁面跳轉到指定html頁面屬性 href - 設置指定跳轉html頁面的路徑 ...

elisa.yang 2019-08-02 11:21 評論0 收藏0
css基礎系列

摘要：盒子模型邊框，外邊距，內部距，內容，寬度。盒子模型和標準盒子模型行內塊元素，元素呈現為具有相依特性元素不會被顯示。文字基線屬性設置元素中文本行高語法長度值百分比瀏覽器有默認的行高，不同瀏覽器默認行高不一樣。盒子模型： border邊框，margin外邊距，padding內部距，content內容，width寬度。高度： height: 長度值|百分比|auto 最大高度: m...

SexySix 2019-04-22 16:12 評論0 收藏0
css基礎系列

摘要：盒子模型和標準盒子模型行內塊元素，元素呈現為具有相依特性元素不會被顯示。文字基線屬性設置元素中文本行高語法長度值百分比瀏覽器有默認的行高，不同瀏覽器默認行高不一樣。盒子模型盒子模型的概念高和寬的設置邊框的設置內邊距的設置外邊距的設置盒子的計算元素顯示的方式盒子模型： border邊框，margin外邊距，padding內部距，content內容，width寬度。 ...

shiina 2019-04-23 11:40 評論0 收藏0