1. <tt id="5hhch"><source id="5hhch"></source></tt>
    1. <xmp id="5hhch"></xmp>

  2. <xmp id="5hhch"><rt id="5hhch"></rt></xmp>

    <rp id="5hhch"></rp>
        <dfn id="5hhch"></dfn>

      1. 提高CSS開發(fā)能力的技巧

        時間:2020-09-19 16:45:20 CSS 我要投稿

        提高CSS開發(fā)能力的技巧大全

          1 使用:not()給導航條添加間隔線

          我們通常使用如下代碼給導航條增加間隔線

          /* add border */

          .nav li {

          border-right: 1px solid #666;

          }

          /* remove border */

          .nav li:last-child {

          border-right: none;

          }

          現(xiàn)在,我們可以使用:not()選擇符簡化操作,代碼簡潔易讀,不錯吧。

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

          border-right: 1px solid #666;

          }

          或者,我們增加左邊框。

          .nav li:first-child ~ li {

          border-left: 1px solid #666;

          }

          2 給body元素增加Line-Height屬性

          我們不需要給每個p、h1元素設(shè)置line-height,只需要給body元素設(shè)置,其他文本元素會自動繼承body的特性。

          body {

          line-height: 1;

          }

          3 任意元素垂直居中

          不是黑魔法,確實可以讓任意元素垂直居中。

          html, body {

          height: 100%;

          margin: 0;

          }

          body {

          -webkit-align-items: center;

          -ms-flex-align: center;

          align-items: center;

          display: -webkit-flex;

          display: flex;

          }

          4 逗號分隔的列表

          讓html列表貌似現(xiàn)實中逗號分隔的列表

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

          content: ",";

          }

          5 在nth-child中使用負數(shù)

          在css的nth-child中使用負數(shù)選擇1~n條記錄。

          li {

          display: none;

          }

          /* select items 1 through 3 and display them */

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

          display: block;

          }

          6 使用svg圖標

          沒有理由不使用svg圖標,在大多數(shù)分辨率和瀏覽器里能夠?qū)崿F(xiàn)縮放,甚至兼容到IE9,所以不用再用.png、.gif等等。

          .logo {

          background: url("logo.svg");

          }

          7 文本顯示優(yōu)化

          一些字體不能再所有設(shè)備中最優(yōu)展示,所以需要設(shè)置。

          html {

          -moz-osx-font-smoothing: grayscale;

          -webkit-font-smoothing: antialiased;

          text-rendering: optimizeLegibility;

          }

          注意optimizeLegibility屬性值的使用問題,同時IE/Edge不支持text-rendering。

          8 在Pure CSS Sliders中使用max-height

          使用max-height實現(xiàn)隱藏、顯示的.動畫。

          .slider ul {

          max-height: 0;

          overlow: hidden;

          }

          .slider:hover ul {

          max-height: 1000px;

          transition: .3s ease;

          }

          參見本博《Auto值的CSS3 Transition解決方案》

          9 初始化box-sizing

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

          html {

          box-sizing: border-box;

          }

          *, *:before, *:after {

          box-sizing: inherit;

          }

          10 表格單元格等寬

          .calendar {

          table-layout: fixed;

          }

          11 使用Flexbox擺脫各種Margin Hacks

          在實現(xiàn)側(cè)欄時,我們不再需要各種nth-、first-和last-child等設(shè)置margin,可以使用Flexbox輕松實現(xiàn)均勻分布。

          .list {

          display: flex;

          justify-content: space-between;

          }

          .list .person {

          flex-basis: 23%;

          }

          12 給空連接使用屬性選擇符

          對于那些擁有href屬性但是內(nèi)容為空的a,自動添加內(nèi)容。

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

          content: attr(href);

          }

        【提高CSS開發(fā)能力的技巧大全】相關(guān)文章:

        提高溝通能力的技巧05-31

        css 書寫技巧 CSS 技巧教程簡介11-21

        提高英語閱讀能力的技巧10-20

        提高即興應(yīng)對能力的技巧10-25

        提高英語閱讀能力技巧09-26

        提高英語閱讀能力的技巧推薦10-06

        提高英語閱讀能力的小技巧09-30

        快速提高英語閱讀能力的技巧10-04

        快速提高英文交際能力的技巧06-14

        国产高潮无套免费视频_久久九九兔免费精品6_99精品热6080YY久久_国产91久久久久久无码

        1. <tt id="5hhch"><source id="5hhch"></source></tt>
          1. <xmp id="5hhch"></xmp>

        2. <xmp id="5hhch"><rt id="5hhch"></rt></xmp>

          <rp id="5hhch"></rp>
              <dfn id="5hhch"></dfn>