前端知识点总结——CSS

置顶 已于 2022-06-09 15:07:28 修改
阅读量589 收藏 4
点赞数 2
分类专栏： 前端知识点总结 CSS 文章标签： css css3
于 2021-03-30 14:45:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45844049/article/details/115285379
版权
本文详细讲解了CSS选择器的优先级计算、链接样式区别、隐藏元素方法、单位px/em/rem对比、居中定位、定位与层叠、清除浮动、媒体查询、盒模型、BFC、伪类与伪元素、Flex布局、用户交互禁选、纯CSS三角形、动画与布局示例、浏览器解析与初始化、display和visibility的区别，以及常见图片格式和CSS优化策略。
摘要由CSDN通过智能技术生成

文章目录

1. 讲一讲CSS选择器的优先级？

css基本选择器有哪些？

  1. 通配符选择器 * {}
  2. 标签选择器 body,div,p,ul,li {}
  3. id选择器 #name{}
  4. 类选择器（class选择器）.center {}
  5. 后代选择器 .first span{}
  6. 子代选择器 .food>li{}
  7. 内联选择器 <p style=""></p>
  8. !important

权重计算规则：

  1. 第一优先级：无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。
  2. 第一等：内联样式，如：style="color:red;"，权值为1000.（该方法会造成css难以管理，所以不推荐使用）
  3. 第二等：ID选择器，如：#header，权值为0100.
  4. 第三等：类、伪类、属性选择器如：.bar， 权值为0010.
  5. 第四等：标签、伪元素选择器，如：div ::first-line 权值为0001.
  6. 通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000.
  7. 继承的样式没有权值。

css选择器优先级顺序

内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 关系选择器 = 伪元素选择器 > 通配符选择器

哪些属性可以继承？

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

多类选择器和结合元素选择器（补充）

日常开发中我们会碰到css中两个类选择器之间有的有空格，有的没空格。有空格的是后代选择器，那没有空格的是什么呢？

没有空格的选择器有两种：多类选择器和结合元素选择器。

结合元素选择器

元素选择器可以结合类选择器来使用。

p.important {color:red;}

选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。我更想把其解释为：“段落中类名（class属性）为important的元素”，或者“是段落，同时类名也是important的”。

多类选择器

<html>
<head>
<style type="text/css">
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:red;}
</style>
</head>

<body>
<p class="important">This paragraph is very important.</p>
<p class="warning">This is a warning.</p>
<p class="important warning">This paragraph is a very important warning.</p>

<p>This is a paragraph.</p>

<p>...</p>
</body>
</html>

在这里插入图片描述
在 HTML 中，一个标签可能有多个类名（class），每个类名之间用空格分隔。

通过把两个类选择器链接在一起，中间不加空格，仅可以选择同时包含这些类名的元素（类名的顺序不限）。

2. 页面导入样式时，使用link和@import有什么区别？

先看看这两种方式都是如何使用的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 实例1. link标签引入yellow.css，内联样式引入green.css -->
    <link rel="stylesheet" href="yellow.css">
    <style type="text/css">
        @import url("green.css");
    </style>
</head>
<body>
    <div style="width: 50px; height: 50px;"></div>
</body>
</html>

link和@import有什么区别?

  1. 从属关系：link是html的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel(一些)连接属性等；而@import是css的语法，只有导入样式表的作用。
  2. 加载顺序：页面被加载时，link会和html同时被加载；而@import引入的 CSS 将在页面加载完毕后被加载。
  3. 兼容性：link是 HTML 标签，所以不存在兼容性问题；而@import是 CSS2.1 才有的语法，所以只能在 IE5以上 才能识别。
  4. DOM：javascript只能控制dom去改变link标签引入的样式，而@import的样式不是dom可以控制的。
  5. link方式的样式权重高于@import的权重。（如果对权重不是十分了解，可以看我之前的文章）

@import必须写在样式顶部，在html中 <style>@import url(引入的css路径);</style>
这个@import必须要写在style的第一行。

3. 有哪些方式（CSS）可以隐藏页面元素？

透明

  • opacity:0：本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互
  • visibility:hidden: 与上一个方法类似的效果，占据空间，但是不可以交互了

溢出

  • overflow:hidden: 这个只隐藏元素溢出的部分，但是占据空间且不可交互

文档流

  • display:none: 这个是彻底隐藏了元素，元素从文档流中消失，既不占据空间也不交互，也不影响布局

层级

  • z-index:-9999: 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了

欧几里德平面（二维平面）上的缩放

  • transform: scale(0,0): 平面变换，将元素缩放为0，但是依然占据空间，但不可交互

CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。
在这里插入图片描述

scale() 仅适用于在欧几里德平面（二维平面）上的变换。如果需要进行空间中的缩放，必须使用 scale3D() 。

4. px/em/rem的区别？

三者的区别

  • px是固定的像素，是相对于显示器屏幕分辨率而言的，一旦设置了就无法因为适应页面大小而改变。

为了解决px的问题，提出了em。它是相对于当前对象内文本的字体尺寸，若没有设置行内文本的字体尺寸，则使用浏览器默认字体尺寸，一般为16px。

但em使用起来依旧有诸多不便，复杂的嵌套逻辑使得更改了部分元素会产生字体大小变化的连锁反应。

rem是CSS3新增加的相对单位，即root em，是相较于根元素（html)。rem的根据根节点使得计算更清晰。

  • em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局，场景如移动端。em和rem都是由浏览器转换为像素值，具体大小取决于您的设计中的字体大小设置。

em 和 rem 单位之间的区别是浏览器根据谁来转化成px值，理解这种差异是决定何时使用哪个单元的关键。

我们要通过复习 rem 和 em 单位如何工作，来理解em和rem之间的区别。

em 单位如何转换为像素值

当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小，他们转换为像素大小取决于应用在当前元素的字体尺寸。

例如，如果一个 div 有 18px 字体大小，10em 将等同于 180px，即 10 × 18 = 180。
在这里插入图片描述
CSS padding设置为 10em
在这里插入图片描述
计算结果为 180px (或接近它)

rem 单位如何转换为像素值

当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。

例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。
在这里插入图片描述
CSS padding设置为 10rem
在这里插入图片描述
计算结果为160px

重点理解

有一个比较普遍的误解，认为 em 单位是相对于父元素的字体大小。 事实上，根据W3标准 ，它们是相对于使用em单位的元素的字体大小。

父元素的字体大小可以影响 em 值，但这种情况的发生，纯粹是因为继承。 让我们看看为什么以及如何起作用。

em 单位的遗传效果

使用 em 单位存在继承的时候，情况会变得比较棘手，因为每个元素将自动继承其父元素的字体大小。 继承效果只能被明确的字体单位覆盖，比如px,vw

使用 em 单位的元素字体大小根据它们来定。 但该元素可能继承其父元素的字体大小，而父元素又继承其父元素的字体大小，等等。 因此，以 em 为单位的元素字体大小可能会受到其任何父元素的字体大小影响。

再看rem的优点

rem这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

参考：

  • http://caibaojian.com/rem-vs-em.html
  • https://www.runoob.com/w3cnote/px-em-rem-different.html
  • http://caibaojian.com/rem-vs-em.html
  • https://webdesign.tutsplus.com/zh-hans/tutorials/comprehensive-guide-when-to-use-em-vs-rem–cms-23984
  • https://blog.csdn.net/qq_37149252/article/details/106137305
  • https://www.runoob.com/cssref/css-units.html

5. 如何让一个元素水平垂直居中？(方案总结+代码实例)

这个问题讲起来稍长一点，已另开新的文章：如何让一个元素水平垂直居中？(方案总结+代码实例) 超详细！！！！_前端圆圆-CSDN博客 https://blog.csdn.net/weixin_45844049/article/details/115404672

6. CSS的定位方式有哪几种？

篇幅较大，已另开新的文章：CSS的定位方式有哪几种？详解sticky粘性定位！！！_前端圆圆-CSDN博客 https://blog.csdn.net/weixin_45844049/article/details/116195675

7. 如何理解z-index？

z-index 属性指定一个元素的堆叠顺序。

当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。

8. 如何理解层叠上下文？

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸。
在这里插入图片描述
在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。 重要的是，其子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

9. 清除浮动有哪些方法？为什么要清除浮动？

篇幅较大，已另开新的文章：清除浮动有哪些方法？为什么要清除浮动？_前端圆圆-CSDN博客 https://blog.csdn.net/weixin_45844049/article/details/116457271

10. 你对媒体查询的理解？

媒体查询可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。

最简单的媒体查询语法看起来是像这样的：

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

它由以下部分组成：

  • 一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）；
  • 一个媒体表达式，是一个被包含的CSS生效所需的规则或者测试；
  • 一组CSS规则，会在测试通过且媒体类型正确的时候应用。

一个例子：

@media screen and (width: 600px) {
    body {
        color: red;
    }
}

11. 你对盒模型的理解，标准盒模型和怪异盒模型有什么区别？

什么是盒模型？

在这里插入图片描述
盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

标准盒模型和怪异盒模型有什么区别？

我们目前所学习的知识中，以标准盒子模型为准。

标准盒子模型：
在这里插入图片描述
IE盒子模型：

IE盒子模型（怪异盒子模型）
在这里插入图片描述
区别：

标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

标准盒模型声明的元素宽度width = content(宽度)

IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。元素内容的宽度和高度是由已设定的宽度和高度分别减去边框和内边距后得到的。

IE盒模型声明的元素宽度width = content(宽度) + padding(左右宽度) + border(左右宽度)

两者的声明使用：

现代浏览器默认使用W3C的标准盒模型，但是在不少情况下怪异盒模型更好用，于是W3C在css3中加入box-sizing：

box-sizing: content-box // 标准盒模型

box-sizing: border-box // 怪异盒模型

一句话总结就是：

标准盒模型的内容大小就是content的大小，而ie盒模型的大小则是content+padding+border总的大小。

12. 什么是BFC？如何形成？应用场景有哪些？

什么是BFC？

块格式化上下文（Block Formatting Context，BFC），它是一个独立的渲染区域，与区域外部毫不相干。

如何形成BFC?

下列方式会创建块格式化上下文（BFC）：
在这里插入图片描述

应用场景有哪些？

1.防止外边距塌陷
创建新的 BFC 避免两个相邻 <div> 之间的 外边距合并 问题

<!DOCTYPE html>
<html lang="en">

<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>
        .blue,
        .red-inner {
            height: 50px;
            margin: 10px 0;
        }

        .blue {
            background: blue;
        }

        .red-outer {
            /* 通过overflow: hidden创建新的BFC */
            overflow: hidden;

            background: red;
        }
    </style>
</head>

<body>
    <div class="blue"></div>
    <div class="red-outer">
        <div class="red-inner">red inner</div>
    </div>
</body>

</html>

在这里插入图片描述
如果我们取消BFC，注释掉 overflow: hidden; 这行代码

  .red-outer {
      /* 通过overflow: hidden创建新的BFC */
      /* overflow: hidden; */

      background: red;
  }

在这里插入图片描述
从上图可以发现外边距塌陷了，这就是BFC的效果。

2.防止浮动导致父元素高度塌陷

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            border: 10px solid red;
        }

        .inner {
            background: #08BDEB;
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="inner"></div>
    </div>
</body>

</html>

上面的代码效果如下：
在这里插入图片描述
接下来将inner元素设为浮动:

.inner {
    float: left;
    
    background: #08BDEB;
    height: 100px;
    width: 100px;
  }

会产生这样的塌陷效果：
在这里插入图片描述
但如果我们对父元素设置BFC后, 这样的问题就解决了:

.container {
    border: 10px solid red;

	/* 通过overflow: hidden讲父盒子设置为BFC */
    overflow: hidden;
}

在这里插入图片描述
这也是清除浮动的一种方式。

13. 伪类和伪元素的区别是什么？

什么是伪类？

伪类用于定义元素的特殊状态。

例如，它可以用于：

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式

伪类开头为单冒号 ：

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容

伪元素开头为双冒号 ::

::before /* 元素内容前插入新内容 */
::after /* 元素内容之后插入新内容 */
::first-letter /* 文本首字母。常用于对文本首字母设置样式 */
::first-line /* 文本首行。常用于对文本首行设置样式。仅用于块级元素 */
::selection /* 选中的内容。常用于文本 */
::placeholder /* 占位符。用于设置占位符的样式 */

14. 你对flex的理解？

flex（弹性盒子）是一种更为简洁灵活的布局方式。

容器默认存在两根轴：横轴和纵轴。

使用弹性盒子，要在父盒子先设置display:flex。

常用于：

  • 在父内容里面垂直居中一个块内容。
  • 分布对齐的场景等。

经常用到的属性：

1. flex-direction

:) 规定容器中的项目是按行排列还是按列排列
  • row：横向从左到右排列（左对齐），默认的排列方式。
  • row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
  • column：纵向排列。
  • column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

2. justify-content

:) 定义了项目在主轴上的对齐方式
  • flex-start：弹性项目向行头紧挨着填充。这个是默认值。
  • flex-end：弹性项目向行尾紧挨着填充。
  • center：弹性项目居中紧挨着填充。（常用）
  • space-between：弹性项目平均分布在该行上。（常用）
  • space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。

效果图展示：
在这里插入图片描述
3. align-items

:) 定义了项目在“纵轴”上的对齐方式

语法：

align-items: flex-start | flex-end | center | baseline | stretch

各个值解析:

  • flex-start：侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end：侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（常用）

题目： 请用flex实现三栏布局，高度已知，左右栏宽度300px，中间自适应。

用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex值，由于这里其它盒子宽度固定，所以中间栏会自动填充。代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>三栏布局</title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        display: flex;
        /*只设置这一属性就OK*/
    }

    .left {
        background-color: aqua;
        width: 300px;
        height: 100px;
    }

    .center {
        height: 100px;
        background: #f296ff;

        flex: 1;
    }

    .right {
        height: 100px;
        background-color: #6ee28d;
        width: 300px;
    }
</style>

<body>
    <!-- 已知高度，写出三栏布局，左右宽度300px，中间自适应-->
    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>

效果图如下：
在这里插入图片描述
中间的盒子会随着浏览器窗口的放大缩小而变化。

题目：内容宽度等分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>三栏布局</title>
</head>
<style type="text/css">
    .box {
        display: flex;
    }

    .box div {
        flex: 1;
        border: 1px solid red;
    }
</style>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

效果图如下：
在这里插入图片描述
题目：flex: 1 代表什么意思

flex: 1 是 flex: 1 1 0 的缩略形式。

flex 值为 1，这表示每个元素占用空间都是相等的，占用的空间是在设置 padding 和 margin 之后剩余的空间。

15. 禁止用户选中

.unselectable {
    user-select: none;

    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    /*
      Introduced in IE 10.
      See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
    */
    -ms-user-select: none;
 }

16. 纯css手写三角形

宽高设为0，border设置宽度，三边透明transparent ，三角形底部方向设置颜色，就可以实现三角形了

<!DOCTYPE html>
<html lang="en">

<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>
        .triangle {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 50px;
            border-color: transparent transparent red transparent;
        }

        /* 简写版 */
        .triangle2 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-top-color: orange;
        }
    </style>
</head>

<body>
    <div class="triangle"></div>
    ————
    <div class="triangle2"></div>
</body>

</html>

效果图如下：
在这里插入图片描述

17. 了解动画和过渡吗？

CSS 中动画有几种？

两种！一种是过渡动画，一种是关键帧动画。

过度动画只能定义「开始」和「结束」两个状态。

关键帧动画可以定义「多个状态」。

如何写「过渡动画」？

使用 transition 属性即可撰写过渡动画。比如看下面的例子：

<html>
  <body>
    <div class="section">hello</div>
  </body>
</html>

.section{
  width: 100px;
  background-color: black;
  color: white;
  transition: 2s;
}

.section:hover{
  width: 300px;
}

上面代码的含义：

div 在平时状态下宽度为 100 像素，在鼠标悬浮其上的时候，宽度为 300 像素。

但是可以看到，我们通过加入了transition: 2s;这个属性，让宽度的变化不是瞬间完成的，而是在 2s 内逐步完成的。

这就是 transition 动画——也就是我们的过渡动画。
在这里插入图片描述

如何写关键帧动画？

使用 @keyframes 关键字定义动画。

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改 <div> 元素的背景颜色：：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
</style>
</head>
<body>

<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>

<div></div>

</body>
</html>

在这里插入图片描述
我们用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，我们最好定义 0% 和 100% 选择器。

使用关键字动画，需要在指定动画的元素上定义animation-name：动画名称，和animation-duration：动画完成一个周期所花费的时间。

animation-name：动画名称，将声明的动画名称和@keyframes 绑定用来描述动画；

animation-iteration-count：规定动画被播放的次数。默认是 1。animation-iteration-count: infinite;使用值 “infinite” 使动画永远持续下去。

18. 实现圣杯布局和双飞翼布局

篇幅较大，已另开新的文章： css经典布局——圣杯布局和双飞翼布局的实现和理解_前端圆圆-CSDN博客 https://blog.csdn.net/weixin_45844049/article/details/116753970

19. 浏览器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的，为了避免对所有元素进行遍历。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

20. 为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对一些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

21. display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

22. png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

  • png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
  • jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
  • gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果。
  • webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

END. CSS优化、提高性能的方法有哪些？

篇幅较大，已另开新的文章：CSS性能优化总结_前端圆圆-CSDN博客 https://blog.csdn.net/weixin_45844049/article/details/117255283

圆圆01
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
前端面试知识点总结——可自行免费下载
08-01
【前端面试知识点总结】 在前端开发领域，面试中经常涉及一系列关键知识点，这些知识点涵盖了HTML、CSS、JavaScript等核心技术。以下是对部分重要知识点的详细解释： 1. **link vs @import**：`link`用于外部样式...
CSS各种选择器
qq_61716556的博客
12-04 859
CSS是对选中的元素进行渲染。既然是要选中元素，那就需要多种选择器。CSS具有多种选择器，并在CSS标准指定的过程中不断被添加完善。CSS3相对以前版本就新增了很多选择器。 以下为具体选择器介绍： 类选择器 1.在书写html元素时可以为元素取类名。一般格式为：class="具体类名"。 注意： 一个元素可以有多个类名格式为：class="类名1 类名2 类名3"。这里不同类名之间以空格隔开。 多个元素可以具有相同类名。如多个li的class均为"类名n"。 在使用时有几种使用方式 （1）.
CSS - 类选择器: 中间有空格和没有空格的情景
最新发布
weixin_45871977的博客
05-12 118
CSS - 类选择器: 中间有空格和没有空格的情景
标签选择器与类选择器中间是否应该有空格？他们之间的区别有哪些
请叫我二狗哥
04-01 1740
标签选择器和类选择器是CSS中最常用的组合选择器类型，很多时候标签选择器与类选择器之间存在空格，有些时候两者之间又不存在空格，是否存在空格有什么区别呢？ 以下面代码为例： <p class="red"> 1 <a href="http://blog.csdn.net/weimob258616" target="_blank">弹幕猴子</a> ...
使用内部包含关系的组合选择器时，它们之间不能加空格;当使用层次关系的组合选择器时，他们之间要有空格
ccecwg的专栏
08-20 602
function checkUser(){ //检查用户名的函数  alert("OK"); //测试。。。  }  $(document).ready(function(){  $(":text :first").blur(function (){ //当失去焦点触发的事情  /**此处就是我折腾好久的地方。当然我想获得的是用户注册元素，所以我用  * 如上选择器，结
css中两个类选择器之间没有空格形成多类选择器， 有空格形成后代选择器 。
weixin_43404688的博客
06-20 482
2022最新Web前端经典面试试题及答案——CSS篇.docx
07-08
"2022最新Web前端经典面试试题及答案——CSS篇" 本资源摘要信息将对 CSS 相关知识点进行详细的解释和总结。 一、BFC（Block Formatting Context）的理解及作用 BFC 是 Block Formatting Context 的缩写，指的是...
期末前端web大作业——HTML+CSS+JavaScript仿京东购物商城网页制作(7md
08-10
根据给定文件的信息，我们可以总结出以下几个重要的知识点： ### 一、项目背景与目标 - **项目背景**：本项目是一份针对大学期末考核而设计的前端网页制作作业，主要面向的是初学者或大学生，目的是让学生能够通过...
web前端期末大作业 ——电影主题介绍 你好，李焕英 ——html+css+javascript网页设计实例
08-10
### 知识点总结 #### 1. **HTML与CSS基础布局** - **HTML文档结构**: HTML文档由`<!DOCTYPE html>`定义文档类型，`<html>`作为根元素，内部包含`<head>`和`<body>`两个主要部分。`<head>`用于存放文档元数据如`...
CSS选择器
Schrodinge的博客
05-03 162
1.选择器 基本选择器 群组选择器（并集选择器） 交集选择器：多个选择器之间没有空格，表示同时满足多个选择器要求的元素才会被获取到 层次选择器 1.后代选择器：用空格隔开基本选择器，表示后一个选择器是前面的后代 2.子代选择器:用>隔开基本选择器，表示后一个选择器是前面的子代 3.相邻兄弟选择器：E+F:表示获取到E后面的紧跟着的F元素（同级的） 4.兄弟选择器：E~F:...
【前端面试题——CSS篇】
zz130428的博客
03-30 529
正确的标签做正确的事情页面内容结构化无CSS样子时也容易阅读，便于阅读维护和理解便于浏览器、搜索引擎解析。利于爬虫标记、利于SEOhtml语义化标签包括 body, article, nav, aside, section, header, footer, hgroup, 还有 h1-h6 address等。h1拥有最高的权值，在一个页面中最好指使用1个h1来突出你的内容，太多的h1会分散其整个页面的权重，对搜索引擎也是非常的不友好。
前端CSS经典面试题总结
hyqhyqhyqq的博客
05-12 2287
2.1 介绍一 下 CSS 的盒子模型？2.2 css 选择器优先级？2.3 垂直居中几种方式？2.4 简明说一下 CSS link 与 @import 的区别和用法？2.5 rgba和opacity的透明效果有什么不同？2.6 display:none和visibility:hidden的区别？2.7 position的值， relative和absolute分别是相对于谁进行定位的？2.8 画一条0.5px的直线？2.9 calc, support, media各自的含义及用法？
CSS权重规则
qq_27149185的博客
02-23 365
在计算权重之前首先必须有以下基础： 一、样式类型：行间（行内） 样式，内联（内部）样式，（外联）外部样式。 二、选择器的类型：id,class,标签，属性，*，伪类，伪元素，后代选择器，子类选择器，相邻选择器 权重计算规则： 1、第一优先级：无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。（ie6支持上有些bug）。 2、第一等：内联样式，如：sty...
前端面试--css篇（持续更新）
weixin_47964837的博客
04-28 531
CSS面试题
前端CSS学习小总结
qq_51878644的博客
08-06 305
css学习小总结
前端——CSS学习总结
捣蛋龙的博客
04-14 928
CSS 1. css简介 1.1 HTML 的局限性 说起 HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如 表明这是一个大标题， 表明这是一个段落， 表明这儿有一个图片， 表示此处有链接。 很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点：丑。 虽然 HTML 可以做简单的样式，但是带来的是无尽的臃肿和繁琐…… 1.2 CSS-网页的美容师 CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CS
前端基础：CSS总结
时光
04-18 1589
前端基础：CSS总结
前端学习：css总结
he13733625052的博客
11-26 300
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 <html> <head>...</head> <body>...</body> </html> <head>标签用于定义文档的头部，它是所...
详析Web前端CSS基础与选择器应用
Web前端技术--CSS.pptx文档深入讲解了Web前端开发中不可或缺的一部分——层叠样式表(Cascading Style Sheets, CSS)。CSS是用于描述HTML或XML（包括如SVG、MathML等）文档呈现的样式语言，它实现了内容与表现的分离，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值