HTML + CSS 高频面试题

盒模型

CSS盒模型本质是一个盒子，封装周围的HTML元素，包括margin，border，padding，和content。

根据盒子大小的计算方式不同，盒模型分为两种：
1. 标准盒模型：box-sizing: content-box。设置 width 和 height 设置的是 content 的大小。盒子实际的宽度需要加上两边的 border 和 padding。
2. 怪异盒模型（IE盒模型）：box-sizing: border-box。设置 width 和 height 设置的是盒子的大小，如果有 padding 和 border 会压缩 content 区域。

HTML语义化

HTML语义化简单呢来说就是正确的标签做正确的事。给某个内容使用恰当的标签，能使页面拥有良好清晰的结构。

常见的语义化标签：
header、footer、main、h1-h6等。

优点：
1. 在没有 css 的情况下，页面也能呈现出清晰的结构。
2. 有助于SEO和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息。（爬虫是依赖于标签来确定上下文和关键词的权重的。）
3. 增强代码的可读性，方便团队开发和维护。

对浮动的理解

浮动的作用：
1. 对于图片，浮动可以实现文字环绕图片。
2. 对于块级元素，浮动可以使块级元素横向排列。
3. 对于行内元素，浮动可以设置宽度，同时可以对齐排列盒子。

浮动的特点：
浮动会脱离文档流，当父元素不设置高度的时候，需要子元素撑开，而子元素浮动就会导致父元素高度塌陷的问题。

解决塌陷问题：(2, 3, 4也是清除浮动的方法)
1. 给父元素设置高度。
2. 给父元素设置overflow: hidden。
3. 在下方创建一个空白元素，添加样式clear: both。
4. 给父级元素添加伪类::after: {content: '', clear: both, display: table}

样式优先级规则

!import > 行内 > id > class选择器/伪类选择器 > 元素选择器/伪元素

!import： 10000
行内：1000
id选择器：100
class选择器/伪类选择器：10
元素选择器/伪元素：1
继承/通配符：0

CSS尺寸设置单位

共有五个单位，px，rem，em，vw，vh。除了px为绝对单位其余都是相对的。

px: 绝对长度单位。大小取决于屏幕分辨率。
rem: 相对长度，相对于根元素像素。
em: 相对长度，相对于当前元素字体大小的倍数，自己没有设置font-size时相对于父类。
vw: 视口宽度。
vh: 视口高度。

页面有哪些布局方式

1. 静态布局：页面上的所有元素使用px单位。不能根据屏幕尺寸适配，常用于PC端。
2. 百分比布局：页面尺寸使用百分比。计算方式复杂，并且不同屏幕可能样式呈现并不一致。
3. 自适应布局：使用媒体查询给不同尺寸设置不同的样式，屏幕尺寸变化的时候，页面元素也能呈现很好的效果。
4. flex布局：能快速使元素实现垂直水平布局。
5. rem布局：rem是相对于根结点的font-size大小计算的，是一个相对单位。可以快速适用移动端布局。

移动端适配有哪些方案

1. 响应式布局。使用媒体查询，给不同屏幕尺寸写不同的样式。
2. 使用相对单位。rem，vw，vh，百分比等。

对BFC的理解

BFC全称：block Formatting Content，块级格式化上下文。简单来说BFC是页面中的一个隔离的独立容器，让空间里的子元素不会影响到外面的元素布局。

BFC可以解决什么问题：
1. 使用浮动，父元素高度塌陷的问题。（最常见给父元素设置：overflow: hidden)
2. 解决上下相邻两个元素外边距折叠。（可以给其中一个元素加上display: inline-block)

怎样触发BFC：
* 浮动
* overflow: hidden
* disply: flex / inline-block
* position: absolute / fixed

元素水平垂直居中方法

1. 绝对定位：position: absolute; left: -50%; top: -50%; transform: translate(-50%, -50%)
2. flex布局：display: flex; align-items: center; justify-content: center
3. table-cell：父元素{ display: table-cell; vertical-align: middle; text-align: center }，子元素{ display: inline-block }。
4. display: grid网格布局（和flex布局类似，只是把 display: flex 改为 display: grid。兼容性ie10以上。）

三栏布局实现方案

三栏布局是什么：两端固定，中间自适应。

方案：
1. flex布局：display:flex，左右定宽，中间flex:1
2. 绝对定位：两边定宽分别定位到两边，中间宽度100%-两边宽度，中间margin-left: 左边宽度。
3. 圣杯布局：
利用浮动和负边距来实现。父元素设置左右padding，中间内容元素需要放在前面。三列都设置float: left。再给左边元素margin-left: -100%，右边元素margin-left: 负数元素宽度，再利用相对定位定位到两边。（需要注意的是，当中间宽度小于两边宽度时，布局会错乱，双飞翼没有这个问题）

<div class="father">
  <div class="main col"></div>
  <div class="left col"></div>
  <div class="right col"></div>
</div>

.father{
  padding: 0 120px;				/*对整体div设置内边距，之后将两边div移到内容区以外*/
}
.col{
  float: left;					/*使用浮动，使用margin-left就可以移到上一行*/
  height: 200px;					
  position: relative;             /*采用相对定位，相对自己的位置挪出去*/
}
.left,.right{
    width: 120px;					/*设置两边的宽度*/
}
.left{
  background-color: blue;
  margin-left: -100%;
  right: 120px;					/*把图像的右边缘设置在其包含元素右边缘向左 120 像素的位置*/
}
.right{
  background-color: green;
  margin-left: -120px;
  left: 120px;
}									
.main{
  width: 100%;
  background-color: pink;
}

4. 双飞翼布局：
跟圣杯模式写法类似，左右位置的保留不需要用过父元素padding，给中间元素再加一个子元素加margin预留左右位置。

<div class="father">
  <div class="main col">
    <div style="margin: 0 120px"></div>
  </div>
  <div class="left col"></div>
  <div class="right col"></div>
</div>

.father{
  overflow: hidden; // 去除父元素浮动
}
.col{
  float: left;					/*使用浮动，使用margin-left就可以移到上一行*/
  height: 200px;					
}
.left,.right{
    width: 120px;					/*设置两边的宽度*/
}
.left{
  background-color: blue;
  margin-left: -100%;
}
.right{
  background-color: green;
  margin-left: -120px;
}									
.main{
  width: 100%;
  background-color: pink;
}

分析比较 opacity: 0、visibility: hidden、display: none

结构方面：
display: none：会让元素从渲染树中消失，不占任何空间，不能点击。
visibility: hidden：不会让元素从渲染树中消失，只是内容不可见，仍然占据空间，不能点击。
opacity: 0：不会让元素从渲染树中消失，只是内容不可见，元素继续占据空间，可以点击。

继承：
visibility: hidden：可继承。子孙元素消失是由于继承了visibility: hidden。
opacity: 0、display: none：不可继承。子孙元素消失是由于父元素的消失。

性能：
display: none会造成重排，visibility: hidden和opacity: 0只会造成重绘。

什么是严格模式和混杂模式

严格模式/标准模式：浏览器根据w3c的规范来解析代码；
混杂模式：浏览器根据自己的规范来解析代码(混杂模式会产生一些浏览器兼容问题)。

严格模式和混杂模式区别：
1. 混杂模式可设置行内元素高度，严格模式不行。
2. 混杂模式下设置图片padding会失效。
3. 混杂模式盒模型的宽高包括了padding和border，而W3C标准下设置一个元素的宽高是指content的宽高。

重绘和重排

重排: 当dom元素的尺寸、位置发生改变时，浏览器需要重新计算元素的几何属性，这个过程叫做重排。
重绘：一个元素外观发生变化，但没有改变布局，重新把元素绘制出来的过程。

注意：重排一定会引起重绘，重绘不一定要重排。

如何触发：
重排：调整窗口大小、改变字号、调整元素大小、位置。displya: none
重绘：修改文字颜色，修改背景色，visibility: hidden

src和href的区别

src和href都是HTML中元素的属性，都可以用来引入外部资源。

src：全称source，通常用于img、video、script等元素。当解析到src元素时，会暂停其他资源下载，直至执行完成。这也是js脚本放在底部而不放在头部的原因。

href：是超链接，指向外部资源，通常用于a、link等元素。代码执行到href元素位置时，会并行下载资源，不会暂停其他资源。

img上的title和alt的区别

title：解释性文字，当鼠标悬浮时会显示title内容。
alt：alt是img标签特有的属性，用于图片描述。当图片无法显示时，会展示alt内容，这样用户可以看到丢失了什么内容。

iframe的作用及优缺点

iframe也称做嵌入式框架。可以把一个网页的框架和现有内容嵌入到现有的网页中。

优点：
可以用来处理加载缓慢的内容。比如广告。

缺点：
1. 会产生很多页面，不易管理。
2. 浏览器的后退按钮没有作用。
3. 无法被一些搜索引擎识别。
4. 会阻塞主页面的onload事件。可以通过动态设置iframe的src熟悉解决。

flex:1 1 auto 分别代表什么

flex是一个复合属性，有三个参数分别为：放大比例、缩小比例和宽度。

flex: 0 1 auto：默认值，表示有多余空间时不放大，空间不够时能缩小，长度自适应。
flex: 1 1 auto：简写为flex: auto。表示有空间时放大，空间不够缩小，长度自适应。
flex: 1 1 0：简写为flex: 1。表示有空间放大，空间不够缩小，长度可以为0。