CSS技巧

SoSalty

已于 2022-07-24 13:56:27 修改

阅读量302

点赞数 1

分类专栏：前端文章标签： css html 前端

于 2022-03-06 14:23:10 首次发布

本文链接：https://blog.csdn.net/SoSalty/article/details/123309905

版权

前端专栏收录该内容

12 篇文章 3 订阅

订阅专栏

8.img、input和其他的单标签没有after和before伪元素：

9.object-fit：

9.:last-child、:last-of-type

1.引入外部字体　

一、font-family属性的作用与用法？

　　font-family属性就是可以用css代码设置页面上文字显示的字体样式，

　　font-family属性可以定义多个值（字体），用逗号隔开。如果浏览器不支持第一个字体，则会尝试下一个，直到有一个可识别的。

　.demo{font-family:"微软雅黑";}

　　html代码：

　　<div class="demo">我是一段测试文字</div>

　　这样在demo盒子里的所有文字都会以微软雅黑的字体样式显示。

　　二、CSS怎么引入外部字体？

　　@font-face允许您在网页中使用电脑中没有安装的字体，完全摆脱安全字体的限制。只需将字体包安装在服务器上，当用户加载网页时，字体包会自动下载到用户机器上，保证字体能够正确渲染。

　　1）在CSS中引入字体并给外部字体自定义一个名称　　

@font-face{

　　/*font-properties*/

　　font-family:'fontName';

　　src:url('加载外部字体文件的文件地址');

    font-weight: normal;

    font-style: normal;

　　}

　　font-family定义字体的名字，接下来的src是加载字体文件的位置，之所有有多个url就是因为浏览器兼容问题。

　　2）使用刚刚定义的字体

　　div{

　　font-family:用户自定义的字体名称;

　　}

2.svg修改：

3.显示文字行数：

      // 一行
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      // 两行
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;

4.局部滚动：

<div>
<!-- 给父标签添加一个类 -->
  <ul class="content">
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
  </ul>
</div>

<style>
.content{
/*设置可见部分的高度*/
  height: 150px;
/*随便设置个颜色区分可滚动区域和其他区域*/
  background-color: red;
/*设置在竖直方向上可滚动*/
  overflow-y: scroll;
/*overflow:hidden样式可以不写，因为scroll会自动隐藏超出content高度的部分*/
}
</style>

5.background复合写法：

background: #000 url(../images/logo.png) no-repeat left center / cover;

参数说明
background-color 背景色
background-image 背景图
background-repeat 是否重复显示
background-position / background-size 背景图片位置 / 背景图片大小
注意：background-size是CSS3的属性
它要与background-position配合使用，中间有一个斜杠分隔符

6.less混入：

手动：

待混入的less：

// 鼠标经过上移阴影动画
.hoverShadow () {
  transition: all .5s;

  &:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  }
}

混入上方写好的less：

<style lang="less" scoped>
@import '../../assets/styles/mixins.less';

div {
  .hoverShadow ();
}
</style>

或者：自动加载目标less：

终端运行：vue add style-resources-loader

安装完毕后会在vue.config.js中自动添加配置，如下：

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: []
    }
  }
}

把你需要注入的文件配置一下后，重启服务即可。

+const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
+        path.join(__dirname, './src/assets/styles/variables.less'),
+        path.join(__dirname, './src/assets/styles/mixins.less')
      ]
    }
  }
}

7. ~ 选择器：

这是 CSS3 element1~element2 选择器。定义和用法：

　　element1~element2 选择器 element1 之后出现的所有 element2。

　　两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。

8.img、input和其他的单标签没有after和before伪元素：

因为单标签本身不能有子元素,所以不能通过input::before来写一些图标之类的内容，即使写了样式也不会生效

9.object-fit：

object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

值：

fill: 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain:保持原有尺寸比例。内容被缩放。
cover:保持原有尺寸比例。但部分内容可能被剪切。
none:保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down:保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

9.:last-child、:last-of-type

ul li:last-child {}
先找到父元素，找到所有的子元素，找到最后一个，判断是不是li，是就是选中，不是就是无效选择器；
ul li:last-of-type {}
先找到父元素，找到所有的类型为li的元素，选中最后一个