7個(gè)Web前端程序員必須會(huì)用CSS技巧

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

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

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

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

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

    6、ex和 ch單位

    ex：取當(dāng)前作用效果的字體的x的高度，在無(wú)法確定x高度的情況下以0.5em計(jì)算；

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

    7、使用calc時(shí)運(yùn)算符之間要有空格 ，否則可能無(wú)效。

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

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