css詳解4

時間 2019-11-10

標籤 css 詳解欄目 CSS 简体版

原文原文鏈接

一、固定定位

固定定位，頁面內容多，頁面滾動起來，才能看到固定定位效果。html

好比下面這個，隨之滾動條滾動它一直在右邊。好比固定導航欄，小廣告，回到頂部，應用在這些地方。一直固定位置不變的。瀏覽器

首先讓頁面能滾動起來微信

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>魔降風雲變</p>
    <p>魔降風雲變</p>
    ...............
    <p>魔降風雲變</p>
</body>
</html>

固定位置脫標，寫在body的什麼位置都行。我在最後一個p後面加個divide

  <div class="fix">固定不變</div>

而後給它設置樣式佈局

        .fix{
 width: 100px; height: 100px; background-color: red;
        }

它如今在最下面ui

把這個盒子放在不少個p標籤的中間，不放到最下邊了，拖動滾動條它的位置根據頁面在滾動。spa

再給它設置位置固定。盒子在瀏覽器上找不到了。code

        .fix{
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;
        }

看下面代碼：htm

        .fix{
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;
     top:0;
            left: 0;
        }

給它給位置，拖動滾動條它的位置一直不變。而且壓蓋了下面的元素。如今它是在設備的左上角。blog

現象：脫標；固定不變，以頁面四個角爲參考點

            position: fixed;
            top:0;
            right: 0;

            position: fixed;
            bottom:20px;
            right: -50px;

以瀏覽器顯示頁面的四個角爲原點，指定位置後滾動滾動條它相對於瀏覽器頁面的這個位置顯示不變。它的上左下右和瀏覽器頁面對應邊距離對應邊屬性值個位置，值能夠爲負，爲負時是爲正時的反方向移動屬性值個位置。

把它放在body的第一個標籤，作成導航欄。而且把這個盒子寬度設爲100%

        .fix{
            width: 100%;
            height: 100px;
            background-color: red;
           position: fixed; top:0px;
        }

發生了壓蓋現象。

那麼內容應該往下擠盒子高度個值。

        body{margin-top: 100px}
        .fix{
            width: 100%;
            height: 100px;
            background-color: red;
            position: fixed;
            top:0px;
        }

 <div class="fix">固定不變</div>
    <p>小馬過河</p>
    <p>魔降風雲變</p>

紅盒子固定不變了。第二個盒子做爲內容會被壓蓋出不來。給body上部設置margin。這樣就能顯示了。

下面這個能夠用這個作了。

這個也能夠作左父元素，右子元素，懸浮父元素的時候空格讓子元素display顯示出來。默認父元素超出的子元素都是overflow: hidden; 懸浮父則overflow: visible;

若是三角形也想出來，那麼就能夠用border畫三角形的那個方法弄出來。

能夠用左父，右兩個子。子絕父相的方法顯示出來

這時我body裏面又有設置子絕父相的元素了。一個父元素設置了相對定位。

        .active{position: relative;
            background-color: yellow;}


    <p>魔降風雲變</p>
    <p class="active">abc魔降風雲變</p>
    <p>魔降風雲變</p>

後面設置的使用了子絕父相的父元素壓蓋了紅色導航欄，顯然是不行的

這時須要用到z-index。它只適用於定位的元素；默認值是auto，通常屬性值取數值，正數。若是它的值越大，則層級越高

       .fix{
            width: 100%;
            height: 100px;
            background-color: red;
            position: fixed;
            top:0px;
        }
        .active{position: relative;
            background-color: yellow;}

那麼上面都沒設置用的是默認。那爲何黃色的層級大壓蓋了紅色呢？若是都設置了定位，誰寫在下面了誰層級越高。如今是要讓紅色層級高，由於不知道後面會用多少定位元素，那麼就給紅色盒子設置高點的值。

        .fix{
            width: 100%;
            height: 100px;
            background-color: red;
            position: fixed;
            top:0px;
           z-index: 99999;
        }

這樣紅色盒子就不被z-index值低的壓蓋了。

z-index:auto 能夠默認爲它是0，它們是同樣的，那麼誰在後誰層級高，能顯示出來。

下面的span行內元素設置了絕對定位，這樣也是能夠給這個行內元素設置寬高的。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
    <style>
        .box1{
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 60px;
            border: 2px solid blue;
        }
        .box2{
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 60px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div class="father1">
        <span class="box1"></span>
    </div>
    <div class="father2">
        <div class="box2"></div>
    </div>
</body>
</html>

View Code

看不到效果：藍框是box1 span標籤 ;紅色是box2, div標籤。兩個都是使用了絕對定位

        .box2{
            position: absolute;
            top: 20px;
            left: 0;
            width: 200px;
            height: 60px;
            border: 2px solid red;
        }

如今將紅框加20px的top值，紅下移

如今給藍框加個黑色背景色，給紅框加個綠色背景色這樣就看出了有壓蓋現象

由於綠色盒子是在另外一個的下面

若是我給黑盒子設置z-index:10 給綠色盒子設置z-index:11,仍是綠壓蓋了黑；

若是我給黑盒子設置z-index:10 給綠色盒子設置z-index:6,，小於黑盒子的，那麼出現了黑壓蓋綠

這說明了誰的z-index數越大，誰的層級就越高，就會顯示誰

如今給兩個盒子的父盒子在行內標籤上設置相對定位和z-index。那麼如今有種從父現象，誰的父元素z-index大，證實它的層級越高。它不會關心子盒子的z-index。上面看到的是黑壓蓋綠，黑的z-index大於綠。如今給它倆的父設置了z-index，綠的父大，若是顯示綠壓蓋黑，那麼證實了相對定位的父盒子z-index越大，就再也不考慮各自子的z-index，父的越大子就越大

結果以下，證實黑的綠的相對定位的父都有z-index，那麼誰的父大就顯示誰。這裏綠的父大顯示綠；從父現象

使用場景以下，紅框中的購物車z-index比下面的父的z-index要大：下面壓蓋的搜索框也有子絕父相的佈局

正常狀況下先寫黑色頂部欄再寫下面搜索框的，這樣相同的狀況下按照前後順序是下面的導航欄的z-index要比黑色頂部欄的大，所以這裏須要調整這兩個父的z-index值，讓購物車的懸浮框壓蓋下邊的

二、圓角設置

參考：https://book.apeland.cn/details/355/#邊框屬性

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
         #box{
            width: 200px;
            height: 200px;
            background-color: red;
         }
    </style>
</head>
<body>
   <div id="box"></div>
</body>
</html>

先設置一個正方形

給個邊界-半徑正方形邊長通常，成了圓

         #box{
            width: 200px;
            height: 200px;
            background-color: red;
            border-radius: 100px;
         }

border-radius是兩個方向的值，一個是水平方向，一個垂直方向的半徑。好比將第二個設置爲50px

         #box{
            width: 200px;
            height: 200px;
            background-color: red;
            border-radius: 100px 50px;
         }

這樣水平方向100，垂直方向50:

將邊半徑設置爲200，大小同樣。

         #box{
            width: 200px;
            height: 200px;
            background-color: red;
          border-radius: 200px;
         }

半徑是正方形的邊長和邊長的一半效果同樣：

它們畫圓的圓心是不一樣的

驗證了一下，彷佛是以畫出的正方形的邊長到邊長一半以內都是一樣大小的圓。可是咱們常常用邊長的一半做爲邊界半徑。

下面看看這個小於一半的：

    <style>
         #box{
         width: 300px;
            height: 300px;
            background-color: red;
            border-radius: 100px;
         }
    </style>

看看半徑大於邊長的彷佛也能夠是圓，圓的直徑是邊長，即便半徑超過邊長不少

    <style>
         #box{
         width: 200px; height: 200px;
            background-color: red;
            border-radius: 600px;
         }
    </style>

咱們常常用的是百分比來畫圓：

         #box{
            width: 200px;
            height: 200px;
            background-color: red;
            border-radius: 50%;
         }

圓的使用場景之一是下面小圓點：

給圓加個邊框：

         #box{
            width: 200px;
            height: 200px;
            background-color: red;
            border-radius: 50%;
            border: 3px solid blue;
         }

而後懸浮在圓上的時候加個背景色：

  <style>
         #box{
            width: 200px;
            height: 200px;
            background-color: red;
            border-radius: 50%;
            border: 3px solid blue;
         }
  #box:hover{ background-color: #000;
       }
    </style>

圓使用場景之二：這樣能夠用圓來切頭像，好比qq頭像。方的變圓的。

使用場景之三，能夠作圓角

         #box{
            width: 200px;
            height: 200px;
            background-color: red;
       border-radius: 8px;
            border: 3px solid blue;
         }

單個圓角的設置

除了同時設置四個圓角之外，還能夠單獨對每一個角進行設置。對應四個角，CSS3提供四個單獨的屬性：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

         #box{
            width: 200px;
            height: 200px;
            background-color: red;
            border-top-left-radius: 50px;
         }

         #box{
            width: 200px;
            height: 200px;
            background-color: red;
         border-top-left-radius: 50px;
            border-top-right-radius:100px;
         }

         #box{
            width: 200px;
            height: 100px;
            background-color: red;
        border-top-left-radius: 100px;
            border-top-right-radius:100px;
         }

    <style>
         #box{
            width: 200px;
            height: 100px;
            background-color: red;
            border-bottom-left-radius: 100px;
            border-bottom-right-radius:100px;
         }
    </style>

         #box{
            width: 200px;
            height: 100px;
            background-color: red;
          border-top-left-radius: 100px;
            border-bottom-right-radius:100px;
         }

         #box{
            width: 200px;
            height: 100px;
            background-color: red;
 border-top-right-radius: 100px;
            border-bottom-right-radius:100px;
         }

         #box{
            width: 100px;
            height: 200px;
            background-color: red;
            border-top-right-radius: 100px;
            border-bottom-right-radius:100px;
         }

         #box{
            width: 200px;
            height: 100px;
            background-color: red;
 border-left: 100px solid green;
            border-top: 100px solid green;
            border-top-right-radius: 100px;
            border-bottom-right-radius:100px;
         }

         #box{
            width: 200px;
            height: 100px;
            background-color: red;
        border-left: 100px solid fuchsia;
            border-top: 100px solid green;
            border-top-right-radius: 100px;
            border-bottom-right-radius:100px;
         }

         #box{
            width: 200px;
            height: 100px;
            background-color: red;
            border-left: 100px solid #ffffff;
            border-top: 100px solid green;
            border-top-right-radius: 100px;
            border-bottom-right-radius:100px;
         }

         #box{
            width: 200px;
            height: 100px;
            background-color: red;
            border-left: 100px solid blue;
            border-top: 100px solid #ffffff;
            border-top-right-radius: 100px;
            border-bottom-right-radius:100px;
         }

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
         #box0{
            width: 200px;
            height: 100px;
            background-color: red;
            border-top: 100px solid #ffffff;
            border-top-left-radius: 100px;
            border-bottom-left-radius:100px;
            float: left;
         }
         #box{
            width: 200px;
            height: 100px;
            background-color: red;
            border-left: 100px solid blue;
            border-top: 100px solid #ffffff;
            border-top-right-radius: 100px;
            border-bottom-right-radius:100px;
            float: left;
         }
    </style>
</head>
<body>
   <div id="box0"></div>
   <div id="box"></div>
</body>
</html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
         #box0{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 100px;
            position: relative;
            left: 150px;

         }
         #box1{
            width: 400px;
            height: 130px;
            background-color: red;
            border-top-left-radius: 200px;
            border-top-right-radius: 200px;
            /*border-radius: 100px;*/
            line-height: 130px;
            text-align: center;
            font-size: 20px;
         }
         #tui{
            height: 250px;
            width: 400px;
            position: relative;
         }
         #tui .left{
            height: 250px;
            width: 100px;
            position: absolute;
            left: 50px;
            background-color: red;
         }
         .mid{
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;
            left: 150px;
            border-bottom-left-radius: 30px ;
            border-bottom-right-radius: 30px ;
         }
         .right{
            height: 250px;
            width: 100px;
            position: absolute;
            left:250px;
            background-color: red;
         }
       #box0 div{
          width: 20px;
          height: 20px;
          background-color: black;
          border :1px solid blue;
          border-radius: 10px;
       }
       #box0 .yan1{
          position: absolute;
          top: 20px;
          left: 20px;
       }
         #box0 .yan2{
          position: absolute;
          top: 20px;
          left: 56px;
       }
       #box0 .zui{
          height: 30px;
          width: 60px;
          background-color: gold;
          border-bottom-left-radius: 30px;
          border-bottom-right-radius: 30px;
          position: absolute;
          top: 51px;
          left: 19px;
       }
       #fa{
          height: 50px;
          width: 400px;
          position: relative;
       }
       #fa .fa1{
          width: 2px;
          height:50px;
          background-color: black;
          position: absolute;
          left: 183px;

       }
         #fa .fa2{
          width: 2px;
          height:50px;
          background-color: black;
            position: absolute;
            left: 213px;
       }
       #foot{
          font-size: 20px;
          text-align: center;
          margin-top: 5px;
          color: blue;
          width: 400px;
       }
    </style>
</head>
<body>
   <div id="fa">
      <div class="fa1"></div>
      <div class="fa2"></div>
   </div>
   <div id="box0">
      <div class="yan1"></div>
      <div class="yan2"></div>
      <div class="zui"> </div>
   </div>
   <div id="box1">please guess who am i ?</div>
   <div id="tui">
      <div class="left"></div>
      <div class="mid"></div>
      <div class="right"></div>
   </div>
   <div id="foot">create by mcw!</div>
</body>
</html>

View Code

有時間研究一下大風車

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
       div{
          width: 200px;
          height: 200px;
          border:50px solid red;
          border-radius: 100px;
       }
    </style>
</head>
<body>
   <div ></div>
</body>
</html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
       div{
          width: 200px;
          height: 200px;
          border:50px solid red;
          border-radius: 200px;
       }
    </style>
</head>
<body>
   <div ></div>
</body>
</html>

斜線怎麼畫呢？

qq頭像，微信頭像：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
       img{
          width: 200px;
          height: 200px;
          border: 2px solid red;
          border-radius: 200px;
       }
    </style>
</head>
<body>
<img src="timg.gif" alt="">
</body>
</html>

View Code

原圖：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。