高效准备前端技术一面：HTML、CSS面试题

如何理解 HTML 语义化？

1. 让人更容易读懂（代码可读性）
2. 有利于搜索引擎优化（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>

默认情况下，哪些 HTML 元素是块级元素，哪些是内联元素（行内元素）？

内联（行内）元素（display:inline）

1. 可以和其他元素处于一行，不用必须另起一行
2. 元素的高度、宽度及顶部和底部边距属性设置无效。(行内元素的 margin-top、margin-bottom 和 padding-top、padding-bottom 属性设置是无效的，但是必须注意的是，对于 padding-top 和 padding-bottom 的设置，从显示效果上来看是增加的，但其实设置是无效的，因为它们没有撑大盒子，并不会对周围的元素产生影响)

<div class="d1">我是块级元素</div>
<span class="s1">我是行内元素</span>

.s1 {
  background-color: red;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 100px;
  padding-bottom: 100px;
}
.d1 {
  background-color: green;
  height: 300px;
  width: 200px;
}

3. 元素的宽度就是它包含的文字、图片的宽度

常见的行级元素有：a、input、span、img、button

img和表单元素是行内块display:inline-block，他们既可以设置宽度高度，也能并排显示

块级元素（display:block）

1. 每个块级元素都是独自占一行，其后的元素也只能另起一行，两个元素不能共用一行。
2. 元素的高度、宽度、行高和顶底边距都是可以设置的。
3. 元素的宽度如果不设置的话，默认为父元素的宽度。

常见的块级元素有 div、p、h1...h6、ol、ul、dl、dt、li、table、form

盒模型宽度的计算

以下概念均不包括margin,因为它不是元素的一部分

offsetWidth/offsetHeight:它们提供了元素的“外部” width/height。或者，换句话说，它的完整大小（包括边框）

scrollWidth/scrollHeight这些属性就像 clientWidth/clientHeight，但它们还包括滚动出（隐藏）的部分

clientWidth/clientHeight:这些属性提供了元素边框内区域的大小。它们包括了 “content width” 和 “padding”，但不包括滚动条宽度（scrollbar:不同的设备和浏览器，滚动条的宽度可能有所不同，chorme 浏览器的滚动条宽带为15px）

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

#div1 {
  width: 100px;
  padding: 10px;
  border: 1px solid red;
  margin: 10px;
}

• 请问 div1 的offsetWidth是多大？

122px

• 如果要让offsetWidth的值等于 100px,怎么做？

给div1添加box-sizing:border-box,让div1变成怪异盒模型。此时盒子的 width=盒子内容的宽度+左右padding+左右 border=offsetWidth=100

margin 纵向重叠问题

<p>aaa</p>
<p></p>
<p></p>
<p></p>
<p>bbb</p>

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

aaa 和 bbb 之间的距离？

• 相邻元素的 margin-top 和 margin-bottom 会发生重叠
• 空白内容的 p 也会重叠
• 所以答案为 15px

margin 负值问题

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

BFC 理解与应用

• 块级格式化上下文
• 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
• 形成 BFC 的条件是？

1. float 的值不是 none
2. positon 的值是 absloute 或者 fixed
3. display 的值是 inline-block,flex,或者 inline-flex
4. overflow的值不是visible

• 应用

1. 清除浮动
2. BFC 可以取消盒子margin 塌陷
3. BFC可以阻止元素被浮动元素覆盖

float 布局：实现圣杯和双飞翼布局

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

技术总结

• 使用float布局
• 两侧使用 margin 负值，以便和中间内容横向重叠
• 防止中间内容被两侧覆盖，一个用 padding一个用 margin

圣杯布局

min-width 就是页面的最小宽度：要想保证该布局效果正常显示，由于两侧都具有固定的宽度，所以需要给定页面一个最小的宽度，但这并不只是简单的 200+150=350px。回想之前 left 使用了 position: relative，所以就意味着在 center 开始的区域，还存在着一个 left 的宽度(“老家留坑”)。所以页面的最小宽度应该设置为 200+150+200=550px

<main>
  <div class="center column">这是中间部分</div>
  <div class="left column">这是左侧部分</div>
  <aside class="right column">这是右侧部分</aside>
</main>

body {
  min-width: 550px;
}
* {
  margin: 0;
  padding: 0;
}
.column {
  text-align: center;
  float: left;
}
.center {
  width: 100%;
  background-color: yellow;
}
.left {
  position: relative;
  width: 200px;
  background-color: #ff1f1f;
  /* 父元素main宽度的100% */
  margin-left: -100%;
  right: 200px;
}
.right {
  width: 150px;
  background-color: blueviolet;
  margin-right: -150px;
}
main {
  overflow: hidden;
  padding-left: 200px;
  padding-right: 150px;
}

双飞翼布局

由于双飞翼布局没有用到 position:relative 进行定位，所以最小页面宽度应该为 200+150=350px。但是当页面宽度缩小到 350px 附近时，会挤占中间栏的宽度，使得其内容被右侧栏覆盖，因此在设置最小页面宽度时，应该适当增加一些宽度以供中间栏使用

<main class="col">
  <div class="main-wrap">这是中间部分</div>
</main>
<div class="left col">这是左侧部分</div>
<div class="right col">这是左侧部分</div>

* {
  margin: 0;
  padding: 0;
}
body {
  min-width: 550px;
}
.col {
  float: left;
}
main {
  width: 100%;
}
.main-wrap {
  margin: 0 150px 0 200px;
  background-color: aqua;
}
.left {
  background-color: red;
  width: 200px;
  margin-left: -100%;
}
.right {
  width: 150px;
  background-color: green;
  margin-left: -150px;
}

float 布局：手写 clearfix

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

flex 布局：实现一个三点骰子

.box {
  width: 200px;
  height: 200px;
  border-radius: 20px;
  border: 2px solid #000;
  display: flex;
  padding: 20px;
  box-sizing: border-box;
  justify-content: space-between;
}
.item {
  width: 50px;
  height: 50px;
  background-color: #000;
  border-radius: 50%;
}
.item:nth-child(2) {
  align-self: center;
}
.item:nth-child(3) {
  align-self: flex-end;
}

<div class="box">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

absloute 和 relative 分别依据什么定位？

• absloute: 依据最近一层的定位元素(absloute,relative,fixed=>body)定位

• relative: 依据自身定位

居中对齐有哪些实现方式？

水平居中

• inline 元素:text-align:center
• block 元素：margin:auto
• absolute 元素：left:50%+margin-left:-宽度的一半

垂直居中

• inline 元素:line-height 的值等于 height 值
• absolute 元素:top:50%+margin-top:-高度的一半 (元素尺寸已知)
• absolute 元素:translate:-50% -50% (元素尺寸未知)
• absolute元素:top=0,left=0,bottom=0,right=0 + margin:auto(元素尺寸未知)
• flex元素:align-items:center+justify-content:center

line-height 如何继承

body {
  font-size: 20px;
  line-height: 200%;
}
p {
  font-size: 16px;
}
/* p的行高为？ */

• 写具体数值，如 30px，则继承该值（比较好理解）
• 写比例，如1.5，则继承该比例（比较好理解） =>20*1.5=24px
• 写百分比，如200%，则继承计算出来的值（考点）=>20*200%=40px

rem

rem 是一个长度单位，

• px,绝对长度单位，最常用
• em,相对长度单位，相对于父元素，不常用
• rem,相对长度单位，相对根元素，常用于响应式布局

/* 1rem等于html元素上字体设置的大小 */
html {
  font-size: 100px;
}
div {
  font-size: 0.16rem;
}

响应式布局的常用方案

media-query,根据不同的屏幕宽度设置根元素font-size

vw/vh

rem 的弊端:"阶梯"性,通俗讲就是 case 太多,适配很麻烦

vh网页视口高度window.innerWidth的 1/100
vw网页视口高度window.innerWidth的 1/100