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高級(jí)布局技巧

        時(shí)間:2020-10-15 14:13:44 CSS 我要投稿

        CSS高級(jí)布局技巧

          IE8逐漸退出舞臺(tái),很多高級(jí)的CSS特性都已被瀏覽器原生支持,那么CSS怎么布局?有哪些技巧呢?下面yjbys小編為大家分享css樣式布局技巧如下:

          用 empty 區(qū)分空元素

          兼容性:不支持 IE8

          假如我們有以上列表:

          <p class="item">a</p>

          <p class="item">b</p>

          <p class="item"></p>

          我們希望可以對(duì)空元素和非空元素區(qū)別處理,那么有兩種方案。

          用 :empty 選擇空元素:

          .item:empty {

          display: none;

          }

          或者用 :not(:empty) 選擇非空元素:

          .item:not(:empty) {

          border: 1px solid #ccc;

          /* ... */

          }

          用 :*-Of-Type 選擇元素

          兼容性:不支持 IE8

          舉例說(shuō)明。

          給第一個(gè) p 段落加粗:

          p:first-of-type {

          font-weight: bold;

          }

          給最后一個(gè) img 加邊框:

          img:last-of-type {

          border: 10px solid #ccc;

          }

          給無(wú)相連的` blockquote 加樣式:

          blockquote:only-of-type {

          border-left: 5px solid #ccc;

          padding-left: 2em;

          }

          讓奇數(shù)列的 p 段落先死紅色:

          p:nth-of-type(even) {

          color: red;

          }

          此外,:nth-of-type 還可以有其他類型的參數(shù):

          /* 偶數(shù)個(gè) */

          :nth-of-type(even)

          /* only 第三個(gè) */

          :nth-of-type(3)

          /* 每第三個(gè) */

          :nth-of-type(3n)

          /* 每第四加三個(gè),即 3, 7, 11, ... */

          :nth-of-type(4n+3)

          用 calc 做流式布局

          兼容性:不支持 IE8

          左中右的流式布局:

          nav {

          position: fixed;

          left: 0;

          top: 0;

          width: 5rem;

          height: 100%;

          }

          aside {

          position: fixed;

          right: 0;

          top: 0;

          width: 20rem;

          height: 100%;

          }

          main {

          margin-left: 5rem;

          width: calc(100% - 25rem);

          }

          用 vw 和 vh 做全屏滾動(dòng)效果

          兼容性:不支持 IE8

          vw 和 vh 是相對(duì)于 viewport 而言的,所以不會(huì)隨內(nèi)容和布局的變化而變。

          section {

          width: 100vw;

          height: 100vh;

          display: flex;

          align-items: center;

          justify-content: center;

          text-align: center;

          background-size: cover;

          background-repeat: no-repeat;

          background-attachment: fixed;

          }

          section:nth-of-type(1) {

          background-image: url('https://unsplash.it/1024/683?image=1068');

          }

          section:nth-of-type(2) {

          background-image: url('https://unsplash.it/1024/683?image=1073');

          }

          section:nth-of-type(3) {

          background-image: url('https://unsplash.it/1024/683?image=1047');

          }

          section:nth-of-type(4) {

          background-image: url('https://unsplash.it/1024/683?image=1032');

          }

          body {

          margin: 0;

          }

          p {

          color: #fff;

          font-size: 100px;

          font-family: monospace;

          }

          用 unset 做 CSS Reset

          兼容性:不支持 IE

          body {

          color: red;

          }

          button {

          color: white;

          border: 1px solid #ccc;

          }

          /* 取消 section 中 button 的 color 設(shè)置 */

          section button {

          color: unset;

          }

          用 column 做響應(yīng)式的列布局

          兼容性:不支持 IE9

          nav {

          column-count: 4;

          column-width: 150px;

          column-gap: 3rem;

          column-rule: 1px dashed #ccc;

          column-fill: auto;

          }

          h2 {

          column-span: all;

          }

        【CSS高級(jí)布局技巧】相關(guān)文章:

        CSS高級(jí)技巧匯總01-12

        DIV+CSS布局和TABLE布局的優(yōu)缺點(diǎn)11-15

        css 書寫技巧 CSS 技巧教程簡(jiǎn)介11-21

        css網(wǎng)頁(yè)布局用Margin還是用Padding10-04

        CSS樣式表代碼布局基礎(chǔ)教程11-21

        CSS基礎(chǔ)知識(shí)之盒模型以及浮動(dòng)布局10-11

        網(wǎng)站頁(yè)面布局技巧06-17

        AutoCAD布局應(yīng)用技巧12-12

        網(wǎng)頁(yè)設(shè)計(jì)布局技巧06-16

        国产高潮无套免费视频_久久九九兔免费精品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>