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