前端程序員必須了解的幾個CSS使用技巧
1、元素的margin的top、bottom及padding的top、bottom使用百分比作為單位時,其是相對父元素的寬度width的而不是我們想象的高度height;其實出現這種現象,我們可以巧用margin/padding的百分比值實現高度自適應。當然該元素高度上的百分比是相對其父元素高度的百分比的,min-height及max-height也適用這條規律。
2、含有定位屬性的元素,其top、bottom單位為百分比時,該百分比是相對於父元素的高度的。同理,left、right則是相對於父元素的寬度的。
3、邊框寬度不允許使用百分比值。這點就不解釋了。
4、width:100%,當父容器裏有絕對定位的子元素時,子元素設置width:100%實際上指的是相對於父容器的padding+content的寬度。當子元素是非絕對定位的元素時width:100%才是指子元素的 content ,其等於父元素的 content寬度。
5、line-height。妳知道line-height:150%和line-height:1.5的區別嗎? line-height有單位時,子元素是繼承父元素的line-height的,無單位時,其line-height等於無單位的數值乘以子元素本身的字體大小。顯然為了不出現意外,還是建議首選無單位的。
6、ex和 ch單位。ex:取當前作用效果的字體的x的高度,在無法確定x高度的情況下以0.5em計算;ch:以節點所使用字體中的?0?字符為基準,找不到時為0.5em。
ex和 ch單位,類似於 em和 rem,依賴於當前的字體和字體大小。但是,不同的是,這兩貨是基於字體的度量單位,依賴於設定的字體。7、使用calc時運算符之間要有空格 ,否則可能無效。
以上這7個知識點妳們掌握了嗎?更多的內容資訊,小編會及時發布在本平臺,請及時關註哦!