web前端面试题----＞HTML、CSS

一.居中方法

block元素如何居中

1. margin：0 auto；
2. position: absolute;       top: 50%;      left: 50%;        transform: translate(-50%, -50%);
3. flex布局：

对父元素操作  ：     justify-content:center;                   align-items:center;

grid布局：

对父元素操作：place-items：center

inline元素如何居中

text-align:enter;

样式权重：

!important>行内样式>内部样式（id>class（类选择器）>标签选择器的样式）>外部样式

CSS定位属性包括以下几种：

1.静态定位 (position: static)：这是元素的默认定位方式，元素会按照标准流在页面中显示，不能进行方位上的移动。

2.相对定位 (position: relative)：元素相对于自己原来的位置进行移动，原来的位置依旧占有，也就是没有脱离标准流。

3.绝对定位 (position: absolute)：元素相对于非静态定位的父元素进行定位，不占原来的位置（脱离标准流）。如果父元素没有定位就寻找祖父元素；如果祖父元素都没有定位，那就相对浏览器进行移动。

4.固定定位 (position: fixed)：元素只相对于浏览器进行定位移动，在页面中不占位置（已经脱标）。

ES6相比于ES5的优势包括：

1. 块级作用域和常量声明：引入了let和const关键字，用于声明块级作用域的变量和常量。

2. 箭头函数：提供了一种更简洁的函数定义语法，可以更方便地编写匿名函数和处理this指向的问题。

3. 类和模块：引入了class关键字和模块化语法，使得面向对象编程更加简洁和易用。

4. 解构赋值：可以从数组或对象中提取值，并赋给变量或常量。

5. 默认参数和剩余参数：函数可以设置默认参数值，以及接收任意数量的参数。

6. 模板字符串：使用反引号(``)包裹字符串，可以在其中使用变量和表达式，并支持多行字符串。

7. 增强的对象字面量：对象字面量可以直接定义方法和计算属性名。

8. Promise：提供了一种更优雅的处理异

HTML5移除了哪些新元素：

big、center、font

doctype的作用

HTML 5 不基于 SGML，需要doctype 来规范浏览器的行为

DOCTYPE标签是一种标准通用标记语言的文档类型声明

HTML5的新特性：

1.语义化标签：HTML5引入了一系列的语义化标签，如<header>、<footer>、<article>、<nav>等，使得网页结构更加清晰和易于理解。

2.Canvas绘图​：HTML5的<canvas>元素可以用来绘制图形、动画和游戏等交互式内容。

CSS3的新特性：

边框和阴影效果：CSS3引入了一系列的新的边框样式和阴影效果，如圆角边框、阴影效果、边框图片等，使得网页设计更加美观和多样化。

过渡和动画：CSS3允许通过过渡和动画效果来实现元素的平滑过渡和动态效果，如淡入淡出、旋转、缩放等。

块级元素

div、p、h1-h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer

行内元素

span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block

长度单位

1vw等于视窗宽度的1%

1vh等于视窗高度的1%

vw，vh设定的大小只和视窗大小有关

vm 相对于视口的宽度或高度中较小的那个

rem相对于根元素html（网页）的font-size

em参考物是父元素的font-size

图片title属性和alt属性有什么不同：

1.title属性用于提供图像的附加信息，通常以工具提示（tooltip）的形式在鼠标悬停时显示。

2.alt属性用于为图像提供替代文本。

标签的作用主要有以下几个方面：

1.提供页面的元数据信息，如关键词、描述等，有助于搜索引擎了解页面的内容和意图。

2.控制页面在不同设备上的显示方式，提供更好的用户体验。

3.设置页面的字符编码，确保页面的内容正确显示。

4.控制浏览器的行为，如页面的缓存方式、刷新页面等。

父元素塌陷问题

父元素塌陷问题是指当子元素使用浮动或绝对定位时，父元素的高度无法自动适应子元素的高度，导致父元素的高度塌陷或坍塌。

在父元素的样式中添加overflow: hidden;属性，可以触发BFC（块级格式化上下文），使父元素包含浮动的子元素

伪类和伪元素：

伪类：

概念：为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。

​

伪元素：

概念：创建一些不在文档树中的元素，并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。)

注：CSS3 规范中有一部分要求，为了区分伪类和伪元素，伪元素使用两个冒号 (::)， 伪类使用一个冒号 (:)

CSS计算属性

清除浮动的方法有以下几种：