提升你css技能的css開發技巧

很久沒整理博客了 進來囉嗦兩句   繼續抄別人的博客  

1、resize實現圖片對比

 

resize的語法以下：

 

    resize：none | both | horizontal | vertical

 

案例效果以下圖 **(鼠標移到左下角白色區域，往右側拖動，實現圖片對比效果)**：

 

 

我應用到了resize的以下代碼：

 

    resize: horizontal;

 

能夠水平拉伸！

 

 

 2、:not()的應用技巧

 

咱們平時在書寫導航欄分割線的時候，最後一個標籤是沒有分割線的，咱們通常的寫法以下：

 

    /* 先給全部添加右側邊框 */

    .nav li {

      border-right: 1px solid #666;

    }

    /* 再去除最後一個邊框 */

    .nav li:last-child {

      border-right: none;

    }

 

運用:not()以後以下書寫：

 

    .nav li:not(:last-child) {

      border-right: 1px solid #666;

    }

 

還能夠用咱們以前的~[波浪選擇器][4]來實現，不明白的能夠點擊進入，查看第8條！

 

    .nav li:first-child ~ li {

      border-left: 1px solid #666;

    }

 

咱們在用逗號分隔的列表，最後一個讓他沒有逗號，寫法以下：

 

    ul > li:not(:last-child)::after {

      content: ",";

    }

 

not的應用，讓咱們方便了很多，節省了一些代碼！

 

 3、任意元素垂直居中

 

關於css垂直居中，我以前寫過幾篇文章：[css固定寬高DIV內部元素垂直居中的方法][5] 和 [css的div垂直居中的方法][6] ，今天咱們在body中，初始化定義一下，就可讓任意元素垂直居中，代碼以下：

 

    html, body {

      height: 100%;

      margin: 0;

    }

    

    body {

      -webkit-align-items: center;  

      -ms-flex-align: center;  

      align-items: center;

      display: -webkit-flex;

      display: flex;

    }

 

固然，這個有必定的兼容問題！不過現代瀏覽器是沒有問題的！

 

 4、表格單元格等寬

 

用以下代碼可讓表格單元格等寬

 

    .haorooms{

      table-layout: fixed;

    }

 

 

 5、使用Flexbox擺脫各類Margin Hacks

 

實現側欄時，咱們再也不須要各類nth-、first-和last-child等設置margin，可使用Flexbox輕鬆實現均勻分佈！代碼以下：

 

    .list {

      display: flex;

      justify-content: space-between;

    }

    

    .list .person {

      flex-basis: 23%;

    }

 

6、給空鏈接使用屬性選擇符

 

這個我上一篇文章應用過了，就是使用before或者after的[content的attr屬性][7]！

 

具體能夠看：http://www.haorooms.com/post/content_attr

 

咱們還能夠給空a標籤添加屬性，代碼以下：

 

    a[href^="http"]:empty::before {

      content: attr(href);

    }

 

 

 7、初始化box-sizing

 

從html中繼承box-sizing屬性，這樣的話，後期維護比較方便。

 

    html {

      box-sizing: border-box;

    }

    

    *, *:before, *:after {

      box-sizing: inherit;

    }

 

 

 8、在nth-child中使用負數

 

nth-child中使用負數，能夠選擇小於等於某個數的值，例如：

 

    li:nth-child(-n+4){background:red}

 

小於等於4的li，顯示爲紅色！

 

還能夠以下應用：

 

    li {

      display: none;

    }

    

    li:nth-child(-n+3) {

      display: block;

    }

 

上面代碼的含義是，咱們讓前三個li顯示（小於等於3的）,其餘的li都隱藏！

 

關於nth-child的應用，我以前也寫過文章，具體請看：http://www.haorooms.com/post/css3_nth-child

 

 

 9、文本顯示優化

 

    html {

      -moz-osx-font-smoothing: grayscale;

      -webkit-font-smoothing: antialiased;

      text-rendering: optimizeLegibility;

    }

 

上面代碼可讓字體在咱們的設備中最優顯示！

 

 

10、border的應用技巧！

 

關於border，我前面的文章已經介紹過其對於[對話框][8]的書寫。http://www.haorooms.com/post/css_dhk

 

border的應用仍是蠻普遍的！我以前在慕課網的課程 html5左側導航，講了[三道槓][9]的書寫！，是運用了box-shadow，關於文章，具體請看：http://www.haorooms.com/post/box_shadow_css  

 

可是呢，這個是css3的屬性，今天給你們講運用border書寫三道槓，兼容性很好！代碼以下：

 

    width:40px;height:7px;

    color: #999;

    border-top:18px  double;

    border-bottom: 6px solid;

 

 

運用border的double屬性，能夠輕鬆繪製三道槓，兼容性很好！而且，你們注意的是：border-color能夠繼承color，咱們只要修改color的值，就能夠修改border-color的值！

 

 11、vertical-align 屬性

 

vertical-align 只在行內元素，或者inline、inline-block等中才起做用。當咱們在某個div中使用垂直居中是無論用的，我以前的文章寫了利用vertical-align，[垂直居中][10]的辦法，具體請看：http://www.haorooms.com/post/div_guding_inner_center

 

除此以外，vertical-align 還支持數值和百分比！

 

咱們能夠以下寫：

 

    .haorooms{vertical-align:-2px;}

    .haorooms{vertical-align:-10%;}

 

這個負值和 margin-bottom相似，可是呢，vertical-align能夠將父級元素撐大！

 

12、margin重疊解決方案列舉

 

 一、父級元素bfc ，不懂bfc的情看我以前的文章：http://www.haorooms.com/post/css_BFC_bgdiv

 

 二、父級元素給一個padding

 

三、父級元素給一個border

 

四、子元素前面加任意一個空的內聯元素，（例如：span、nbsp等等）

 

 

​ 十3、父元素font-size:0的做用

 

display：inline-block的元素之間會有一個字符的間隙，這個間隙致使了最後一個會掉下來。解決方案通常有以下幾種：

 

一、給父元素設置font-size：0px；

 

二、取消掉換行符，如這樣：

 

    <span>aaaa</span><span>aaaa</span><span>aaaa</span>

 

連續。

 

或者以下：

 

    <div class="space">

        <a href="##">惆悵</a><!--

        --><a href="##">淡定</a><!--

        --><a href="##">熱血</a>

    </div>

    

    <div class="space">

        <a href="##">惆悵</a

        ><a href="##">淡定</a

        ><a href="##">熱血</a>

    </div>

 

可是這種方式不推薦

 

三、使用margin負值。

 

四、使用浮動。

 

五、另外還有使用letter-spacing、word-spacing等方法。

 

固然最好的解決方案就是設置font-size:0

 

 父元素 font-size:0 例子：

 

html:

 

    <div class="box">

      <div>1</div>

      <div>2</div>

      <div>3</div>

    </div>

 

css:

 

    .box{

      width: 90px;

      height: 60px;

      border: 1px solid #ccc;

    }

    .box div{

      display: inline-block;

      box-sizing: border-box;

      font-size: 14px;

      width: 30px;

      border: 1px solid ;

    }

 

理論上box下面的三個div都是30px，恰好在一行顯示，可是實際效果是這樣：

 

 

 

 

這就是上文說到的緣由，咱們在box下添加font-size:0;再看看效果