Web前端程序員必須掌握的技巧

7個Web前端程序員必須會用CSS技巧

    1、元素的margin的top、bottom及padding的top、bottom使用百分比作為單位時，其是相對父元素的寬度width的而不是我們想象的高度height；

    2、含有定位屬性的元素，其top、bottom單位為百分比時，該百分比是相對于父元素的高度的。

    3、邊框?qū)挾炔辉试S使用百分比值

    4、width：100%當父容器里有絕對定位的子元素時，子元素設(shè)置width:100%實際上指的是相對于父容器的padding+content的寬度。當子元素是非絕對定位的元素時width:100%才是指子元素的 content ，其等于父元素的 content寬度。5、line-height

    line-height有單位時，子元素是繼承父元素的line-height的，無單位時，其line-height等于無單位的數(shù)值乘以子元素本身的字體大小。顯然為了不出現(xiàn)意外，還是建議首選無單位的。

    6、ex和 ch單位

    ex：取當前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計算；

    ch:以節(jié)點所使用字體中的“0”字符為基準，找不到時為0.5em；ex和 ch單位，類似于 em和 rem,依賴于當前的字體和字體大小。但是，不同的是，這兩貨是基于字體的度量單位，依賴于設(shè)定的字體。ch單位通常被定義為數(shù)字0的寬度。你可以在Eric Meyers的博客里找到關(guān)于它的一些有意思的討論，例如將一個等寬字體的字母”N”的寬度設(shè)置為40ch，那么在另一種類型的字體里它卻可以包含40個字母。

    7、使用calc時運算符之間要有空格 ，否則可能無效。

    本文由培訓無憂網(wǎng)達內(nèi)教育課程顧問老師整理發(fā)布，更多課程信息可關(guān)注web前端培訓或添加老師微信：15033336050

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請注明出處和鏈接 http://elsolbar.com/news-id-6554.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實性請自行核實或聯(lián)系我們，了解更多相關(guān)資訊請關(guān)注web前端頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費申請試課。關(guān)注官方微信了解更多：150 3333 6050