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: 视口高度。
 

对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;
}