前端面试知识体系（html/CSS篇）_css面试知识体系-优快云博客

本文链接：https://blog.youkuaiyun.com/control_ling/article/details/114841396

本文深入讲解HTML语义化、块级与内联元素的区别、HTML5与CSS3新特性、盒子模型、BFC原理及应用、布局技巧等内容，助力前端开发者提升技能。

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

HTML

1、如何理解HTML语义化?

让人更容易读懂(增加代码可读性)

让搜索引擎更容易读懂( SEO )

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

display: block/table;有div h1 h2 table ul ol p 等

display: inline/inline- block;有span img input button等

3、h5新标签 / 新特性

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素，比如 article、footer、header、nav、section

新的表单控件，比如 calendar、date、time、email、url、search

CSS

CSS3新特性

1. CSS3实现圆角（border-radius），阴影（box-shadow），

2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

4. 增加了更多的CSS选择器多背景 rgba

5. 在CSS3中唯一引入的伪元素是 ::selection.

6. 媒体查询，多栏布局

7. border-image

1、盒子模型的宽度如何计算?

如下代码，请问div1的offsetWidth是多大?

<style>
    #div1 {
        width: 100px;
        padding: 10px;
        border :1px solid #cCC;
        margin: 10px;
    }
</style>
<div id="div1"></div>
<script>
    document.getElementById('div1').offsetWidth
</script>

offsetWidth = (内容宽度+内边距+边框) ，无外边距

答案是122px。

补充:如果让offsetWidth等于100px ,该如何做?

#div1 {
    width: 100px;
    padding: 10px;
    border :1px solid #cCC;
    margin: 10px;
    box-sizing: border-box;
}

2、margin纵向重叠的问题

如下代码，AAA和BBB之间的距离是多少?

<style>
    p {
        font-size: 16px;
        line-height: 1;
        margin-top: