HTML-CSS常见面试题整理！面试题？看这一篇就够了

请解释 HTML、CSS、JavaScript 分别是什么？

HTML是一种标记语言，用于创建网页结构和内容。它定义了不同的标记（或元素）来表示网站中的不同部分，如标题、段落、链接和图像等。HTML 是构建网页的基础。

CSS是一种样式表语言，用于美化网页。它定义了不同的样式规则来控制网页中的元素，如字体、颜色、布局和大小等。CSS 可以为网页带来丰富的视觉效果，使其更加吸引人眼球。

JavaScript是一种脚本语言，用于添加交互性和动态性。它可以在网页上创建动态效果，如弹出窗口、下拉菜单、表单验证等。它还可以通过与服务器进行交互来获取外部数据，并在网页上呈现。JavaScript 支持多种编程范式，包括面向对象和函数式编程。  

请描述浏览器渲染页面的过程？

 浏览器渲染页面的过程主要包括以下几个步骤：

1. 解析 HTML 文件。浏览器读取 HTML 文件，并解析其中的标签、属性等信息，生成文档对象模型（DOM）。

2. 解析 CSS 文件。浏览器读取 CSS 文件，并解析其中的样式信息，生成层叠样式表（CSSOM）。

3. 将 DOM 和 CSSOM 合并。浏览器将 DOM 和 CSSOM 合并，生成渲染树（render tree），渲染树只包含需要显示的节点以及它们的样式信息。

4. 布局（Layout）。浏览器根据渲染树计算出每个节点在屏幕上的大小和位置，并生成布局（layout）。

5. 绘制（Painting）。根据布局信息，浏览器将渲染树中的节点转化为实际的像素，并绘制到屏幕上，生成绘制（painting）。

6. 合成（Composite）。最后，浏览器将绘制的内容合成（composite）为一幅图像，并显示在屏幕上。

以上就是浏览器渲染页面的主要步骤，其中每个步骤都有可能触发回流（reflow）和重绘（repaint）操作，这些操作会影响到页面的性能和用户体验。因此，编写高效的 HTML 和 CSS 代码，减少 DOM 操作和样式变化，可以提高页面的渲染性能。

请解释 HTML 和 XHTML 的区别？

 HTML和XHTML都是用于创建web页面的标记语言，但是它们的语法和一些规则不同。

HTML是一种标记语言，用于创建网页和其他信息，它是一种基于文本的语言，标记包括标签和属性。HTML的语法相对宽松，不强制要求标签和属性使用小写，也不需要严格的标签嵌套。

而XHTML是一种更严格的XML应用，它的语法比HTML更为严格，要求标签和属性必须小写，标签和属性必须完全嵌套，而且必须以正确的顺序出现。XHTML还要求标签必须用符合规范的方式关闭，空标签必须用闭合符号/。

总的来说，XHTML是HTML的升级版本，更严格的语法可以使页面更加规范和清晰，也更容易被搜索引擎识别和索引。但是，它的学习曲线较陡峭，对语法的理解和掌握要求更高。

请解释 HTML5 中新增的语义化标签？

在 HTML5 中，新增了许多语义化标签，这些标签的目的是为了让网页结构更加清晰易懂，让搜索引擎更容易理解、索引和分类网页内容。以下是 HTML5 中常用的语义化标签：

1. header：定义网页的头部，通常包括标题和导航菜单等内容。
2. nav：定义页面的导航部分，包括主菜单和子菜单等内容。
3. main：定义网页的主要部分，通常包含网页的主要内容。
4. article：定义一个完整的、独立的文章，可以包含标题、作者和发布时间等信息。
5. section：定义一个区域，可以用于对网页内容进行分类或分组。
6. aside：表示网页的侧边栏或附属信息部分，可以包含有关当前主题的相关信息。
7. footer：定义网页的底部部分，通常包括版权信息、企业联系方式等内容。

使用这些语义化标签可以提高网页的可访问性和可读性，同时也有助于改善网页在搜索引擎中的排名。  

请描述 CSS 的盒模型？并且解释一下标准盒模型和IE盒模型的不同之处？

 CSS的盒模型定义了一个HTML元素在页面中占据的空间，包括元素的内容、内边距、边框和外边距。

标准盒模型是由W3C定义的，它将元素的宽度和高度计算为内容区域的宽度和高度，而不包括内边距、边框和外边距。因此，如果将元素的宽度和高度设置为100像素，实际上元素的总宽度和高度将是100像素加上内边距和边框的宽度。

IE盒模型是在IE浏览器中实现的一种盒模型，它将元素的宽度和高度计算为内容区域、内边距和边框的宽度之和。因此，如果将元素的宽度和高度设置为100像素，实际上元素的总宽度和高度将是100像素。

两种盒模型的主要区别在于它们如何计算元素的宽度和高度。在标准盒模型下，元素的宽度和高度只包括内容区域，因此在设置元素的宽度和高度时需要考虑内边距和边框的影响。在IE盒模型下，元素的宽度和高度包括了内容区域、内边距和边框的宽度，因此在设置元素的宽度和高度时不需要考虑内边距和边框的影响。

CSS 实现水平垂直居中的几种方法

 1.使用flex布局

将父元素设置为display:flex，然后使用justify-content:center和align-items:center属性来实现水平垂直居中。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

2.使用绝对定位和负margin值

将子元素设置为绝对定位，然后使用top、left、bottom和right属性以及负margin值来实现水平垂直居中。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3.使用table布局

将父元素设置为display:table，然后将子元素设置为display:table-cell和vertical-align:middle属性来实现水平垂直居中。

.parent {
  display: table;
  width: 100%;
  height: 100%;
}

.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

注意：以上三种方式都需要考虑父元素和子元素的宽度和高度，以及浏览器兼容性。

请描述 CSS3 中新增的一些特性？

 CSS3中新增了许多特性，以下列出其中一些：

1. Flexbox布局：弹性盒子布局，是一种更简单、更灵活的布局方式。

2. Grid布局：网格布局，可以更精确地控制网页布局和对齐方式。

3. 多列布局：可以将文本分成多列进行排版。

4. 自定义字体：可以使用 @font-face 规则加载自定义字体文件。

5. 动画和过渡效果：可以通过 CSS3 实现更丰富的动画和过渡效果。

6. 渐变色彩：可以使用 Linear Gradient 和 Radial Gradient 等方式实现颜色渐变效果。

7. 媒体查询：可以根据不同的屏幕尺寸自适应调整布局和样式。

8. 选择器的扩展：新增了众多的选择器，如 nth-child、nth-of-type、:not 等。

9. 剪贴路径：可以通过 Clip-path 属性实现任意形状的剪切效果。

10. 变换和旋转：可以通过 Transform 属性实现元素的变换和旋转。

请说出 CSS 清除浮动的几种方式？

 CSS 清除浮动的几种方式如下：

• 在浮动元素的父级元素中添加 clear: both; 的样式属性；
• 在浮动元素的父级元素中添加 overflow: hidden; 的样式属性；
• 使用伪元素 clearfix（清除浮动）来解决，将伪元素应用到浮动元素的父级元素上，如：

• .clearfix::after {
      content: "";
      display: table;
      clear: both;
  }
  

• 使用绝对定位的方式，将浮动元素的父级元素设为相对定位，再为其添加一个绝对定位元素，如：

.parent {
    position: relative;
}
.parent::after {
    content: "";
    display: block;
    clear: both;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
}

请描述 Flexbox 布局？

 Flexbox（flexible box）布局是一种用于页面布局的 CSS 技术，它主要用来解决在不同分辨率下，放置在页面上的元素出现重叠、无法对齐或者难以控制的问题。

Flexbox 布局的主要特点包括：

1. 父元素设置 display: flex; 即可使其成为一个 flex 容器，容器内的所有子元素均会自动成为 flex 项目。

2. 每个 flex 项目都有自己的弹性容器，用来控制该项目在容器内的布局。使用 flex 属性可以对弹性容器进行控制，如 flex: 1; 表示该项目可以在剩余空间中填满整个容器。

3. 可以使用 justify-content 和 align-items 属性分别控制 flex 容器的主轴与交叉轴上的对齐方式。

4. 可以使用 flex-direction 属性来控制 flex 项目的排列方向，如 column 表示垂直排列，row 表示水平排列。

5. 通过 flex-wrap 属性可以控制 flex 项目是否换行。

6. 通过 order 属性可以改变 flex 项目的排列顺序，同时还可以使用 flex-grow、flex-shrink 和 flex-basis 等属性对 flex 项目进行调整。

Flexbox 布局可以帮助我们更好地控制页面布局，使其更加灵活、自适应，并且写起来也相对简单。

HTML5新增了哪些元素？

HTML5新增了很多元素，其中一些最常用的包括：

1. : 定义文档的头部区域。

2. ：定义文档的底部区域。

3. ：定义导航链接的区域。

4. ：定义独立的内容块，例如新闻文章或博客帖子。

5. ：定义文档的一个区域，可以包括多个章节。

6. ：定义文档的侧边栏内容。

7. ：定义时间。

8. ：定义视频。

9. ：定义音频。

10. ：定义进度条。

这些元素的添加使得文档结构更清晰，也更容易被搜索引擎识别和解析。

CSS有哪三种方式来指定样式？

        内联样式、嵌入式样式和外部样式表 

 内联样式、嵌入式样式和外部样式表都是用于定义网页样式的方式。

1. 内联样式：直接在HTML标签中使用style属性定义样式，如下：

   这是一段红色的文字
   

   这种方式的优点是简单快捷，可以快速定义一个特定的元素的样式，但缺点是难以维护和修改，不利于代码的复用。

2. 嵌入式样式：在HTML文件的头部定义style标签，并在其中定义样式，如下：

   
   
   
   
   这是一段红色的文字
   
   

   这种方式将样式和HTML文件分离开来，更好地实现了代码的可维护性和可复用性，但仍然存在代码冗长的问题。

3. 外部样式表：将样式单独放在一个CSS文件中，然后在HTML文件中通过link标签引入，如下：

   
   
   
   
   这是一段红色的文字
   
   

   这种方式将样式和HTML文件完全分离，更好地实现了代码的可维护性、可复用性和可扩展性。

综上所述，外部样式表最为推荐和常用，尤其是对于大型网站或应用程序，使用外部样式表将更加方便和高效。

实现响应式布局的方法

实现响应式布局的方法可以分为四步：

        使用 viewport meta 标签来设置视口：

        使用 CSS 媒体查询来针对不同的屏幕大小进行样式设置：

/* 当屏幕宽度小于 600 像素时，改变元素样式 */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

        使用相对单位（例如 em 或者 rem）代替像素单位，以保证在不同的屏幕下显示更加一致：

body {
  font-size: 1em;
}

@media (max-width: 600px) {
  body {
    font-size: 0.8em;
  }
}

        使用弹性盒子布局（Flexbox）代替传统的浮动布局来实现更为灵活的布局：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

以上是一些实现响应式布局的方法，具体的实现方式和效果可能会因为页面的具体情况而不同。

网络中使用最多的图片格式有哪些

 网络中使用最多的图片格式包括JPEG、PNG、GIF和BMP等格式。其中，JPEG格式主要用于存储照片和图像，具有高压缩率和高质量的特点；PNG格式主要用于透明和非透明的图像，支持高质量的图像压缩和无损压缩；GIF格式主要用于动态图像，支持动态效果和透明背景；BMP格式则是一种比较老的图像格式，主要用于Windows操作系统。

Css3新增的特性

 CSS3新增的特性包括但不限于：

1. Border-radius：可以制作圆角边框；

2. Box-shadow：可以为元素添加阴影效果；

3. Text-shadow：可以为文字添加阴影效果；

4. Gradients：可以为元素添加渐变背景；

5. Transitions：可以为元素添加过渡效果；

6. Transformations：可以为元素添加旋转、缩放、倾斜等效果；

7. Flexbox：可以更加轻松地进行灵活的布局；

8. Grids：可以进行网格布局；

9. Media Queries：可以根据不同的设备尺寸进行响应式设计。

以上只是CSS3新增的一部分特性，CSS3还有许多其他有用的功能和技巧，您可以自行学习研究。

定位的属性值有何区别

 position定位的属性值有以下几种，它们之间的区别如下：

1. static：默认属性值，元素按照文档流排列，不进行定位。

2. relative：元素相对于自身原来位置进行移动，不脱离文档流。

3. absolute：元素相对于离它最近的已经定位的祖先元素（如果有），没有则以body为准进行定位，脱离文档流。

4. fixed：元素相对于浏览器窗口进行定位，不随滚动条滚动。

通过不同的属性值，可以实现不同的布局效果。 

Border-box与content-box的区别

Border-box和content-box是CSS中盒子模型的两种不同的模式。

content-box是默认的CSS盒子模型，它在计算一个元素的宽度和高度时只考虑内容的尺寸，不计算边框和内边距的尺寸。因此，如果你设置一个元素的宽度为200px，那么你实际上是设置的内容（包括内边距）的宽度为200px，而整个元素实际上比200px宽了内容边距和边框的大小。

Border-box模式下，设置盒子的宽或高值时，不再计算内边距和边框的尺寸，而是把它们计算进去了。也就是说，如果你设置一个元素的宽度为200px，那么你实际上是设置元素的总宽度为200px，包括内容、内边距和边框的尺寸。

总的来说，content-box会让盒子增加内边距和边框的大小，而border-box则会让盒子的大小包括内边距和边框。在实际的开发中，我们可以根据具体情况选择不同的盒子模型，以满足我们的需求。

元素垂直居中

 要将一个元素垂直居中，可以使用以下方法：

        使用flexbox布局。将父元素设置为display:flex，并添加align-items:center属性，即可将子元素垂直居中。

.parent {
  display: flex;
  align-items: center;
}

        使用CSS的transform属性。将元素的位置通过transform属性转换为translateY(-50%)，即可将元素垂直居中。

.element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

        使用CSS的table布局。将父元素设置为display:table，子元素设置为display:table-cell，通过vertical-align:middle将子元素垂直居中。

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

BFC是什么？触发BFC的方法？

 BFC是块级格式化上下文（Block Formatting Context）的缩写。它是Web页面中用于布局和定位块级元素的一种CSS渲染机制。BFC中的元素是在垂直方向上一个个排列的，每个元素占据整个BFC的宽度。BFC在处理浮动元素、清除浮动、防止margin重叠等方面有着重要的作用。BFC可以通过一些CSS属性来触发，例如overflow、float、display、position等。

 触发BFC的方法有以下几种：

1.浮动（float）：可以通过将元素浮动来触发BFC。

2.定位（position）：可以通过将元素设置为position: absolute或position: fixed来触发BFC。

3.块级格式化上下文（block-level formatting context）：某些元素可以触发BFC，例如display: inline-block、display: table-cell、overflow: hidden等。

4.清除浮动（clearfix）：可以通过使用clearfix技巧来触发BFC。

在实际开发中，我们可以根据具体的需求选择合适的方法来触发BFC，以避免出现布局问题。

如何让chrome浏览器显示小于12px的文字

Chrome浏览器的默认最小字号设置为12px，如果您想要显示小于12px的文字，可以通过以下方法实现：

        1.使用CSS中的“font-size”属性将字体大小设置为小于12px。例如：

p {
  font-size: 10px;
}

        使用浏览器缩放功能缩小页面。按下“Ctrl”键并使用鼠标滚轮向下滚动可以缩小页面。缩小页面后，小于12px的文字将会显示。

请注意，过小的字体大小可能会影响可读性和用户体验，建议慎重使用。

        2.使用transform: scale()属性：将元素进行缩小，例如：

  .small-text {
    transform: scale(0.8);
  }

Css选择器有哪些，那些属性可以继承，优先级如何计算？Css3新增的伪类有哪些

   CSS选择器分类：

• 元素选择器
• 类选择器
• ID选择器
• 属性选择器
• 伪类选择器
• 后代选择器
• 相邻兄弟选择器
• 通用选择器
• 子选择器

   CSS属性可以继承的有 ：

• color
• font-family
• font-size
• font-weight
• line-height
• text-align
• visibility

   CSS优先级计算：

   根据以下顺序依次计算：

• !important声明的样式
• 行内样式
• ID选择器
• 类选择器、属性选择器、伪类选择器
• 标签选择器、伪元素选择器
• 通配选择器

   CSS3新增的伪类包括：

• :nth-child(n)
• :nth-of-type(n)
• :last-child
• :first-of-type
• :last-of-type
• :only-child
• :only-of-type
• :not(selector)

Css选择器权重？

CSS选择器权重是指在同一规则下存在多个选择器时，浏览器根据选择器的特定等级来决定使用哪个样式。这些等级组合在一起形成一个“权重”，决定了哪个规则应用于给定的元素。一般来说，选择器的权重从高到低排列如下：

1. 行内样式（即在元素的style属性中指定的样式）- 权重值为1000。
2. ID选择器 - 权重值为100。
3. 类、属性和伪类选择器 - 权重值为10。
4. 元素和伪元素选择器 - 权重值为1。

如果两个选择器具有相同的权重，则后者将覆盖先前的样式。如果两个选择器的特定等级相同，则使用最后声明的样式。如果出现多个选择器的组合，它们的权重将被相加。例如，如果一个规则包含两个类选择器和一个元素选择器，则它们的权重将相加为21（10 + 10 + 1）。

网页中有大量图片加载很慢 你有什么办法进行优化？

以下是一些可以优化网页图片加载速度的方法：

1. 压缩图片尺寸和质量：在上传图片之前对图片进行压缩，可以减少页面加载时间。可以使用在线压缩工具或者图片编辑工具实现。

2. 使用响应式图片：使用响应式图片可以根据屏幕大小自动调整图片尺寸，从而减少加载时间。

3. 使用缓存和CDN：使用缓存和CDN（内容分发网络）可以将图片缓存至用户本地或者最优的服务器，从而提高图片加载速度。

4. 延迟加载图片：使用延迟加载图片的方法可以使得网页先加载出重要的内容，再加载其他图片，从而提升用户体验。

5. 移除不必要的图片：移除不必要的图片可以减少页面大小，从而加快加载速度。

综上所述，以上方法可以帮助优化网页图片加载速度，提升用户体验。

行内元素/块级元素有哪些？

 在 HTML 中，所有的元素都可以分为两类：块级元素和行内元素（也叫内联元素）。

块级元素特征：

• 默认情况下，块级元素会占据其父容器的整个宽度，即它会自动换行，每个块级元素都会从新的一行开始，并且具有一定的垂直间距。
• 常见的块级元素有
  、

  ~

  、

  、

  、

  、
  等。

  行内元素特征：

  • 行内元素不会占满整个容器，而是根据自身内容的大小进行排列，它们位于同一行，并按照顺序从左到右排列。
  • 常见的行内元素有、、、、、、等。

  HTML 5中新增加的元素还引进了一个新的类别——“行内块元素”，具有这种特征的标签看起来就像是同时具有行内和块级属性的元素，例如：、、等。此外，我们还可以通过使用CSS的display属性将一个元素的类型从块级元素转变成行内元素或者行内块元素。

  需要注意的是，HTML元素本身具有的默认类型是不可更改的。如果您需要修改某个元素的显示属性，则应该使用样式表（如CSS）来实现。

  浏览器的标准模式和怪异模式区别？

   浏览器的标准模式和怪异模式主要的区别在于它们处理 HTML 和 CSS 的方式不同。

  标准模式是浏览器按照 W3C 标准渲染 HTML 和 CSS 页面的模式。在标准模式下，浏览器会解析文档类型声明，并根据文档类型声明来确定如何渲染页面。在这种模式下，浏览器会尽量遵循标准，使得页面在不同浏览器中的显示效果一致。

  怪异模式又叫混杂模式或兼容模式，是指浏览器在处理没有文档类型声明或解析错误的 HTML 和 CSS 页面时所采用的模式。在怪异模式下，浏览器的行为可能会与标准不一致，这导致同一份代码在不同浏览器下的显示效果可能会出现差异。

  总的来说，为了确保网站在不同浏览器下的显示效果一致，建议在 HTML 文档头部加上正确的文档类型声明。这样可以让浏览器以标准模式渲染页面，保证页面的正确性和可靠性。

  Margin和padding在什么场合下使用

   Margin和padding都是用来控制元素与周围元素之间的距离，但它们的使用场合略有不同：

  Margin：主要用于控制元素与周围元素之间的间距，我们可以通过设置margin属性来改变元素的位置，可以用于调整页面布局中元素之间的距离，也可以用于实现垂直居中和水平居中等效果。

  Padding：主要用于调整元素的内容与边框之间的距离。我们可以通过设置padding属性来改变元素内容与边框之间的距离，可以用于调整元素的大小，也可以用于调整元素的背景颜色和边框之间的距离。

  Margin和padding都是常用的CSS属性，根据不同的需求进行使用。如果需要控制元素与周围元素之间的距离，使用Margin；如果需要控制元素的内容与边框之间的距离，使用Padding。

  弹性盒子布局属性有那些请简述?

   弹性盒子布局属性主要包括以下几个：

  1. display: flex; 设置元素为弹性盒子容器。

  2. flex-direction: row/column; 设置主轴方向，即弹性盒子的排布方向。

  3. justify-content: flex-start/flex-end/center/space-between/space-around; 设置主轴上的对齐方式。

  4. align-items: flex-start/flex-end/center/baseline/stretch; 设置交叉轴上的对齐方式。

  5. flex-wrap:nowrap/wrap/wrap-reverse; 控制弹性盒子是否可以换行。

  6. flex-flow: <‘flex-direction’> || <‘flex-wrap’>; 等价于同时设置flex-direction和flex-wrap。

  7. align-content: flex-start/flex-end/center/space-between/space-around/stretch; 当弹性盒子容器内的多个行（行内元素）交叉轴上的空间总和大于容器的高度时，可以通过该属性设置每行之间的对齐方式。

  怎么实现标签的禁用

   标签的禁用有多种实现方式，下面列举其中一种：

  1. 在HTML中添加disabled属性

          可以在HTML的标签中添加disabled属性，例如：

          上面的代码中，disabled属性被添加到了input标签中。这样，用户就无法进行输入或者选择操作。在使用时，可以通过JavaScript获取该标签的disabled属性值，根据该属性值判断是否需要禁用。

        2. 通过JavaScript操作标签

          使用JavaScript可以动态地操作标签的属性值，从而实现标签的禁用。例如：

  // 获取文本框节点
  var inputNode = document.getElementsByName("username")[0];
  
  // 禁用文本框
  inputNode.disabled = true;
  

          上述代码中，使用了JavaScript获取了文本框的节点，然后通过设置节点的disabled属性来禁用该文本框。

  值得注意的是，如果使用JavaScript操作标签的禁用状态，需要确保在页面加载完成后操作，否则可能会出现获取不到标签节点的问题。可以将代码放在页面加载完成事件中执行。

  以上就是其中的两种实现方式，可以根据具体需求选择合适的方法。

  Flex布局原理

   Flex布局是一种CSS布局模式，它通过设置容器的display属性为flex或inline-flex来创建一个弹性盒子。Flex布局的原理基于以下几个概念：

  1. 弹性容器（Flex Container）：包含了一组弹性子元素的父元素，通过设置display属性为flex或inline-flex来创建。

  2. 弹性子元素（Flex Item）：容器内布局的基本单位，每个子元素被分配一个flexible length，通过flex属性（默认值为0）指定弹性子元素的伸缩性。

  3. 主轴（Main Axis）：弹性容器的主要方向，可以是水平方向（row）或垂直方向（column）。

  4. 交叉轴（Cross Axis）：弹性容器的次要方向，与主轴垂直。

  5. 弹性盒模型：定义了弹性容器和弹性子元素的排列方式和尺寸计算规则，包括了主轴和交叉轴上的对齐方式、间隙等特性。

  6. 弹性容器的大小与子元素的大小没有固定关系，由弹性盒模型计算得出。

       Flex布局可以实现灵活的布局方式，包括了对齐、分布、排序等多种操作。同时，Flex布局也可以与传统布局方式（如定位、浮动等）结合使用，扩展了CSS布局的功能。

  Px与em、rem的区别

   在网页设计和开发中，Px、em和rem是用于定义字体大小和其他元素大小的单位。它们的主要区别在于它们的基准点和相对性质。

  1. Px（像素）：像素是屏幕上显示的基本单位，它指的是显示设备上的一个点。Px是一种绝对单位，它的大小是固定的，不会随着屏幕的缩放而变化。因此，在设计中使用Px可以确保字体大小或者元素大小的一致性。

  2. em：em是相对单位，它的大小取决于它的父元素字体的大小。例如，如果在一个14像素的段落中定义一个2em的字体大小，那么这个字体将会是28像素。em通常用于定义相对大小而不是绝对大小。

  3. rem：rem是相对单位，它的大小取决于根元素（通常是HTML）的字体大小。与em不同，rem的大小不会随着元素的父元素字体大小的改变而改变。这使得rem成为在响应式设计中定义字体大小和元素大小的理想单位。

  总体来说，Px是一种绝对单位，而em和rem是相对单位。在设计过程中，应该根据需求选择使用不同的单位。

  请简述媒体查询

  媒体查询（Media queries）是一种CSS3技术，用于根据不同设备（如电脑、手机、平板电脑等）的屏幕尺寸、屏幕分辨率、宽度等特征，动态地为网页设置不同的样式。通过媒体查询，可以针对不同的设备显示不同的页面布局、字体大小、图片大小等，从而提高用户体验。媒体查询可以在CSS代码中使用，使用@media关键字定义，在{}中编写样式规则。例如：

  @media screen and (max-width: 768px) {
    /* 在屏幕宽度小于768像素时应用此样式 */
    body {
      font-size: 14px;
    }
  }
  

  此代码将在屏幕宽度小于768像素时将文本字体大小设置为14像素。

  html-css常见的兼容性问题

   HTML和CSS的兼容性问题是Web开发中常见的问题，以下是一些常见的兼容性问题：

  1. 不同浏览器之间的盒模型差异：在IE盒模型中，宽度和高度包括了边框和内边距；而在标准盒模型中，宽度和高度只包括内容。

  2. 浏览器对CSS选择器支持的差异：CSS选择器有不同的优先级和支持度，在不同的浏览器中，可能会出现选择器无法识别的情况。

  3. 不同浏览器对CSS属性的支持度：一些CSS属性在不同的浏览器中可能有不同的实现方式，导致网页在不同的浏览器中显示不一致。

  4. 字体渲染差异：不同的浏览器可能采用不同的字体渲染方式，导致字体显示效果不同。

  5. 不同浏览器的默认样式不同：每个浏览器都有自己的默认样式，可能会影响网页的布局和显示效果。

  6. CSS3特性的支持度问题：CSS3新增的一些属性和特性在不同的浏览器中的支持度可能不同，可能需要使用厂商前缀或者Polyfill来实现。

          针对这些兼容性问题，我们可以采取一些解决方案，例如使用CSS reset来统一不同浏览器的默认样式，使用标准的CSS属性和属性值，优先使用标准布局方法等。         

  三栏布局方式两边固定中间自适应

   可以使用 Flexbox 布局实现三栏布局，具体步骤如下：

  1.在 HTML 中创建一个容器元素，并给容器元素添加一个类名或 id 名称，例如：

  
    
  左边栏
    
  中间栏
    
  右边栏
  
  

  2.在 CSS 中设置容器元素的样式，使其成为一个 Flexbox 容器：

  .container {
    display: flex;
  }
  

  3.为左边栏和右边栏添加固定宽度，并将它们的 flex 属性设置为 none，确保它们不会自动拉伸，例如：

  .left, .right {
    width: 200px;
    flex: none;
  }
  

  4.为中间栏设置 flex-grow 属性，使其自动填充剩余空间：

  .main {
    flex-grow: 1;
  }
  

  完整的 CSS 代码如下：

  .container {
    display: flex;
  }
  
  .left, .right {
    width: 200px;
    flex: none;
  }
  
  .main {
    flex-grow: 1;
  }
  

  Doctype作用

   DOCTYPE 是一种文档类型声明，它告诉浏览器网页使用哪种 HTML 或 XHTML 规范。在 HTML5 中，DOCTYPE 可以简化成以下形式：

  DOCTYPE 的作用主要有以下三点：

  1. 告诉浏览器使用哪个 HTML 版本来解析网页，以便正确渲染页面。
  2. 避免浏览器使用默认的怪异模式，确保网页在不同浏览器中的一致性。
  3. 帮助搜索引擎正确解析网页，并提高网页的搜索排名。

  怎么通过html+css实现一个三角形

   建立一个正方形，宽高都为0，建立边框，让其他三条边框都是透明即可

   
  div { height: 0; border-top: 20px solid pink; border-right: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid transparent; /透明/ width: 0; }

  Rem怎么计算？Rem的缺点？

  1. 概念：rem(font size of the root element)是指相对于根元素html的字体大小的倍数，可以随窗口大小等因素改变而变化。更好的实现响应式设计。

  2. 计算： rem = ？px / 根元素字体大小

  3. 缺点：

  • 有局限性，IE8 及以下版本不支持

  • 对 pc 页面来讲使用次数不多

  • 数据量大：所有的图片、盒子都需要给一个准确的值，才能保证不同机型的适配；

  语义化是什么？为什么？怎么做？

  简单来书：HTML标签语义化来说就是：根据结构化的内容，选择合适的标签。

  那为什么要做到语义化呢？

          【合适的标签】是内容表达的高度概括，这样的话浏览器爬虫或者任何机器在读取HTML时，都能更好地理解，进而解析效率更高。这样带来的好处如下：

                  有利于SEO

                  开发维护体验更好

                  用户体验更好（如使用alt标签用来解释图片信息）

                  更好地accessibility，方便任何设备解析（如盲人阅读器）

  那么如何做到语义化呢？

          具体做法包括：

  1. 使用正确的HTML标签。例如，使用h1标签表示页面主标题，使用p标签表示段落，使用ul标签和li标签表示列表等。

  2. 使用有意义的标签和属性。例如，为图片添加alt属性描述图片内容，为链接添加title属性指明链接目标，为表格添加caption和thead、tbody、tfoot等标签提高表格可读性等。

  3. 避免使用纯样式标签和属性，如font、center、bgcolor等，这些样式应该用CSS来设置。

  4. 尽量不使用无语义的div和span标签，而是使用更具有语义化的标签。

  5. 给网页内容添加结构，例如使用header、nav、main、section、article、aside、footer等标签来划分页面内容。

  总之，语义化是一种编写高质量、高可读性网页的思想和方法，可以提高网站的用户体验和性能，同时也方便了维护和SEO优化。