css要点必知必会

啊哈灵机一动
65 阅读12分钟

1.使用CSS有什么好处？

  • 内容与呈现的分离 - CSS 提供了一种在移动设备、台式机或笔记本电脑上以多种呈现格式呈现相同内容的方法。
  • 易于维护 -高效构建的 CSS 代码，只需进行细微修改即可彻底改变外观和风格。要进行全局更改，只需更改样式，所有网页中的所有元素都会自动更新。
  • 带宽——有效利用，样式表将存储在浏览器缓存中，并且可以在多个页面上使用，而无需再次下载。

2. 如何在 CSS 中指定单位？有哪些不同的方法可以做到？

例如 px、em、pt、百分比（%）。px（像素）提供细粒度控制并保持对齐，因为 1 px 或 1 px 的倍数可以保证看起来很清晰。 px 不是级联。em 保持相对大小。您可以使用响应式字体。em 将级联 1em 等于元素的当前字体大小或浏览器默认值。 如果您将字体大小设置为 16px，则 1em = 16px。通常的做法是将默认正文字体大小设置为 62.5%（等于 10px）。 pt（点）传统上用于印刷。1pt = 1/72 英寸，它是一个固定大小的单位。 %（百分比）设置相对于正文字体大小的字体大小。因此，您必须将正文的字体大小设置为合理的大小。

3. CSS 中的 Box 模型是什么？它包含哪些 CSS 属性？

每个 HTML 元素都被一个矩形框包裹。盒子模型用于确定矩形框的高度和宽度。 CSS 盒子由宽度和高度（如果没有高度，则使用默认值）以及内部内容(content)、内边距 (padding)、边框 (border)、外边距 (margin) 组成。

  • 内容：放置文本或图像的框的实际内容。
  • 填充：内容周围的区域（边框和内容之间的空间）。
  • 边框：填充周围的区域。
  • 边缘：边界周围的区域。

4.CSS 的局限性是什么？

  • 浏览器兼容性：有些样式选择器受支持，有些则不受支持。我们必须使用 @support 选择器来确定哪些样式受支持。
  • 跨浏览器问题：某些选择器在不同的浏览器中表现不同。
  • 没有父选择器：目前，使用 CSS，您无法选择父标签。

5.如何在网页中包含CSS？

  1. 外部样式表：链接到您的 HTML 文档的外部文件：使用链接标签，我们可以将样式表链接到 HTML 页面。 
    <link rel="stylesheet" type="text/css" href="mystyles.css" />
  2. 使用样式标签嵌入 CSS：HTML 页面中包含的一组 CSS 样式。 
    <style type="text/css">

/*Add style rules here*/

</style>

    在开始和结束样式标签之间添加 CSS 规则，并以与在独立样式表文件中完全相同的方式编写 CSS。

  3. 内联样式（CSS 规则直接应用于 HTML 标签内）：可以使用样式标签将样式直接添加到 HTML 元素。 
    <h2 style="color:red;background:black">Inline Style</h2>
  4. 导入样式表文件（将外部文件导入到另一个 CSS 文件中）：另一种添加 CSS 的方法是使用 @import 规则。这是在 CSS 文件中导入一个新的 CSS 文件。 
    @import "path/to/style.css";

6. CSS 中有哪些不同类型的选择器？

  1. 通用选择器：通用选择器的作用类似于通配符，用于选择页面上的所有元素。在给定的示例中，提供的样式将应用于页面上的所有元素。
  2. 元素类型选择器：此选择器匹配一个或多个同名的 HTML 元素。在给定的示例中，提供的样式将应用于页面上的所有 ul 元素。
  3. ID 选择器：此选择器匹配任何具有与选择器相同 ID 属性值的 HTML 元素。在给定的示例中，提供的样式将应用于页面上所有以 ID 为容器的元素。
  4. 类选择器：类选择器还会匹配页面上所有 class 属性设置为与该类相同值的元素。在给定的示例中，提供的样式将应用于页面上所有 ID 为 box 的元素。
  5. 后代组合器：后代选择器，或者更准确地说，后代组合器允许您组合两个或多个选择器，以便您可以更具体地选择方法。
  6. 子组合器：使用子组合器的选择器类似于使用后代组合器的选择器，但它仅针对直接子元素。
  7. 通用兄弟组合器：使用通用兄弟组合器根据兄弟关系匹配元素的选择器。所选元素在 HTML 中彼此相邻。
  8. 相邻兄弟组合器：使用相邻兄弟组合器的选择器使用加号 (+)，与一般兄弟选择器基本相同。区别在于，目标元素必须是直接兄弟元素，而不仅仅是一般兄弟元素。
  9. 属性选择器：属性选择器根据 HTML 属性的存在和/或值来定位元素，并使用方括号声明。

7. 什么是 CSS 预处理器？什么是 Sass、Less 和 Stylus？人们为什么使用它们？

CSS 预处理器是一种工具，用于通过其自身的脚本语言扩展默认原生 CSS 的基本功能。它帮助我们使用复杂的逻辑语法，例如变量、函数、混合宏、代码嵌套和继承等等，从而增强原生 CSS 的性能。

SASS：SASS 是“Syntactically Awesome Style Sheets”的缩写。SASS 可以使用两种不同的语法编写：SASS 和 SCSS。

SASS 与 SCSS 对比

SASS 基于缩进，而 SCSS（Sassy CSS）则不是。 SASS 使用 .sass 扩展名，而 SCSS 使用 .scss 扩展名。 SASS 不使用花括号或分号。SCSS 使用它，就像 CSS 一样。

8.CSS 中的 VH/VW（视口高度/视口宽度）是什么？

这是一个 CSS 单位，用于测量相对于视口的百分比高度和宽度。它主要用于响应式设计技术。VH 等于视口高度的 1/100。如果浏览器高度为 1000px，则 1vh 等于 10px。同样，如果宽度为 1000px，则 1vw 等于 10px。

9. reset 和 normalize CSS 有什么区别？它们有什么不同？

重置 CSS：CSS 重置旨在删除所有内置的浏览器样式。例如，所有元素的边距、填充、字体大小都将重置为相同值。

规范化 CSS：规范化 CSS 旨在使内置的浏览器样式在不同浏览器中保持一致。它还能修复常见浏览器依赖项的错误。

10. inline、inline-block、block 有什么区别？

块元素：块元素总是从新行开始。它们也会占用整行或宽度的空间。块元素列表包括div、p。

内联元素：内联元素不另起一行，它们与旁边的内容和标签显示在同一行。例如，<a>、<span>、<strong> 和 <img> 标签就属于内联元素。

内联块元素：内联块元素与内联元素类似，但它们可以具有填充和边距并设置高度和宽度值

11. 在不同的浏览器中测试网页重要吗？

在网站首次设计或进行重大修改时，在不同的浏览器中测试至关重要。此外，定期重复这些测试也很重要，因为浏览器会经历大量的更新和更改

12.什么是伪元素和伪类？

伪元素允许我们创建文档树中通常不存在的项目，例如::after。

：：前 ：：后 ::首字母 ::第一线 ::选择 ：关联 :访问过 ：徘徊 ：积极的 ：重点

13. margin-top 或 margin-bottom 对内联元素有影响吗？

不会，它不会影响内联元素。内联元素会随页面内容流动。

14. CSS 中的层叠是什么？

“层叠”是指遍历样式声明并定义样式规则的权重或重要性的过程，这有助于浏览器在发生冲突时选择应用哪些规则。这里的冲突是指适用于特定 HTML 元素的多条规则。在这种情况下，我们需要让浏览器知道需要将哪种样式应用于该元素。这可以通过层叠样式声明元素列表来实现。 !important确保在存在其他冲突属性的情况下，该属性具有最大权重

15. 什么属性用于改变字体？

我们可以使用 font-family 属性来实现这一点。该font-family属性用于指定需要在目标 DOM 元素上应用的字体。它可以保存多个字体名称，作为“回退”机制的一部分，以防浏览器不支持这些字体。

16.自适应设计和响应式设计有什么区别？

自适应设计 响应式设计
自适应设计专注于基于多种固定布局尺寸开发网站。 响应式设计专注于根据可用的浏览器空间显示内容。
使用自适应设计开发的网站在桌面浏览器上打开时，首先会检测可用空间，然后选择最合适大小的布局来显示内容。调整浏览器窗口大小不会影响设计。 当在桌面浏览器上打开使用响应式设计开发的网站时，当我们尝试调整浏览器窗口的大小时，网站的内容会动态且最佳地重新排列以适应窗口。
通常，自适应设计使用六种标准屏幕宽度：320 像素、480 像素、760 像素、960 像素、1200 像素、1600 像素。系统会检测这些尺寸并加载相应的布局。 该设计利用 CSS 媒体查询根据目标设备属性改变样式，以适应不同的屏幕。
首先检查最终用户的选择和实际情况，然后为他们设计最佳的适应性解决方案，这需要花费大量的时间和精力。 一般来说，响应式设计需要较少的工作来构建和设计流畅的网站，并根据屏幕尺寸容纳屏幕上的内容。
对设计进行大量控制，以便为特定屏幕开发网站。 这里没有提供太多针对设计的控制。

17.浏览器如何将 CSS 选择器与元素进行匹配？

选择器的匹配顺序按照选择器表达式从右到左的顺序进行。浏览器会根据关键选择器过滤 DOM 中的元素，然后向上遍历父元素以确定匹配项。确定元素的速度取决于选择器链的长度。

18.border-box 和 content-box 有何不同？

content-box是 box-sizing 属性的默认值。height 和 width 属性仅由内容组成，不包括 border 和 padding。 border-box属性包括高度和宽度属性中的内容、填充和边框。

19. CSS3 中如何指定不透明度？

不透明度是指内容透明或不透明的程度。我们可以使用名为 的属性，opacity其取值范围是 0 到 1。0 表示元素完全透明，1 表示元素完全不透明。

20.为什么我们应该在 CSS 中使用浮动属性？

float 属性用于将 HTML 元素水平定位到容器的左侧或右侧。 如果将 float 的值指定为 left，则该元素将放置在容器的左侧。

21.什么是 z-index，它如何发挥作用？

z-index 用于指定元素在定位时发生的垂直堆叠。它指定了元素定位的垂直堆叠顺序，有助于定义元素在重叠情况下的显示方式。

此属性的默认值为 0，可以是正数或负数。除 0 之外，z-index 的值还可以为：

自动：堆栈顺序将设置为与父级相同。 数字：数字可以是正数或负数。它定义堆栈顺序。 初始值：为该属性设置默认值 0。 继承：属性从父级继承。 z-index 值较小的元素堆叠位置比 z-index 值较大的元素堆叠位置低。

22. 以下 CSS 选择器是什么意思？

  • div，p

  • div p

  • div ~ p

  • div + p

  • div > p

  • 1.选择所有 div 元素和所有 p 元素

  • 2.选择 div 元素内的所有 p 元素

  • 3.选择所有以 div 元素的兄弟 p 元素

  • 4.选择所有紧跟在 div 元素之后的 p 元素

  • 5.选择所有以 div 作为直接父元素的 p 元素

23. flexbox 有哪些属性？

flexbox的属性如下：

  • flex-direction：此属性用于定义容器中 flex 元素的堆叠方向。此属性的值可以是
    • row：在弹性容器中从左到右水平堆叠项目。
    • 列：在弹性容器中从上到下垂直堆叠项目。
    • row-reverse：在弹性容器中从右到左水平堆叠项目。
    • column-reverse：在弹性容器中从下到上垂直堆叠项目。
  • flex-wrap：此属性指定弹性项目是否应被包裹。可能的值包括：
    • 包裹：如果需要，弹性项目将会被包裹。
    • nowrap：这是默认值，表示物品不会被包装。
    • wrap-reverse：指定如果需要的话，项目将被包装，但顺序相反。
  • flex-flow：此属性用于在一个语句中设置 flex-direction 和 flex-wrap 属性。
  • justify-content：用于对齐弹性项目。可能的值包括：
    • center：表示所有弹性项目都位于容器的中心。
    • flex-start：此值表示 flex 项目在容器的起始位置对齐。这是默认值。
    • flex-end：此值确保项目在容器的末尾对齐。
    • space-around：此值显示项目之间、之前和周围有空间的项目。
    • space-between：此值显示行与行之间有空格的项目。
  • align-items：用于对齐弹性项目。
  • align-content：用于对齐弹性线。
avatar
文章
阅读
粉丝