HTML&CSS（三）

用户6827608954138
101 阅读4分钟

1. em、rem的区别（掌握）

  1. em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。

  2. rem是CSS3新增的一个相对单位(root em,根 em),使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

2. 解释csssprites，如何使用（掌握）

CSS精灵图把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。

3. 伪类和伪元素的区别（掌握）

  1. 相同之处：伪类和伪元素都不出现在源文件和DOM树中。也就是说在html源文件中时看不到伪类和为伪元素的。

  2. 不同之处：

    1）伪类其实就是基于普通DOM元素而产生的不同状态，它是DOM元素的某一特征。

    2）伪元素能够创建在DOM树中不存在的抽象对象，而这些抽象对象是能够访问到的。

4. 浏览器工作原理（掌握）

  1. 用户界面

  2. 网络

  3. UI后端

  4. 浏览器引擎

  5. 渲染引擎

  6. 数据存储

  7. js解释器

5. 介绍一下你对浏览器内核的理解？（掌握）

主要分成两部分：渲染引擎 和 JS引擎

  1. 渲染引擎：负责取得网页内容(HTML、 XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。 浏览器内核的不同对网页的语法解释会有所不同，所以渲染的效果也不相同。所有的网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

  2. JS引擎：解析和执行JavaScript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于渲染引擎

6. 常见的浏览器内核有哪些？（掌握）

1.Trident内核：IE,360，傲游，搜狗，世界之窗，腾讯等。[又称MSHTML]

2.Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

3.Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]

4.Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

7. 优化图片加载（掌握）

一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验？

1）图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

2）如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

3）如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

4）如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

8. 如何进行seo优化？（掌握）

  1. 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关键词；keywords列举出重要关键词。

  2. 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

  3. 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取

  4. 重要内容不要用js输出：爬虫不会执行js获取内容

  5. 少用iframe：搜索引擎不会抓取iframe中的内容

  6. 非装饰性图片必须加alt属性

  7. 提高网站速度：网站速度是搜索引擎排序的一个重要指标。

9. 如何实现0.5px边框（掌握）

image.png

  1. 定位 + 伪元素 + transfrom缩放(scale)的方式
<!DOCTYPE html>
<html lang="ch-ZN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: red;
      margin: 0 auto;
      position: relative;
    }

    .box::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      /* 盒子宽高的2倍 */
      width: 200%;
      height: 200%;
      /* 缩放到跟盒子一样的大小 */
      transform: scale(0.5);
      /* 2D转换中心点 */
      transform-origin: 0 0;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>
  1. border+border-image+linear-gradient的方式

image.png

<!DOCTYPE html>
<html lang="ch-ZN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: pink;
      border-bottom: 1px solid #000;
      border-image: linear-gradient(to bottom,transparent 50%, Green 50%) 0 0 100% 0;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>
  1. 伪元素+background-image的方式

image.png

<!DOCTYPE html>
<html lang="ch-ZN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        position: relative;
    }

    .box:before {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 200px;
        height: 1px;
        background-color: blue;
        background-image: linear-gradient(to bottom transparent 50%, blue 50%);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

10. less和sass的区别（掌握）

  • Less是基于JavaScript，是在客户端处理的；Sass是基于Ruby的，是在服务器端处理的。

  • 关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

  • 输出设置，Less没有输出设置，Sass提供4种输出选项：nested, compact, compressed 和 expanded。

  • Sass支持条件语句，可以使用if{}else{},for{}循环等等，而Less不支持。

avatar
文章
阅读
粉丝