前端-基础-03

1.怎么让背景或图片自适应。

在设置背景或者图片展示的时候，图片的大小通常不和外框大小一致。这是通常需要设置图片的展示规则。

1）背景设置。

先看一个常用的设置

<div class="content">
    <div class="div1"></div>
</div>
.content {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.div1 {
    width: 400px;
    height: 200px;
    background: #fff url(./1.png) 0 0 no-repeat;
}

此时图片将从左上角展开，过大超出的隐藏，过小就留白（颜色为第一个参数）。如果需要自定义图片的展示。需要设置background-size。

可取值：background-size: length|percentage|cover|contain;

先看数值设置的情况： 设置数值或百分比时需要两个参数，不写为auto，分别代表宽度和高度的值。如果只设置宽度，则高度对应宽度的比例缩放；相反只设置高度则宽度对应高度的比例缩放；如果两者都设置，则图片宽高对应缩放占据设置的大小。

设置为cover或contain：contain表示保留宽高比将图片缩放到全部能放到容器内，对于的地方留白；cover表示保留宽高比将图片缩放到较小的边能放到容器内，而较大的边超出的部分隐藏。

注：cover和contain对应数值设置中的100% auto或auto 100%；

2）图片设置。

.content {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.div1 {
    width: 400px;
    height: 200px;
}
<div class="content">
    <img class="div1" src="./1.png">
</div>

图片通过obj-fit设置展示。 obj-fit定义：指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的容器。

obj-fit属性：fill(默认)|contain|cover|none|scale-down;

fill表示宽高对应容器缩放，刚好占据容器。

contain和cover同background-size的属性值。

none:表示不缩放直接显示。

scale-down:取none和contain里尺寸更小的；

2.介绍下css的权重。

!important >行内样式（权重1000）>ID选择器（权重0100） > 类选择器 | 属性选择器 | 伪类选择器（权重0010） > 元素选择器（权重0001）

低级的权重原则上优先级低于高级的，但是在不同的浏览器上实现可能不一样，可能会有2^8及256个class的优先级大于id的情况，但实际不会这样写，因此不考虑这种。

项目中使用时通常都是通过class选择器来编写样式。如果碰到全局样式或者ui的样式导致界面样式有问题，在单独的界面中使用id或者important去修改样式。

3.有使用过预编译css吗？介绍下？

项目中主要使用的时scss（sass的升级版本）。基础的功能和语法：

1）嵌套

scss允许将css样式嵌套进另一套的样式中，内层的样式将外层的作为它的父选择器。这样能简化css的书写，同时让css的结构更加清晰，利于管理。例如：

.main {
    width: 100%;
    display: flex;
    .header {
        height: 50px;
    }
    .contain {
        flex: 1;
        overflow-y: scroll;
    }
    .footer {
        height: 50px;
    }
}
<div class="main">
    <div class="header"></div>
    <div class="contain"></div>
    <div class="footer"></div>
</div>

2）父选择器

在嵌套时，有时需要使用外层的选择器，例如伪类：hover；或者页面class结构为递进式的。

.info {
  &:hover {
    background: #1890ff;;
  }
  &-name {
    color: red;
  }
  &-age {
    color: #ccc;
  }
  &-sex {
    color: #eee;
  }
}
<div class="info">
    <div class="info-name"></div>
    <div class="info-age"></div>
    <div class="info-sex"></div>
</div>

3）属性嵌套

想font-family、font-size、font-weight这些属性都遵循同样的命名空间，同样可以以嵌套的形式编写。

.info {
  font: {
    weight: 500;
    size: 24px;
    family: ff;
  }
}

4）ScssScript

4.1）变量

变量通过$开头定义，有块级作用域，可以定义在内部使用。局部变量转换为全局的可以添加!global。变量定义时可以设置!default,表示如果没定义就使用这个，定义过就不管。

$contentWidth: 40px;
$contentWidth: 70px !default; // 不会生效，因为上面存在了
.main {
  $contentWidth: 60px;
  width: $contentWidth; //取60px
}
.main {
  height: $contentWidth; // 40px
}

4.2)数据类型

• 数字：1，2，10px
• 字符串，有引号和无引号两种
• 颜色：#ccc、rgba(255,255,0,.5)
• Boolean：true、false
• 空：null
• 数组 空格或者，分割 1px 2px, solid
• maps: (key1: val1, key2: val2)

4.3)运算(支持+ - * / % > < =运算)

注：+做字符串拼接是，结果有无引号取决于+前的值有无引号

.main {
  content: "aa" + bb;
  cursor: "poin" + ter; // 结果带引号不生效
}

4.4)#{}插值表达式

可参考模板字符串里的${},而且插值写的值不参与计算。

$contentWidth: 40px;
$contentWidth: 70px !default; // 不会生效，因为上面存在了
.main {
  width: #{$contentWidth} + 30px; // 结果为40px30p无效
}

4.5）& in SaccScript

&写在样式里面时，指代的是父级选择器。

a {
  &:hover {
    background: #1890ff;
  }
}
@mixin .parent-class {
  @if & {
    &:hover {
      color: red;
    }
  } @else {
    a {
      color: blue;
    }
  }
}

4.6)@extend和@extend-only属性

@extentd是指将extend的哪一个样式复制一份给我，重复的去掉。可多级延伸。

.error {
  border: 1px solid #f00;
  background-color: #fdd;
}
.error.intrusion {
  font-size: 20px;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

// 编译时
// 上面的不动
.error {
  border: 1px solid #f00;
  background-color: #fdd;
}
.error.intrusion {
  font-size: 20px;
}
// .error有的全部复制一份改为.seriousError
.seriousError {
  border: 1px solid #f00;
  background-color: #fdd;
}
.seriousError.intrusion {
  font-size: 20px;
}
// 其他不动
.seriousError {
  border-width: 3px;
}

@extend-only是指生成定义一套被继承的样式，样式本身无效，继承后才有用。定义符号为%

// 本身没有匹配生效
.main a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
// 继承后有用
.footer {
    @extend %extreme;
}

4.7）@if @for @each @while指令

// 初始化样式时可能用到
// 例如定义多行超出打点-webkit-line-clamp，定义margin-right类名
@for $i from 2 through 20 {
  @if $i%2 == 0 {
    .mr#{$i} {
      margin-right: $i + px;
    }
  }
}

// @while
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

// @each
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

4.8）@minxin和@include

mixin用于定义一种可重复使用的样式。混入样式中也可以再混入其它的样式。

@mixin setFont($size: 18px, $color: #333, $weight: 400) {
  font-size: $size;
  color: $color;
  font-weight: $weight;
}
.main {
  @include setFont(22px);
}