跳到主要内容

题目 11-题目 15

11.object-fit 的用法​

object-fit CSS 属性指定可替换元素（例如：<img> 或 <video>）的内容应该如何适应到其使用高度和宽度确定的框(填充方式)。


你可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。

测试代码
object-fit: contain;
/* 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。 */
object-fit: cover;
/* 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。 */
object-fit: fill;
/* 被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。 */
object-fit: none;
/* 被替换的内容将保持其原有的尺寸。 */
object-fit: scale-down; /* Global values */
/* 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。 */
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: revert-layer;
object-fit: unset;

12.::before 和 ::after 伪元素​

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等

伪元素在 CSS1 中已存在，当时语法是用 : 表示，如 :before 和 :after

后来在 CSS3 中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类

由于低版本 IE 对双冒号不兼容，开发者为了兼容性各浏览器，可以继续使用 :after 这种老语法表示伪元素

  1. 单冒号（:）用于 css3 的伪类
  2. 双冒号（::）用于 css3 的伪元素 作用：::before 和 ::after 的主要作用是在元素内容前后加上指定内容。

另外，伪类与伪元素的区别有：

  • 伪类与伪元素都是用于向选择器加特殊效果
  • 伪类与伪元素的本质区别就是是否抽象创造了新元素
  • 伪类只要不是互斥可以叠加使用
  • 伪元素在一个选择器中只能出现一次，并且只能出现在末尾
  • 伪类与伪元素优先级分别与类、标签优先级相同

13.单行文本怎么实现两端对齐​

方法一：使用 text-align-last 属性​

测试代码
//html
<div class="item">
  <span class="label">{{item.label}}</span>：
  <span class="value">{{item.value}}</span>
</div>
测试代码
//scss
.item {
  margin-bottom: 8px;
  .label {
    display: inline-block;
    height: 100%;
    min-width: 100px;
    text-align: justify;
    text-align-last: justify;
  }
  .value {
    padding-right: 10px;
  }
}

方法二：使用 text-align: justify; text-align-last: justify;​

测试代码
//scss
.item {
  height: 32px;
  line-height: 32px;
  margin-bottom: 8px;
  .label {
    display: inline-block;
    height: 100%;
    width: 100px;
    text-align: justify;
    vertical-align: top;
    &::after {
      display: inline-block;
      width: 100%;
      content: '';
      height: 0;
    }
  }
  .value {
    padding-right: 10px;
  }
}

14.如何用 CSS 实现一个无限循环​

测试代码
<image class="anima" mode="widthFix" @click="nav" src="@/static/1_btn.png"></image>
测试代码
.anima {
  animation-name: likes; // 动画名称
  animation-direction: alternate; // 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
  animation-timing-function: linear; // 动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束；
  animation-delay: 0s; // 动画延迟时间
  animation-iteration-count: infinite; //  动画播放次数，infinite：一直播放
  animation-duration: 1s; // 动画完成时间
}

@keyframes likes {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(0.85);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

14.怎么实现单行、多行文本溢出显示省略号​

  • 单行文本溢出显示省略号
测试代码
.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  • 多行文本溢出显示省略号
测试代码
.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

15.CSS 预处理器/后处理器有哪些​

  • CSS 预处理器：Less、Sass、Stylus
  • CSS 后处理器：PostCSS、Autoprefixer、CSSNano、CSSO、PurifyCSS
Loading Comments...