資訊專欄INFORMATION COLUMN
摘要：本文主要介紹一下兩個在日常的工作中可能會出錯的地方。注意的百分比取值，總是相對于父元素的高度。例外父代元素中，有元素設(shè)置了，則相對于設(shè)置了的父元素定位。寫在后面本文總結(jié)了平時(shí)開發(fā)中需要稍微注意一下的，可能會出錯的兩個問題。
本文首發(fā)于公眾號：符合預(yù)期的CoyPan寫在前面
css大家都很熟悉了，這里就不多介紹了。本文主要介紹一下兩個在日常的工作中可能會出錯的地方。
margin-top 與 padding-top這兩個屬性大家都很熟悉了，margin-top表示外部的上邊距，padding-top表示內(nèi)部的上邊距。
取值可以是一個具體的值或者一個百分比，如：
margin-top: 10px; margin-top: 10%; padding-top: 20px; margin-top: 20%;
當(dāng)取值為具體的值時(shí)，沒有什么好說的。當(dāng)取值為百分比時(shí)，需要特別注意：百分比不是相對于父元素的高度的，而是相對于父元素的寬度的。
w3c標(biāo)準(zhǔn)如下：
直接看例子：
用處：可以用來在頁面中顯示 固定寬高比的圖片。
注意：height、top的百分比取值，總是相對于父元素的高度。
這里提一下，w3cSchool中文站中，關(guān)于margtin-top的描述是錯誤的。地址在這里：http://www.w3school.com.cn/css/pr_margin-top.asp
position: fixed一提到position:fixed，自然而然就會想到：相對于瀏覽器窗口進(jìn)行定位。
但其實(shí)這是不準(zhǔn)確的。如果說父元素設(shè)置了transform，那么設(shè)置了position:fixed的元素將相對于父元素定位，否則，相對于瀏覽器窗口進(jìn)行定位。
w3c的官方標(biāo)準(zhǔn)如下：
看例子：
給.parent加上transform:translateY(0)以后，
總結(jié)padding-top、margin-top、padding-bottom、margin-bottom取值為百分比時(shí)，是相對于父元素的寬度。
position:fixed，相對于瀏覽器窗口定位。例外：父代元素中，有元素設(shè)置了transform，則postion:fixed相對于設(shè)置了transform的父元素定位。
寫在后面本文總結(jié)了平時(shí)css開發(fā)中需要稍微注意一下的，可能會出錯的兩個問題。符合預(yù)期。
歡迎關(guān)注我的公眾號: 符合預(yù)期的CoyPan
這里只有干貨，符合你的預(yù)期
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117260.html
摘要：變量的函數(shù)引用的自定義屬性被稱為變量。為此，可讀性和可維護(hù)性是自定義屬性最大的優(yōu)勢。自定義屬性作用域在中，變量有作用域一說。因此，在選擇器中聲明的自定義屬性，其作用域的范圍是全局范圍，也就是全局作用域。 引言 ??CSS語言是一種聲明式語言，不像其他語言有變量、條件和邏輯等特性，因?yàn)檫@個原因，社區(qū)中有了各種CSS處理器語言，比如Sass、LESS和Stylus等。這些處理器語言引入了一...
摘要：每隔幾個月就會出現(xiàn)一篇文章表明并不是真正的編程語言。你無需擔(dān)心因添加了一行不支持的代碼而出錯，解析器會跳過它不支持的屬性。當(dāng)遇到錯誤時(shí)，解析器會中斷解析并且拋出錯誤信息，而解析器會忽略這些錯誤并繼續(xù)解析。 每隔幾個月就會出現(xiàn)一篇文章表明：CSS并不是真正的編程語言。以編程語言的標(biāo)準(zhǔn)來說，CSS過于困難。使用這門語言會很有創(chuàng)造性： 人們對CSS有一些強(qiáng)烈的情愫?！?Dave Rupert...
摘要：每隔幾個月就會出現(xiàn)一篇文章表明并不是真正的編程語言。你無需擔(dān)心因添加了一行不支持的代碼而出錯，解析器會跳過它不支持的屬性。當(dāng)遇到錯誤時(shí)，解析器會中斷解析并且拋出錯誤信息，而解析器會忽略這些錯誤并繼續(xù)解析。 每隔幾個月就會出現(xiàn)一篇文章表明：CSS并不是真正的編程語言。以編程語言的標(biāo)準(zhǔn)來說，CSS過于困難。使用這門語言會很有創(chuàng)造性： 人們對CSS有一些強(qiáng)烈的情愫?！?Dave Rupert...
摘要：是一款簡單的支持動畫的庫，對于對的操作不是很熟悉的人來說，使用提供的方法操作動畫更簡單方便。要想使用提供的方法，首先應(yīng)在我們的頁面中引入使用操作動畫樣式注意的位置應(yīng)該在中，并且緊放在的標(biāo)簽的上一行，放在其他地方將會出錯。 move.js是一款簡單的支持CSS3動畫的JavaScript庫，對于對CSS3的操作不是很熟悉的人來說，使用move.js提供的方法操作CSS3動畫更簡單方便。 ...
摘要：是一款簡單的支持動畫的庫，對于對的操作不是很熟悉的人來說，使用提供的方法操作動畫更簡單方便。要想使用提供的方法，首先應(yīng)在我們的頁面中引入使用操作動畫樣式注意的位置應(yīng)該在中，并且緊放在的標(biāo)簽的上一行，放在其他地方將會出錯。 move.js是一款簡單的支持CSS3動畫的JavaScript庫，對于對CSS3的操作不是很熟悉的人來說，使用move.js提供的方法操作CSS3動畫更簡單方便。 ...
閱讀 3750·2021-09-22 10:57
閱讀 1921·2019-08-30 15:55
閱讀 2710·2019-08-30 15:44
閱讀 1739·2019-08-30 15:44
閱讀 1885·2019-08-30 15:44
閱讀 2256·2019-08-30 12:49
閱讀 1060·2019-08-29 18:47
閱讀 3143·2019-08-29 16:15
