前端面试-HTML+CSS中的重点

一、对HTML语义化的理解？

简单来说，就是用恰当的标签标记内容。

优点： 1、对机器友好，有利于SEO

            2、对开发者友好，增强了可读性，结构更加清晰，便于团队开发与维护。

常见的语义化标签：

<header></header>   头部
<nav></nav>   导航栏
<main></main>  主要内容
<section></section> 区块(有语义化的div)
<article></article>  主要内容
<aside></aside> 侧边栏
<footer></footer> 底部

二、什么是BFC? 如何触发？

概念： BFC意为块级格式化上下文（Block Formatting Context）。目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。

特点： 

• 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
• BFC的区域不会与float的元素区域重叠
• 内部的盒子会在垂直方向上一个接一个的放置
• 计算BFC的高度时，浮动子元素也参与计算

如何触发？

• 设置overflow值不为 visible，为 auto、scroll、hidden
• display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
• position的值为absolute或fixed

应用场景：

1. 解决margin重叠的问题

/* 原先margin会发生重叠的代码, 对于同一个BFC的俩个相邻的盒子的margin会发生重叠 */
<p class="p1">我是暗裔</p>
<p class="p2">剑魔</p>


<style>
.p1 {
   margin-bottom: 20px;
}

.p2 {
   margin-top: 15px;
}

</style>


/* 解决margin重叠的代码，给另一个p元素设置在另一个BFC中 */
<p class="p1">我是暗裔</p>
<div class="wrap">
  <p class="p2">剑魔</p>
</div>


<style>
.p1 {
   margin-bottom: 20px;
}

.p2 {
   margin-top: 15px;
}

.wrap {
  overflow: hidden;
}

</style>

2. 用于清除浮动，触发父元素为BFC，使其不影响外部布局。

三、offsetHeight 、clientHeight、scrollHeight的区别？

offsetHeight、offsetHeight： border + padding + content

clientHeight、clientwidth： padding + content

scrollHeght、scrollWidth： padding + 实际内容尺寸

示例代码：scrollWidth/scrollHeight

.container {
   padding: 40px;
   height: 90px;
   width: 300px;
   overflow: scroll;
}

.box3 {
  width: 600px;
  height: 500px;
  border: 5px solid #333;
  background-color: yellowgreen;
  padding: 10px;
}

<div class="container">
   <div class="box3"></div>
</div>


const c = document.querySelector(".container");
console.log(c.scrollHeight, c.scrollWidth, "ccc"); // 610 , 710

scrollHeight = 500 + 10 + 20 + 80 = 610 = 子元素实际高度 + 父元素的上下padding
scrollWidth = 600+ 10 + 20 + 80 = 710 = 子元素实际宽度 + 父元素的左右padding