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