CSS一些知识的补充

原创已于 2025-03-24 03:05:13 修改 · 692 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2025-03-23 18:35:14 首次发布

前端同时被 2 个专栏收录

342 篇文章

订阅专栏

CSS+HTML5

27 篇文章

订阅专栏

CSS一些知识的补充

1.link和import区别
- 1.1 回顾一下css引入的方式
- 1.2 link和@import区别
2.关于精灵图(css sprites)
3.关于响应式布局
4.style标签在body后和body之前有什么区别
5.css加载会造成阻塞吗
- 5.1 结论
- 5.2 提高css加载速度
6.预处理器
7.不使用border画出1px高的线，在不同浏览器的标准和怪异模式下都能保持效果一样
8.display有哪些值？

1.link和import区别

1.1 回顾一下css引入的方式

内联样式(行内样式)
嵌入样式
链接引入
<link ref="stylesheet" href="./main.css">
导入样式
@import "./style/base/base.css";

1.2 link和@import区别

都是引入css的方式。

从属关系
- link是html标签，是html范畴，不只是加载css,还可以定义ref、rss连接属性等；
- @import是属于css范畴，只能加载css
加载顺序
- link:加载页面，link标签引入的css被同时加载；
- @import:加载页面，需要页面完全加载好之后才被加载(所以有时候有闪烁)

ps:这就是为啥建议用link加载css而不是@import

2.关于精灵图(css sprites)

2.1 概述

在CSS中，在精灵图（Sprite）技术中，通常会将多个图标合并到一个图像文件中，然后通过CSS背景定位的方式来显示需要的图标。这种方法可以减少HTTP请求的次数，提高页面加载速度。

2.2 基本原理

合并图像： 首先，将多个图标合并到一个图像文件中。这通常通过图像编辑软件如Photoshop完成。
CSS背景定位： 在CSS中，使用background-image属性来指定精灵图，然后通过background-position属性来定位显示特定的图标。

2.3 使用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图</title>
    <style>
        .container{
            width: 80px;
            height: 80px;
            outline: 1px solid #ccc;
            background: url(./img/emoji.jpg) no-repeat -130px -120px;
            /* background-position:-130px -120px; 合入background*/
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

其中该图片如下:

在这里插入图片描述

结果如下:
在这里插入图片描述

2.4 优点和缺点

优点:减少http请求(每个图片都有一个头部信息，而现在共用了头部信息，减少字节数)；减少图片的字节；
缺点:难于维护(而且如果后期改变某一个图片,很可能就会影响页面的整体布局)；背景断裂；

总结一下:CSS Sprite大多使用于比较固定的像素定位中，它的弹性较差，受到定位等因素的制约。所以，你需要在可维护性vs降低负载之间权衡利弊，选择最适合你的项目的方式。

3.关于响应式布局

3.1 px/em/rem/vh/vw的区别

px
像素。显示器上一个小点，是一个绝对单位
em
相当于当前元素的一个font-size的大小，是一个相对单位
rem
相当于html根标签的一个font-size，是一个相对单位
vh/vw
vw相当于视口宽度的1%，vh相当于视口高度的1%，都是相对单位

3.2 rem的缺点

需要把所有元素中的px转为rem，这需要大量计算转换（现在有相关的插件pxtorem）
px转成rem经常会是除不尽的小数，这样子会有少量偏差；

3.3 怎么去做自适应？

媒体查询
百分比
会造成布局复杂度，所以不建议使用这种方式响应式；
vw/vh
rem
经常和媒体查询联合使用，不同屏幕下的根元素的font-size设置不一样
其它框架和插件
bootstrap、flexible等插件

3.4 rem做移动端自适应布局的原理

把窗口分为n等份，每一份为width/n,把这个值作为html的字体大小。然后对于每个元素，需要用到px的地方都需要转换一下（实际项目中不需要人手动一个一个转，使用插件就可以，如pxtorem）。

举个例子:设计师给我们的设计稿宽度为750px，我们可以用750/7.5得到100再赋值给html的font-size：100px，后面使用相当于1rem = 100px，比如字体16px，我们可以设置0.16rem从而实现自适应。

3.4.1 使用rem单位实现自适应

将rem.js文件导入到main.js，监听屏幕宽度变化，从而触发计算。这里给的设计稿宽度为750px，所以我用7.5来除，得到整数，方便后面px转换为rem的计算。

function setFontSize() {
　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
};

window.addEventListener('resize', function () {
　　setFontSize();
}, false);

setFontSize();

3.4.2 使用px单位实现自适应

在实际开发中，因为设计师给我们的设计稿单位都是px，如果觉得每次都换算成rem单位比较麻烦，这里可以使用px2rem插件，通过设置转换比例可以实现将px单位自动转换成rem单位。

(1)安装 postcss-px2rem及px2rem-loader

npm install postcss-px2rem px2rem-loader --save

(2)同样需要上面的rem文件并引入到main.js中监听窗口大小计算出font-size

(3)到vue.config.js中配置插件

// 引入等比适配插件
const px2rem = require('postcss-px2rem')

// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  remUnit: 100
})

// 使用等比适配插件
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

(4)在public/index.html文件中head标签内增加meta标签

width=device-width：将视口的宽自动调整为设备的宽
initial-scale=1.0：初始缩放比例
maximum-scale=1,minimum-scale=1：最大和最小缩放比都是1(用户不能缩放)

这样项目开发就可以使用设计稿的px单位啦。

4.style标签在body后和body之前有什么区别

在body标签后会先渲染html再渲染css，导致一个无样式的界面跳到一个有样式的界面（出现页面闪烁问题）

5.css加载会造成阻塞吗

5.1 结论

不会阻塞dom树的解析，但会阻塞dom树的渲染。css加载会阻塞后面js语句执行。

5.2 提高css加载速度

cdn
css压缩 gzip
合理利用缓存 cache-control，expires，e-tag
注意文件的更新，用hash后缀
减少http请求数
将多个css文件合并起来

6.预处理器

下面我将专门分析的是sass(也叫scss)。

6.1 变量

6.1.1 变量声明

$highlight-color: #F90;
$font-stack: Helvetica, sans-serif;

body {
  font: 100% $font-stack;
  color: $highlight-color;
}

6.1.2 变量引用

$color:#A34554;
.box {
  width: 300px;
  height: 400px;
  &-left{
     width: 30%;
     color: $color;
  }
}

6.1.3 变量的作用域

6.1.4 !global 标识符

Sass 允许使用 !global 标识符来设置局部变量为全局，以此来改变局部变量的作用范围，我们还是用上面的代码，来改变局部变量的作用域为全局：

$main-color: red;
h1 {
  $main-color: green!global;
  color:$main-color;
}
h2 {
   color:$main-color;
}

相当于

h1 {
  color: green;
}
h2 {
  color: green;
}

6.2 嵌套

6.3 插值

$name: item;
.ul-#{$name} { // 使用插值
   width: 200px;
  .li-#{$name} { // 使用插值
     width: 100%;
  }
}
.box-#{$name} { // 使用插值
   height:100px;
    .#{$name} { // 使用插值
    height:100%;
   }
}

6.4 函数

很多内置函数
自定义函数

// 自定义函数，计算一个颜色的亮度
@function adjust-brightness($color, $amount) {
  @return mix(white, $color, $amount);
}
.light-text {
   color: adjust-brightness($primary-color, 50%); // 将颜色亮度提高50%
}

6.5 控制指令

@if 指令
@each 指令
@for 指令
@while 指令

6.6 混合指令mixin

// 不接收参数的混合指令
@mixin border {
   border: {
   width: 1px;
   color: #cccccc;
   style: solid;
   }
}
// 接收参数的混合指令
@mixin font($size: 12px, $weight: 100) {
   font: {
    family: "Myfont";
    weight: $weight;
    size: $size;
   }
}
.box {
   // 引用混合指令
   @include border;
}
.item {
   // 引用混合指令并传参
   @include font(20px, 500);
}

6.7 继承

.a, .b {
 width: 10px;
}

.b {
 height: 10px;
 color: red;
}

6.8 导入

@import

6.9 问题:less/scss的异同或区别

变量声明:
less: @
scss: $
混入
less: 定义混入通过点(.),使用混入也是通过点,如果没有参数可以省略小括号

scss:定义通过@mixin,使用通过@include
变量插值
less: @{},
scss变量插值通过${}

7.不使用border画出1px高的线，在不同浏览器的标准和怪异模式下都能保持效果一样

通过设置元素的 height 为 1px，并使用背景色来模拟线条。

.line {
  height: 1px;
  width: 100%;
  background: black;
}

8.display有哪些值？

8.1 block：

作用：将元素渲染为块级元素。
特点：块级元素会在页面上形成一个块，独占一行，可以设置宽度、高度、外边距和内边距等属性。
示例：<div>,<p>, <h1>-<h6>等标签默认是块级元素。

8.2 inline：

作用：将元素渲染为内联元素。
特点：内联元素不会独占一行，可以与其他元素并排，且不能设置宽度和高度。
示例：<span>, <a>等标签是内联元素。

8.3 none：

作用：隐藏元素，使其在页面上不可见。
特点：隐藏的元素不会占据任何空间，也不会参与页面布局，但仍然存在于DOM中，可以通过JavaScript控制其显示与隐藏。

8.4 inline-block：

作用：使元素既具有内联元素的特性（与其他元素并排），又能设置宽度、高度、外边距和内边距等属性。
示例：常用于创建水平排列的按钮或导航元素。

8.5 flex：

作用：将元素设置为弹性容器，使用弹性盒子布局模型。
特点：允许子元素在容器内灵活排列，便于实现响应式设计和自适应布局。

8.6 grid：

作用：将元素设置为网格容器，使用网格布局模型。
特点：可以将元素划分为网格，实现复杂的网格布局。