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

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

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

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

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

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

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

解析 HTML 文件。浏览器读取 HTML 文件，并解析其中的标签、属性等信息，生成文档对象模型（DOM）。
解析 CSS 文件。浏览器读取 CSS 文件，并解析其中的样式信息，生成层叠样式表（CSSOM）。
将 DOM 和 CSSOM 合并。浏览器将 DOM 和 CSSOM 合并，生成渲染树（render tree），渲染树只包含需要显示的节点以及它们的样式信息。
布局（Layout）。浏览器根据渲染树计算出每个节点在屏幕上的大小和位置，并生成布局（layout）。
绘制（Painting）。根据布局信息，浏览器将渲染树中的节点转化为实际的像素，并绘制到屏幕上，生成绘制（painting）。
合成（Composite）。最后，浏览器将绘制的内容合成（composite）为一幅图像，并显示在屏幕上。

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

请解释 HTML 和 XHTML 的区别？

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

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

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

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

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

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

header：定义网页的头部，通常包括标题和导航菜单等内容。
nav：定义页面的导航部分，包括主菜单和子菜单等内容。
main：定义网页的主要部分，通常包含网页的主要内容。
article：定义一个完整的、独立的文章，可以包含标题、作者和发布时间等信息。
section：定义一个区域，可以用于对网页内容进行分类或分组。
aside：表示网页的侧边栏或附属信息部分，可以包含有关当前主题的相关信息。
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中新增了许多特性，以下列出其中一些：

Flexbox布局：弹性盒子布局，是一种更简单、更灵活的布局方式。
Grid布局：网格布局，可以更精确地控制网页布局和对齐方式。
多列布局：可以将文本分成多列进行排版。
自定义字体：可以使用 @font-face 规则加载自定义字体文件。
动画和过渡效果：可以通过 CSS3 实现更丰富的动画和过渡效果。
渐变色彩：可以使用 Linear Gradient 和 Radial Gradient 等方式实现颜色渐变效果。
媒体查询：可以根据不同的屏幕尺寸自适应调整布局和样式。
选择器的扩展：新增了众多的选择器，如 nth-child、nth-of-type、:not 等。
剪贴路径：可以通过 Clip-path 属性实现任意形状的剪切效果。
变换和旋转：可以通过 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 布局的主要特点包括：

父元素设置 display: flex; 即可使其成为一个 flex 容器，容器内的所有子元素均会自动成为 flex 项目。
每个 flex 项目都有自己的弹性容器，用来控制该项目在容器内的布局。使用 flex 属性可以对弹性容器进行控制，如 flex: 1; 表示该项目可以在剩余空间中填满整个容器。
可以使用 justify-content 和 align-items 属性分别控制 flex 容器的主轴与交叉轴上的对齐方式。
可以使用 flex-direction 属性来控制 flex 项目的排列方向，如 column 表示垂直排列，row 表示水平排列。
通过 flex-wrap 属性可以控制 flex 项目是否换行。
通过 order 属性可以改变 flex 项目的排列顺序，同时还可以使用 flex-grow、flex-shrink 和 flex-basis 等属性对 flex 项目进行调整。

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

HTML5新增了哪些元素？

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

<header>: 定义文档的头部区域。
<footer>：定义文档的底部区域。
<nav>：定义导航链接的区域。
<article>：定义独立的内容块，例如新闻文章或博客帖子。
<section>：定义文档的一个区域，可以包括多个章节。
<aside>：定义文档的侧边栏内容。
<time>：定义时间。
<video>：定义视频。
<audio>：定义音频。
<progress>：定义进度条。

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

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

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

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

内联样式：直接在HTML标签中使用style属性定义样式，如下：
```
<div style="color: red; font-size: 16px;">这是一段红色的文字</div>
```
这种方式的优点是简单快捷，可以快速定义一个特定的元素的样式，但缺点是难以维护和修改，不利于代码的复用。
嵌入式样式：在HTML文件的头部定义style标签，并在其中定义样式，如下：
```
<head>
<style>
div {color: red; font-size: 16px;}
</style>
</head>
<body>
<div>这是一段红色的文字</div>
</body>
```
这种方式将样式和HTML文件分离开来，更好地实现了代码的可维护性和可复用性，但仍然存在代码冗长的问题。
外部样式表：将样式单独放在一个CSS文件中，然后在HTML文件中通过link标签引入，如下：
```
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>这是一段红色的文字</div>
</body>
```
这种方式将样式和HTML文件完全分离，更好地实现了代码的可维护性、可复用性和可扩展性。

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

实现响应式布局的方法

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

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

使用 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新增的特性包括但不限于：

Border-radius：可以制作圆角边框；
Box-shadow：可以为元素添加阴影效果；
Text-shadow：可以为文字添加阴影效果；
Gradients：可以为元素添加渐变背景；
Transitions：可以为元素添加过渡效果；
Transformations：可以为元素添加旋转、缩放、倾斜等效果；
Flexbox：可以更加轻松地进行灵活的布局；
Grids：可以进行网格布局；
Media Queries：可以根据不同的设备尺寸进行响应式设计。

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

定位的属性值有何区别

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

static：默认属性值，元素按照文档流排列，不进行定位。
relative：元素相对于自身原来位置进行移动，不脱离文档流。
absolute：元素相对于离它最近的已经定位的祖先元素（如果有），没有则以body为准进行定位，脱离文档流。
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选择器权重是指在同一规则下存在多个选择器时，浏览器根据选择器的特定等级来决定使用哪个样式。这些等级组合在一起形成一个“权重”，决定了哪个规则应用于给定的元素。一般来说，选择器的权重从高到低排列如下：

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

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

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

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

压缩图片尺寸和质量：在上传图片之前对图片进行压缩，可以减少页面加载时间。可以使用在线压缩工具或者图片编辑工具实现。
使用响应式图片：使用响应式图片可以根据屏幕大小自动调整图片尺寸，从而减少加载时间。
使用缓存和CDN：使用缓存和CDN（内容分发网络）可以将图片缓存至用户本地或者最优的服务器，从而提高图片加载速度。
延迟加载图片：使用延迟加载图片的方法可以使得网页先加载出重要的内容，再加载其他图片，从而提升用户体验。
移除不必要的图片：移除不必要的图片可以减少页面大小，从而加快加载速度。

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

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

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

块级元素特征：

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

行内元素特征：

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

HTML 5中新增加的元素还引进了一个新的类别——“行内块元素”，具有这种特征的标签看起来就像是同时具有行内和块级属性的元素，例如：<i>、<img>、<input>等。此外，我们还可以通过使用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。

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

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

display: flex; 设置元素为弹性盒子容器。
flex-direction: row/column; 设置主轴方向，即弹性盒子的排布方向。
justify-content: flex-start/flex-end/center/space-between/space-around; 设置主轴上的对齐方式。
align-items: flex-start/flex-end/center/baseline/stretch; 设置交叉轴上的对齐方式。
flex-wrap:nowrap/wrap/wrap-reverse; 控制弹性盒子是否可以换行。
flex-flow: <‘flex-direction’> || <‘flex-wrap’>; 等价于同时设置flex-direction和flex-wrap。
align-content: flex-start/flex-end/center/space-between/space-around/stretch; 当弹性盒子容器内的多个行（行内元素）交叉轴上的空间总和大于容器的高度时，可以通过该属性设置每行之间的对齐方式。

怎么实现标签的禁用

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

在HTML中添加disabled属性

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

<input type="text" name="username" 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布局的原理基于以下几个概念：

弹性容器（Flex Container）：包含了一组弹性子元素的父元素，通过设置display属性为flex或inline-flex来创建。
弹性子元素（Flex Item）：容器内布局的基本单位，每个子元素被分配一个flexible length，通过flex属性（默认值为0）指定弹性子元素的伸缩性。
主轴（Main Axis）：弹性容器的主要方向，可以是水平方向（row）或垂直方向（column）。
交叉轴（Cross Axis）：弹性容器的次要方向，与主轴垂直。
弹性盒模型：定义了弹性容器和弹性子元素的排列方式和尺寸计算规则，包括了主轴和交叉轴上的对齐方式、间隙等特性。
弹性容器的大小与子元素的大小没有固定关系，由弹性盒模型计算得出。

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

Px与em、rem的区别

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

Px（像素）：像素是屏幕上显示的基本单位，它指的是显示设备上的一个点。Px是一种绝对单位，它的大小是固定的，不会随着屏幕的缩放而变化。因此，在设计中使用Px可以确保字体大小或者元素大小的一致性。
em：em是相对单位，它的大小取决于它的父元素字体的大小。例如，如果在一个14像素的段落中定义一个2em的字体大小，那么这个字体将会是28像素。em通常用于定义相对大小而不是绝对大小。
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开发中常见的问题，以下是一些常见的兼容性问题：

不同浏览器之间的盒模型差异：在IE盒模型中，宽度和高度包括了边框和内边距；而在标准盒模型中，宽度和高度只包括内容。
浏览器对CSS选择器支持的差异：CSS选择器有不同的优先级和支持度，在不同的浏览器中，可能会出现选择器无法识别的情况。
不同浏览器对CSS属性的支持度：一些CSS属性在不同的浏览器中可能有不同的实现方式，导致网页在不同的浏览器中显示不一致。
字体渲染差异：不同的浏览器可能采用不同的字体渲染方式，导致字体显示效果不同。
不同浏览器的默认样式不同：每个浏览器都有自己的默认样式，可能会影响网页的布局和显示效果。
CSS3特性的支持度问题：CSS3新增的一些属性和特性在不同的浏览器中的支持度可能不同，可能需要使用厂商前缀或者Polyfill来实现。

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

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

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

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

<div class="container"><div class="left">左边栏</div><div class="main">中间栏</div><div class="right">右边栏</div>
</div>

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 html>

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

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

怎么通过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; }