你可能不知道的一些css小知識

劉厚水發(fā)布于2019-08-30 15:44 / 2508人閱讀

摘要：在此，特地列舉一些里比較容被忽略的小知識，希望能對你有所幫助。橢圓的實現(xiàn)跟圓形的實現(xiàn)一樣，這里也是用到屬性，但是你可能不知道，是一個簡寫屬性，可以多帶帶為四個角分別設(shè)置水平和垂直半徑，只要用到一個正斜杠即可。

css是一門功能強(qiáng)大、具備完整生態(tài)的復(fù)雜語言。它擁有很多的技巧， 但是生活工作中我們可能不怎么會接觸到，這包括一些實際上挺實用的技巧。在此，特地列舉一些css里比較容被忽略的小知識，希望能對你有所幫助。

1. 橢圓的實現(xiàn)

跟圓形的實現(xiàn)一樣，這里也是用到border-radius屬性，但是你可能不知道，border-radius是一個簡寫屬性， border-radius可以多帶帶為四個角分別設(shè)置水平和垂直半徑，只要用到一個正斜杠即可。在斜杠前指定前四個值，作為各自的水平半徑，在斜杠后指定后四個值作為各自的垂直半徑（可以簡寫）。故橢圓可以如下的代碼實現(xiàn)：

div {
    width: 200px;
    height: 300px;
    border: 1px solid #000;
    border-radius: 150px / 100px;  
}

這樣子可以直接得到一個橢圓。實際上，它還支持百分比值，所以border-radius屬性部分的代碼還可以簡化成這樣子：

border-radius: 50%;

那如果僅需要實現(xiàn)一個上面部分的半橢圓呢？由前面的結(jié)論，實際上我們可以很容易地寫出半橢圓的border-radius屬性部分的css代碼：

border-radius: 50% / 100% 100% 0 0;

這等價于：

border-radius: 50% 50% 50% 50% / 100% 100% 0 0;

結(jié)果如下：

2. 絕對定位和固定定位的元素可通過同時設(shè)置bottom&top或者left&right的值，來間接地設(shè)置該元素的寬度

代碼如下：

.parent {
    position: relative;
    border: 1px dashed red;
    height: 100px;
    width: 100px;
}
.child {
    position: absolute;
    bottom: 10px;
    height: 10px;
    left: 10px;
    right: 10px;
    background: gray;
}

結(jié)果如下：

實際上，就算在父元素的寬高不是直接指定、而是由其內(nèi)嵌的內(nèi)容撐起來的情況下，也可以生效。

3. 一般情況下固定定位的父元素，無論其層級設(shè)置得多高且無論其內(nèi)嵌的子元素的層級設(shè)置得多低，該元素都不能將這些子元素覆蓋

老規(guī)矩，上代碼示例：

.parent {
    position: fixed;
    z-index: 999;
    background: red;
    height: 100px;
    width: 100px;
}
.child {
    position: relative;
    z-index: -999;
    width: 50px;
    height: 50px;
    background: gray;
}

老規(guī)矩，貼結(jié)果圖：

4. 運(yùn)用currentColor

currentColor是一個比較特殊的屬性，它是css的第一個變量。顧名思義，它并沒有綁定具體的顏色值，而是在使用中被解析為color。例如以下的水平分割線的顏色值：

div {
    color: red;
    border: 1px solid red;
}
hr {
    height: .5em;
    background: currentColor;
}


    My First Heading
    
    My first paragraph.

結(jié)果如下，水平分割線成功被賦予了同樣的顏色值：

5. 利用flexbox和外邊距實現(xiàn)垂直水平居中

實現(xiàn)一個元素垂直水平居中的方法有很多，但是以下這種算是比較好的一種方法，十分簡捷。

只需在父類和子類分別加上這兩個屬性：

.parent {
    display: flex;       
}
.child {
    margin: auto;
}

即可實現(xiàn)子元素垂直水平居中。

6. 絕對定位的元素設(shè)置為行內(nèi)元素時不會生效

不少人以為絕對定位的元素可以隨便設(shè)置其display屬性，實際上，絕對定位的元素會形成一個塊級框，它無法被設(shè)置為一個行內(nèi)元素。你可以對一個元素同時設(shè)置以下樣式試試效果：

div {
    display: inline;
    position: absolute;
    width: 200px;
    height: 200px;
    background: red;
}

會發(fā)現(xiàn)，給他設(shè)置的寬高依舊會生效。這已經(jīng)說明了問題。

7. 更好地實現(xiàn)文本兩端對齊的效果

相信一些人可能會在相應(yīng)的樣式類中設(shè)置如下屬性：

text-align: justify;

但這里的效果是不好的，容易造成單詞間間距過大的現(xiàn)象，影響閱讀。

我們可以僅僅在相應(yīng)的樣式類中設(shè)置如下屬性，達(dá)到期待中的效果：

hyphens: auto;

它會在末尾進(jìn)行單詞的斷層，大大縮短了單詞間的過大間距。

8. 實現(xiàn)波浪形下劃線

我們將借助background這個簡寫屬性來實現(xiàn)它。可先試著寫如下代碼：

p {    
    font-size: 30px;
    display: inline;
    background: linear-gradient(red 0 100%) no-repeat;
    background-size: 100% 1px;
    background-position: 0 85%;
}

This is my first paragraph. This is my first paragraph. This is my first paragraph.

會看到結(jié)果如下：

這并不是我們想要的結(jié)果。首先它穿過了字形的descender。我們應(yīng)該讓下劃線在遇到字母時自動斷開，那樣子的效果將會更加舒服。可以巧妙地利用text-shadow屬性實現(xiàn)這一步，在上面的樣式類里加上這樣一個屬性段：

    text-shadow: 2px 0 white, -2px 0 white;

結(jié)果如下所示：

可看到效果變成了這樣：

怎樣實現(xiàn)類似文本輸入糾錯時的波浪型下劃線？這里需要用到兩層漸變，最終的代碼如下：

p {    
    font-size: 30px;
    display: inline;
    background: linear-gradient(-45deg, transparent 40%,  red, red 60%, transparent 0) 0 1em, linear-gradient(45deg, transparent 40%,  red, red 60%, transparent 0) .1em 1em;
    background-repeat: repeat-x;
    background-size: .2em .1em;
    text-shadow: 2px 0 white, -2px 0 white;
}

實現(xiàn)的效果如下：

附：部分內(nèi)容源自Lea Verou大神的《CSS揭秘》一書。

原文鏈接

【作者簡介】 TRIS，蘆葦科技web前端開發(fā)工程師，喜歡唱歌、看動漫、看小說。擅長微信小程序開發(fā)，系統(tǒng)管理后臺。訪問www.talkmnoney.cn了解更多。