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

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

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

    3、邊框寬度不允許使用百分比值

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

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

    6、ex和 ch單位

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

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

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

    本文由培訓無憂網達內教育課程顧問老師整理發布，更多課程信息可關注web前端培訓或添加老師微信：15033336050

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