CSS修炼秘籍（一）CSS作为前端开发的三件套之一，身为一名前端开发者，掌握CSS的核心概念和应用技巧是必不可少的。而且

CSS作为前端开发的三件套之一，身为一名前端开发者，掌握CSS的核心概念和应用技巧是必不可少的。而且在前端面试中也是作为常考题，我们必须了解并且熟悉掌握，狠狠拿捏住。

盒子模型的理解

什么是盒子模型？

盒子模型是浏览器在渲染HTML元素时使用的一种布局模型。它将每个元素表示为一个矩形框，该矩形框由以下四个部分组成：

Content（内容）：元素的实际内容，例如文本、图片等。
Padding（内边距）：围绕内容的空白区域。
Border（边框）：包围内容和内边距的边框。
Margin（外边距）：元素与其他元素之间的外部间距。

盒子模型的原理及分类

标准盒模型（W3C Box Model）：
- 宽度计算：width = content。
- 总宽度：width + padding + border + margin。

在这种模型中，元素的width属性仅指内容区域的宽度，内边距和边框会额外增加元素的总宽度。

IE盒模型（IE Box Model）：
- 宽度计算：width = content + padding + border。
- 总宽度：width + margin。

在这种模型中，width属性包括内容、内边距和边框的宽度，因此总宽度会小于或等于标准盒模型的宽度。

应用场景与切换

在实际开发中，可以根据需求在不同的盒模型之间进行切换。切换盒模型的方法是使用CSS的box-sizing属性：

使用IE盒模型：box-sizing: border-box;。这种模式下，width属性包括内容、内边距和边框，适合实现精确的宽度控制。
使用标准盒模型：box-sizing: content-box;。这是默认设置，width仅包括内容部分，适合传统的布局方式。

CSS中的单位：em、px、rem、vw、vh 的区别

是什么？

这些单位都是CSS中用于设置元素大小、间距、字体等属性的单位。不同的单位可以帮助我们实现更加灵活的布局，尤其是在响应式设计中。

区别

相对单位：
1. em：
  - 相对单位，基于父元素的font-size进行计算。如果父元素的font-size是10px，那么设置1em的宽度或高度等于10px。
  - 使用场景：通常用于字体大小和间距的相对调整，允许子元素根据父元素的大小进行伸缩。
2. rem：
  - 相对单位，基于根元素（通常是<html>元素）的font-size进行计算。浏览器的默认font-size通常是16px，因此1rem通常等于16px。
  - 使用场景：常用于全局统一的响应式设计，确保在整个页面中尺寸的一致性。
3. vw：
  - 相对单位，基于视口（viewport）的宽度。1vw等于视口宽度的1%。
  - 使用场景：适合根据屏幕宽度动态调整元素的大小，常用于全屏布局。
4. vh：
  - 相对单位，基于视口的高度。1vh等于视口高度的1%。
  - 使用场景：适合根据屏幕高度动态调整元素的大小，尤其在全屏设计中很有用。
绝对单位：
1. px：
  - 绝对单位，像素单位。1px代表屏幕上的一个物理像素点。
  - 使用场景：适合需要精确控制的元素，如边框、图标等。在响应式设计中，过度使用px可能导致不灵活的布局。

总的来说：

em和rem是相对单位，但em相对于父元素，rem相对于根元素。
vw和vh相对于视口的宽度和高度，用于响应式布局。
px是绝对单位，适合需要精确控制的场景。

CSS中的选择器与优先级

CSS选择器有哪些？

以下是CSS选择器的常见类型及其示例：

内联样式：
- 直接写在HTML标签中的样式，优先级非常高。
- 例如：<div style="color: red;">这是内联样式</div>。
ID选择器：
- 使用元素的id属性，选择唯一的元素。
- 语法：#idName。
- 例如：<div id="header">Header</div>，CSS规则：#header { color: blue; }。
类选择器：
- 使用元素的class属性，选择多个具有相同类名的元素。
- 语法：.className。
- 例如：<div class="navbar">Navbar</div>，CSS规则：.navbar { color: green; }。
标签选择器：
- 根据HTML标签名选择元素。
- 语法：tagName。
- 例如：<p>段落文字</p>，CSS规则：p { font-size: 16px; }。
后代选择器：
- 选择某元素的所有后代元素。
- 语法：ancestor descendant。
- 例如：<div class="container"><p>段落文字</p></div>，CSS规则：.container p { color: red; }。
子选择器：
- 选择某元素的直接子元素。
- 语法：parent > child。
- 例如：<div class="container"><p>段落文字</p></div>，CSS规则：.container > p { color: blue; }。
兄弟选择器：
- 选择某元素后面的兄弟元素。
- 相邻兄弟选择器语法：element1 + element2。
- 例如：<div class="box"></div><p>段落文字</p>，CSS规则：.box + p { margin-top: 20px; }。
- 一般兄弟选择器语法：element1 ~ element2。
- 例如：<h2>标题</h2><p>段落文字</p><p>另一个段落</p>，CSS规则：h2 ~ p { color: orange; }。
群组选择器：
- 将多个选择器组合在一起，使用相同的样式。
- 语法：selector1, selector2。
- 例如：<h1>标题</h1><h2>子标题</h2>，CSS规则：h1, h2 { font-weight: bold; }。
伪类选择器：
- 选择元素的特定状态。
- 语法：:pseudo-class。
- 例如：<a href="#">链接</a>，CSS规则：a:hover { color: red; }。
伪元素选择器：
- 选择元素的特定部分，或在元素前后插入内容。
- 语法：::pseudo-element。
- 例如：<p>段落文字</p>，CSS规则：p::before { content: "★ "; color: gold; }。
属性选择器：
- 根据元素的属性值进行选择。
- 语法：[attribute]。
- 例如：<input type="text" />，CSS规则：[type="text"] { border: 1px solid #000; }。

选择器的优先级

在CSS中，优先级决定了当多个选择器作用于同一元素时，哪一个选择器的样式会生效。优先级从高到低如下：

!important：最高优先级，强制应用某个样式。
内联样式：
ID选择器：
类选择器、伪类选择器、属性选择器：
后代选择器、子选择器、兄弟选择器：
标签选择器、伪元素选择器：

优先级总结：

选择器类型	示例	描述	优先级权重
内联样式	element	直接写在HTML元素的`style`属性中的样式	1000
ID选择器	#id	选择具有特定ID的元素	100
类选择器	.class	选择具有特定类名的元素	10
属性选择器	[attribute]	选择具有特定属性或属性值的元素	10
伪类和伪元素选择器	:pseudo	选择处于特定状态的元素或添加额外内容	10
元素类型选择器	element	选择特定类型的元素	1
子元素选择器	parent > child	选择作为直接子元素的特定类型元素	1
后代选择器	ancestor descendant	选择某个元素的所有后代元素中匹配的元素	1
相邻兄弟选择器	elem1 + elem2	选择紧接在另一个元素后的元素，两者拥有相同父元素	1
一般同胞选择器	elem1 ~ elem2	选择前面有另一个特定元素的所有元素	1
通用选择器	*	选择所有元素	0

继承属性

某些CSS属性是可以从父元素继承到子元素的。常见的继承属性包括但是不限于：

color：文本颜色。
font-size：字体大小。
font-family：字体类型。
line-height：行高。
text-align：文本对齐方式。

例如：

<div style="color: blue;">
    <p>继承的文本颜色是蓝色。</p>
</div>

在这个例子中，<p>元素会继承父元素<div>的文本颜色为蓝色。

后续

当然还有很多的其他关于css的面试题，后续还会继续分享，毕竟我自己也要哈哈哈哈，