css知識課堂（一）

1、box-shadow

 box-shadow: 120px 80px 40px 20px #0ff;
 /* 順序爲: offset-x, offset-y, blur-size, spread-size, color */
 /* blur-size 和 spread-size 是可選的 (默認爲 0) */

各個參數的含義分別爲：其中blur爲模糊距離，spread爲陰影大小

2、希望圖片和文字處在同一行上，即水平垂直居中

  <div class="contact">
       <img src="img/phone.png" alt="phone"><span>312-478-9463</span>
       <img src="img/email.png" alt="email"><span>[email protected]</span>  
 </div>

發現直接給contact類加：vertical-align:middle,不起作用；

.contact * {
    line-height: 32px;
    height: 32px;
    vertical-align: middle;
}

這樣就可以實現效果了：

3、grid佈局

Grid 佈局與 Flex 佈局有一定的相似性，都可以指定容器內部多個項目的位置。但是，它們也存在重大區別。

Flex 佈局是軸線佈局，只能指定"項目"針對軸線的位置，可以看作是一維佈局。Grid 佈局則是將容器劃分成"行"和"列"，產生單元格，然後指定"項目所在"的單元格，可以看作是二維佈局。Grid 佈局遠比 Flex 佈局強大。

今天僅簡單介紹grid佈局的兩列布局

容器指定了網格佈局以後，接着就要劃分行和列。grid-template-columns屬性定義每一列的列寬，grid-template-rows屬性定義每一行的行高。

grid-template-columns屬性和grid-template-rows屬性裏面，還可以使用方括號，指定每一根網格線的名字，方便以後的引用。

grid-row-gap屬性設置行與行的間隔（行間距），grid-column-gap屬性設置列與列的間隔（列間距）。

 <header>
                <h1>Klayf dffgi</h1>
                <p>[email protected]</p>
                <p>sfas3345252@123</p>
                <p><strong>BA Computer Science</strong></p>
                <p><strong>Expected Graduation: Dec 2020</strong></p>
 </header>

justify-self屬性設置單元格內容的水平位置（左中右），跟justify-items屬性的用法完全一致，但只作用於單個項目。

align-self屬性設置單元格內容的垂直位置（上中下），跟align-items屬性的用法完全一致，也是隻作用於單個項目。

header {
    display: grid;
    margin-bottom: 20px;
    grid-template-columns: [start] 50% [middle] 50% [end];
    grid-template-rows: auto;
    grid-column-gap: 25px;
    grid-row-gap: 2px;
    line-height: 1.25;
}

header p:nth-child(2n) {
    justify-self: right;
}

header p:nth-child(2n + 1) {
    justify-self: left;
}

 最終展示效果爲：

4、響應式設計

Why code mobile-first

Code for larger screens is usually more complicated than the codes for smaller screens. This is why coding mobile first helps simplify your code.

要實現不同屏幕寬度，每一行的項目數不同。有時是三欄佈局，有時是四欄佈局，則可以寫如下代碼

.gallery_item{
Float:left;
      Margin-right:5%;
      @media (max-width:800px){
         &:nth-child(3n){
        Width:30%;
            Margin-right:0;
}
}
 @media (min-width:800px){
         &:nth-child(4n){
            Width:30%;
            Margin-right:0;
}
}
}

5、不同視窗的字體大小設計

可以給元素設置in單位  英寸（Inches）。絕對長度單位。

• 1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

1vw = 1% of viewport width （瀏覽器視口寬度）
1vh = 1% of viewport height  （瀏覽器視口高度）
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger