笔记_前端基础试题：HTML+CSS-优快云博客

本文链接：https://blog.youkuaiyun.com/html5_mylove/article/details/126415382

本文涵盖前端面试中的HTML和CSS基础试题，包括HTML语义化理解、块级元素与内联元素的区别、盒模型计算、margin重叠处理、BFC概念及应用、浮动布局、Flex布局、定位技巧、响应式设计等方面的知识点，帮助开发者复习和巩固前端基础知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

启动本地服务：http-server

先安装node，然后安装http-server

// 安装http-server
$ npm install -g http-server

启动本地服务

// 启动http-server
$ http-server -p 8888

即可访问：http://localhost:8888/

HTML试题

如何理解HTML语义化？

·让人更容易读懂，增加代码可读性

·让搜索引擎更容易读懂，SEO（Search Engine Optimization，搜索引擎优化）

<h1>标题</h1>
<div>
    <p>文字</p>
    <ul>
        <li>列表</li>
        <li>列表</li>
    </ul>
</div>

默认情况下，哪些HTML标签是块级元素、哪些是内联元素？

·块状元素，display:block/table; 独占一行，有 div、h1、h2、table、ul、ol、p等

·内联元素，display:inline/inline-block; 在一行往后挤，有 span、img、input、button等

CSS试题

布局：盒模型的宽度如何计算？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型的宽度</title>
    <style type="text/css">
        #div1 {
            width: 100px;
            padding: 10px;
            border: 1px solid red;
            margin: 10px;
        }
        #div2 {
            width: 100px;
            padding: 10px;
            border: 1px solid red;
            margin: 10px;
            box-sizing: border-box; 
        }
    </style>
</head>
<body>
    <div id="div1">
        this is div1
    </div>
    <div id="div2">
        this is div2
    </div>
</body>
<script>
    // offsetWidth = 内容宽度 + 内边距 + 边框，无外边距
    console.log(document.getElementById('div1').offsetWidth); // 122
    // 设了box-sizing: border-box 后，offsetWidth = width = 100px，内容宽度为78
    console.log(document.getElementById('div2').offsetWidth); // 100
</script>
</html>

布局：margin纵向重叠的问题

·相邻元素的 margin-top 和 margin-bottom 会发生重叠

·空白内容的<p></p> 也会重叠

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin 纵向重叠</title>
    <!-- 如下代码，问 AAA 和 BBB 之间的距离是多少？ -->
    <!-- 答案：15px -->
    <style type="text/css">
        p {
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <p>AAA</p>
    <p></p>
    <p></p>
    <p></p>
    <p>BBB</p>
</body>
</html>