【无标题】2024最新HTML+CSS面试题

江湖二哥

已于 2024-05-22 08:43:39 修改

阅读量999

点赞数 27

文章标签： html css 前端面试

于 2024-05-22 08:38:18 首次发布

本文链接：https://blog.csdn.net/panerchao/article/details/139106923

版权

1.每个HTML文件里面都有一个很重要的东西，Doctype，知道这是干什么的么？

1、Doctype描述了html文档的类型，对不同的Doctype类型，浏览器会使用不同的方法来解析

2、该标签告知浏览器文档所使用的HTML规范。告诉浏览器按照何种规范解析页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>关注江湖二哥</title>
    </head>
    <body>
    </body>
</html>

2.简述一下你对HTML语义化的理解？

1）为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构

2）有利于SEO：利于被搜索引擎收录，更便于搜索引擎的爬虫程序来识别

3）方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页

4）便于项目的开发及维护，使HTML代码更具有可读性

3.href与src的区别

1、href：Hypertext Reference的缩写，超文本引用，它指向一些网络资源，建立和当前元素或者说是本文档的链接关系。在加载它的时候，不会停止对当前文档的处理，浏览器会继续往下走。常用在a、link等标签。

2、src：source的所写，表示的是对资源的引用，它指向的内容会嵌入到当前标签所在的位置。由于src的内容是页面必不可少的一部分，因此浏览器在解析src时会停下来对后续文档的处理，直到src的内容加载完毕。常用在script、img、iframe标签中，我们建议js文件放在HTML文档的最后面。如果js文件放在了head标签中，可以使用window.onload实现js的最后加载。

总结：href用于建立当前页面与引用资源之间的关系（链接），而src则会替换当前标签。遇到href，页面会并行加载后续内容；而src则不同，浏览器需要加载完毕src的内容才会继续往下走。

4.页面导入样式时，使用link和@import有什么区别？

1、从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2、加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3、兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4、DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5.CSS选择器优先级

!important > 内联样式 > ID选择器 > 类选择器（属性选择器、伪类选择器）> 元素选择器（伪元素选择器）> 通配符选择器

6.标准盒模型和IE盒子模型的区别?

首先盒子模型包含四部分内容: margin、border、padding、content

1、W3C标准盒子（content-box）：

在这种盒模型下，我们所说的元素的width ，只包含 content

即盒子总宽度 = width+padding+ border+margin

2、IE盒子（border-box）：

又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。

在这种盒模型下，我们所说的元素的width ，包含了 content + padding + border

所以盒子总宽度=width+ margin

7.CSS margin重叠问题

块级元素的上外边距（ margin-top ）与下外边距（ margin-bottom ）有时会合并为单个外边距，

这样的现象称为 “margin 合并” 。

margin 合并的2 种场景：

1、相邻兄弟元素 margin 合并。

解决办法：

• 设置块状格式化上下文元素（ float/position:absolute等）,或设置其中一个元素的margin

2、父级和第一个 / 最后一个子元素的 margin 合并。

解决办法：

对于 margin-top 合并，可以进行如下操作（满足一个条件即可）：

• 父元素设置为块状格式化上下文元素(float/position:absolute等)；

• 父元素设置 border-top 值；

• 父元素设置 padding-top 值；

8.网页布局有哪几种，有什么区别

静态、自适应、流式、响应式四种网页布局;

静态布局：意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；

自适应布局：就是说你看到的页面，里面元素的位置会变化而大小不会变化；

流式布局：你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

响应式布局：每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

9.position属性和值的含义

position 属性规定元素的定位类型。

值	描述
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
absolute	生成绝对定位的元素，距离最近已经定位的父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
sticky(了解)	粘性定位(而sticky相当于加了一个滚动事件的处理，当页面滚动到相对应的元素上，就会变成固定定位的效果。当滚动到父元素不在可视区域范围内时，定位效果就会消失。)
static	默认值。没有定位，元素出现在正常的流中