HiDocs
Search K

Appearance

1.图片的两种策略 ​

今天新学到的：li+css 的 background（轮播图、介绍产品的大页面等常用）

css
background: url("../../assets/images/about/qjf.jpg") no-repeat center;
background-size: cover;

下面我们来对比一下两种写法：

img 写法：

scss
li {
  width: 100vw;
  height: 100vh; //100vh这个代替高度100%很好用，可以直接获取整个屏幕的高度！
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

background 写法：

scss
li {
  width: 100vw;
  height: 100vh;
  &.bg1 {
    background: url("../../assets/images/about/qjf.jpg") no-repeat center;
    background-size: cover;
  }
}

那么具体怎么选择？

图片要铺满屏幕或一个区域的时候就用 background

图片只需要作为一个区域的一小部分那么就用 img

2.实现小三角形字体 ​

scss
&::after {
  display: inline-block;
  content: "";
  //制作三角形图标
  width: 0px;
  height: 0px;
  border: 6px solid;
  border-left-color: #fff; //只有左边有颜色，剩下的都是透明的
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  margin-left: 5px;
}

3.background-size 的两种属性：cover 和 contain 的区别？ ​

cover 优点是图片不会出现变形，背景图片全部覆盖所属元素区域（尽量等比例放大到可以覆盖）；缺点是超出的部分会被隐藏。

contain 优点是图片不会出现变形，同时背景图片被完全展示出来（等比例放大或缩小到可以把图片完整地全部展示出来）；缺点是当所属元素的宽高比与背景图片的宽高比不同时，会出现背景留白。

4.scss 的使用技巧 ​

css
.txt:hover > .txt-span {
}
.txt:hover > .sub-title {
}

等价于：

scss
.txt {
  &:hover {
    .txt-span {
    }
    .sub-title {
    }
  }
}

这种结构看起来更清晰，并且可以减少重复的代码！

5.inline-block 的意义 ​

inline-block 属性值，使其既具有 block 的宽度高度特性又具有 inline 的同行特性

通俗来讲就是不会默认占一整行的一种块级元素

6.display: flex 的浮动效果 ​

使用 display: flex 不会让其内部元素浮动，它是一种布局方式，只是这种布局方式会让元素看起来浮动了（因为不会再占据一整行）

如果你将一个 div 元素的 display 属性设置为 flex，并且不进行其他配置，则该 div 元素将变成一个水平的弹性容器，其子元素默认会排列在一行上。子元素会尽可能地填充父容器的宽度，根据内容的大小和其他布局属性来进行调整。

因此，display: flex 可以改变 div 元素的布局方式，并提供更灵活的控制选项，但是具体的效果取决于你如何设置弹性盒模型的属性和值。默认情况下，子元素会在一行上排列，但你可以通过调整其他属性来改变这种行为。

7.style.zIndex 这种方式设置多字符的样式 ​

element.style.zIndex = "10";

8.dl+dd ​

dl+dd 的结构（还可以用 a 包裹实现链接），可以较为方便地实现列表结构，等价于 ul+li，dl、dd、ul、li 都是 block，但是比 div 看起来整体结构更好，并且相当于可以自动换行

9.分支的命名规则 ​

feature+业务名称+日期

例子：

feature-yewuyingwen-0530

一般在每次完成某一个功能模块，进行提交代码的时候都要创建这个对应的新分支

注：feature 是特性的意思

10.当子元素 absolute 脱离文档流的时候，父元素要设置 height ​

父元素要设置具体的 height，否则里面的浮动元素由于是 bfc，会导致父元素没高度，从而父元素塌陷，导致页面显示不出来内容

11.想把图片居中在页面上时 ​

可以给 img 图片设置 max-width: 1376px; //设置为对应图片的真实宽度，不要超过这个，否则会变形！

然后父元素再 flex 设置居中即可！

这样在缩小的时候，img 的宽度也可以响应式地进行缩小

否则 img 的宽度是不好掌控的。

12.effect 为 coverflow 的 swiper ​

注意一定要设置 :coverflowEffect="{ slideShadows: false, }"

否则这个阴影非常影响样式

然后每一个小块的大小是取决于:slidesPerView="4"里面的这个数字的，实际上设置的 width 会失效

所以应当设置好 slidesPerView

设置:centeredSlides="true"可以保证有一个是位于中间平面展示的