使用css時，可能會出錯的兩個地方

陸斌發布于2019-08-30 15:55 / 1922人閱讀

摘要：本文主要介紹一下兩個在日常的工作中可能會出錯的地方。注意的百分比取值，總是相對于父元素的高度。例外父代元素中，有元素設置了，則相對于設置了的父元素定位。寫在后面本文總結了平時開發中需要稍微注意一下的，可能會出錯的兩個問題。

本文首發于公眾號：符合預期的CoyPan

寫在前面

css大家都很熟悉了，這里就不多介紹了。本文主要介紹一下兩個在日常的工作中可能會出錯的地方。

margin-top 與 padding-top

這兩個屬性大家都很熟悉了，margin-top表示外部的上邊距，padding-top表示內部的上邊距。

取值可以是一個具體的值或者一個百分比，如：

margin-top: 10px;
margin-top: 10%;

padding-top: 20px;
margin-top: 20%;

當取值為具體的值時，沒有什么好說的。當取值為百分比時，需要特別注意：百分比不是相對于父元素的高度的，而是相對于父元素的寬度的。

w3c標準如下：

直接看例子：

用處：可以用來在頁面中顯示 固定寬高比的圖片。

注意：height、top的百分比取值，總是相對于父元素的高度。

這里提一下，w3cSchool中文站中，關于margtin-top的描述是錯誤的。地址在這里：http://www.w3school.com.cn/css/pr_margin-top.asp

position: fixed

一提到position:fixed，自然而然就會想到：相對于瀏覽器窗口進行定位。

但其實這是不準確的。如果說父元素設置了transform，那么設置了position:fixed的元素將相對于父元素定位，否則，相對于瀏覽器窗口進行定位。

w3c的官方標準如下：

看例子：

給.parent加上transform:translateY(0)以后，

總結

padding-top、margin-top、padding-bottom、margin-bottom取值為百分比時，是相對于父元素的寬度。

position:fixed，相對于瀏覽器窗口定位。例外：父代元素中，有元素設置了transform，則postion:fixed相對于設置了transform的父元素定位。

寫在后面

本文總結了平時css開發中需要稍微注意一下的，可能會出錯的兩個問題。符合預期。

歡迎關注我的公眾號: 符合預期的CoyPan
這里只有干貨，符合你的預期

GPU云服務器云服務器可能不知道地方可能會什么地方會用到云服務器 dns服務器可能發生故障時

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

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

CSS 自定義屬性 - 入門

摘要：變量的函數引用的自定義屬性被稱為變量。為此，可讀性和可維護性是自定義屬性最大的優勢。自定義屬性作用域在中，變量有作用域一說。因此，在選擇器中聲明的自定義屬性，其作用域的范圍是全局范圍，也就是全局作用域。引言 ??CSS語言是一種聲明式語言，不像其他語言有變量、條件和邏輯等特性，因為這個原因，社區中有了各種CSS處理器語言，比如Sass、LESS和Stylus等。這些處理器語言引入了一...

seanlook 2019-08-30 15:44 評論0 收藏0
Web真相: CSS不是真正的編程 | Christian Heilmann

摘要：每隔幾個月就會出現一篇文章表明并不是真正的編程語言。你無需擔心因添加了一行不支持的代碼而出錯，解析器會跳過它不支持的屬性。當遇到錯誤時，解析器會中斷解析并且拋出錯誤信息，而解析器會忽略這些錯誤并繼續解析。每隔幾個月就會出現一篇文章表明：CSS并不是真正的編程語言。以編程語言的標準來說，CSS過于困難。使用這門語言會很有創造性：人們對CSS有一些強烈的情愫。— Dave Rupert...

wind5o 2019-08-02 16:14 評論0 收藏0
Web真相: CSS不是真正的編程 | Christian Heilmann

摘要：每隔幾個月就會出現一篇文章表明并不是真正的編程語言。你無需擔心因添加了一行不支持的代碼而出錯，解析器會跳過它不支持的屬性。當遇到錯誤時，解析器會中斷解析并且拋出錯誤信息，而解析器會忽略這些錯誤并繼續解析。每隔幾個月就會出現一篇文章表明：CSS并不是真正的編程語言。以編程語言的標準來說，CSS過于困難。使用這門語言會很有創造性：人們對CSS有一些強烈的情愫。— Dave Rupert...

vvpale 2019-08-29 18:39 評論0 收藏0
move.js操作CSS3動畫

摘要：是一款簡單的支持動畫的庫，對于對的操作不是很熟悉的人來說，使用提供的方法操作動畫更簡單方便。要想使用提供的方法，首先應在我們的頁面中引入使用操作動畫樣式注意的位置應該在中，并且緊放在的標簽的上一行，放在其他地方將會出錯。 move.js是一款簡單的支持CSS3動畫的JavaScript庫，對于對CSS3的操作不是很熟悉的人來說，使用move.js提供的方法操作CSS3動畫更簡單方便。 ...

novo 2019-08-20 12:30 評論0 收藏0
move.js操作CSS3動畫

摘要：是一款簡單的支持動畫的庫，對于對的操作不是很熟悉的人來說，使用提供的方法操作動畫更簡單方便。要想使用提供的方法，首先應在我們的頁面中引入使用操作動畫樣式注意的位置應該在中，并且緊放在的標簽的上一行，放在其他地方將會出錯。 move.js是一款簡單的支持CSS3動畫的JavaScript庫，對于對CSS3的操作不是很熟悉的人來說，使用move.js提供的方法操作CSS3動畫更簡單方便。 ...

ethernet 2019-08-01 15:58 評論0 收藏0