「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」。

HTML

如何理解HTML语义化？

什么是语义化？

语义化就是正确的标签做正确的事情，表达正确的意思。

语义化作用

让人更容易读懂（增加代码可读性）
让搜索引擎更容易读懂（SEO搜索引擎优化)。

<div>标题</div>
<div>
  <div>一段文字</div>
  <div>
    <div>列表1</div>
    <div>列表2</div>
  </div>
</div>

<h1>标题</h1>
<div>
  <p>一段文字</p>
  <ul>
    <li>列表1</li>
    <li>列表2</li>
  </ul>
</div>

其他语义化标签举例：<header>、<nav>、<aside>、<section>、<footer>

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

块状元素（独占一行）
- display: block/table，有<div>、<h1>、<h2>、<table>、<ul>、<ol>、<p>等
内联元素（不独占一行）
- display: inline/inline-block，有<span>、<img>、<input>、<button>等

CSS

盒模型的宽度如何计算

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

<style>
  #div1 {
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px;
  }
</style>

<div id="div1"></div>

在这里插入图片描述

offsetWidth = (内容宽度 + 内边距 + 边框)，无外边距
因此答案是122px

如果让`offsetWidth = 100px`该怎么做？

CSS中的box-sizing属性定义了应该的如何计算一个元素的总宽度和总高度
- content-box是默认值。如果设置一个元素的宽为100px，那么这个元素的内容区(content)会有100px，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
- border-box告诉浏览器：想要设置的边框和内边距的值是包含在width内的。因此在样式中加上box-sizing: border-box;即可。

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

在这里插入图片描述

margin纵向重叠的问题

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

<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>

p {
  font-size: 16px;
  line-height: 1;
  margin-top: 10px;
  margin-bottom: 15px;
}

相邻元素的margin-top和margin-bottom会发生重叠
空白内容的<p></p>也会重叠
答案：15px

扩展阅读：边距重叠与BFC

margin负值的问题

`margin-top`、`margin-right`、`margin-bottom`、`margin-left`分别设置负值会怎么样？

margin-top负值，元素向上移动
margin-left负值，元素向左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值，下方元素上移，自身不受影响

在线演示参见codepen.io/bellazzzzz/…

<body>
  <p>用于测试 margin top bottom 的负数情况</p>
  <div class="container">
    <div class="item border-blue">
      this is item 1
    </div>
    <div class="item border-red">
      this is item 2
    </div>
  </div>

  <p>用于测试 margin left right 的负数情况</p>
  <div class="container clearfix">
    <div class="item border-blue float-left">
      this is item 3
    </div>
    <div class="item border-red float-left">
      this is item 4
    </div>
  </div>
</body>

body {
  margin: 20px;
}
.float-left {
  float: left;
}
.clearfix:after {
  /* 清除浮动 */
  content: '';
  display: table;
  clear: both;
}
.container {
  border: 1px solid #ccc;
  padding: 10px;
}
.container .item {
  width: 100px;
  height: 100px;
}
.container .border-blue {
  border: 1px solid blue;
}
.container .border-red {
  border: 1px solid red;
}
.top {
  margin-top: -20px;
}
.left {
  margin-left: -20px;
}
.bottom {
  margin-bottom: -20px;
}
.right {
  margin-right: -20px;
}

margin负值添加在蓝色框上，初始状态如图一。 margin负值初始状态.png

margin-top负值 & margin-left负值上图top负值下图left负值.png

margin-right负值 & margin-bottom负值上图bottom负值下图right负值.png

BFC的理解和应用

什么是BFC?

Block Format Context，块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件

根元素
float不是none(float的值为left或right)
position是absolute或fixed
overflow不是visible(overflow的值为auto、scroll或hidden)
display是flex、inline-block等

BFC的常见应用

清除浮动
去margin重叠
实现更健壮、更智能的自适应布局

float布局

如何实现圣杯布局和双飞翼布局

圣杯布局和双飞翼布局的目的：

三栏布局，中间一栏最先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应
一般用于PC网页

圣杯布局和双飞翼布局的技术总结：

使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用padding（圣杯布局），一个用margin（双飞翼布局）

圣杯布局步骤：

首先要设置宽度，center自适应，宽度为100%
把center,left,right设置成float:left
footer清除浮动，可以给container创建一个bfc
给父元素container设置padding
left,right设置margin负值
调整，position:relitive,right(当position设置为relative时，right属性指定了元素的右边界离开其正常位置的偏移)

<div id="header">header</div>
<div id="container">
  <div id="center" class="column">center</div>
  <div id="left" class="column">left</div>
  <div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>

#header {
  background-color: grey;
}
#container {
  overflow: hidden;
  padding-left: 200px;
  padding-right: 300px;
}
#container .column {
  float: left;
}
#center {
  width: 100%;
  background-color: yellow;
}
#left {
  position: relative;
  right: 200px;
  width: 200px;
  background-color: red;
  margin-left: -100%;
}
#right {
  width: 300px;
  background-color: blue;
  margin-right: -300px;
}
#footer {
  background-color: grey;
}

截屏2021-11-15 下午10.23.39.png

线上演示链接：codepen.io/bellazzzzz/…

双飞翼布局步骤：

首先要设置宽度，center自适应，宽度为100%
center包裹一层div用于设置margin为两侧挪出位置
把center,left,right设置成float:left
left,right设置margin负值（这里都是margin-left)

<div id="main" class="col">
  <div id="main-wrap">this is main</div>
</div>
<div id="left" class="col">this is left</div>
<div id="right" class="col">this is right</div>

#main {
  width: 100%;
  background-color: yellow;
}
#main-wrap {
  margin: 0 200px 0 200px;
}
#left {
  width: 200px;
  margin-left: -100%;
  background-color: red;
}
#right {
  width: 200px;
  margin-left: -200px;
  background-color: blue;
}
.col {
  float: left;
}

截屏2021-11-15 下午10.43.26.png

在线演示地址：codepen.io/bellazzzzz/…

手写clearfix

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

前端HTML & CSS常见面试题汇总（上）