html面试问题

html5新特性

• 语义标签：header，footer，nav，section，aside等
• input输入类型：email，date，url，time等
• 表单属性：placehoder，required，min，max等
• 视频和音频：video和audio
• canvas绘图

为什么要使用语义化标签

• 有利于SEO，利于搜索引擎爬虫更好的理解网页，从而获取更多的有效信息，提升网页的权重。
• 增强可读性，便于团队开发和维护
• 支持多终端设置的浏览器渲染

CSS面试问题

position属性值以及区别

• static：静态定位。元素的位置都不会改变。
• relative：相对定位。相对其初始位置的定位。
• absolute：绝对定位。相对其父元素（除static以外）定位进行定位，父元素无定位，则追溯到祖辈元素，直至body。
• fixed：固定定位。相当于浏览器窗口进行定位。

css权重优先级

• !important最高
• 内联样式，权值为1000
• id选择器，权值为100
• 类选择器、属性选择器、伪类选择器
• 元素选择器、伪元素选择器

选择器顺序

• id选择器（#myid）
• 类选择器（.myclassname）
• 标签选择器（div）
• 子选择器（ul < li）
• 后代选择器（li a）
• 伪类选择器（a:hover）

box-sizing属性

content-box: 元素宽度和高度只应用于内容。标准盒模型 border-box: 元素宽度和高度包括padding和border。ie盒模型 inherit: 继承父元素的box-sizing的值。

盒模型介绍

• css3中的盒模型有标准盒模型及IE盒模型
• 标准盒模型 = width + margin + padding + border
• IE盒模型 = width + margin （width包含padding和border）

BFC（块级格式上下文）

BFC概念

BFC即块级格式上下文。是css布局的一个概念，规定了内部box的布局

BFC原理布局规则

• 容器里面的元素不会在布局上影响到外面的元素
• 块级元素在垂直方向一个接一个排列
• 上下相邻的两个容器margin会重叠

触发BFC条件

• 浮动元素float值不为none时
• 绝对定位元素position值为absolute或fixed时
• 行内块元素display值为inline-block时
• overflow值不为visible时

BFC使用场景

• 去除边距重叠现象
• 清除浮动
• 避免元素被浮动元素覆盖

实现两栏布局（左侧固定+右侧自适应布局）

<div class="layout">
  <div class="left"></div>
  <div class="right"></div>
</div>

• flex布局

.layout {
  height: 500px;
  display: flex;
}
.left {
  width: 300px;
  border: 1px solid #000;
}
.right {
  flex: 1;
  overflow: auto;
  border: 1px solid #000;
}

• 绝对定位

.layout {
  height: 500px;
  position: relative;
}
.left {
  width: 300px;
  height: 100%;
  border: 1px solid #000;
}
.right {
  position: absolute;
  left: 300px;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  border: 1px solid #000;
}

实现三分栏布局(两侧内容固定+中间自适应布局)

<div class="layout">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

• flex布局

.left {
  width: 300px;
  border: 1px solid #000;
}
.center {
  flex: 1;
  border: 1px solid #000;
  overflow: auto;
}
.right {
  width: 300px;
  border: 1px solid #000;
}

水平垂直居中方式

<div class="father">
  <div class="son"></div>
</div>

• 绝对定位

.father {
  width: 100px;
  height: 500px;
  border: 1px solid #000;
  position: relative;
}
.son {
  width: 20px;
  height: 50px;
  border: 1px solid #000;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

• flex布局

.father {
  width: 100px;
  height: 500px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.son {
  width: 20px;
  height: 50px;
  border: 1px solid #000;
}

隐藏页面中某个元素的方法

• opacity：0 元素隐藏，但不会改变页面布局，会触发绑定事件
• visibility：hidden 元素隐藏，但不会改变页面布局，不会触发事件
• display：none 元素隐藏，会改变页面布局。

flex布局

相关属性

flex-direction： 主轴方向（row，column） justify-content： 水平对齐方式 align-items：垂直对齐方式 flex-wrap：换行规则（nowrap， wrap， wrap-reverse） flex-grow：定义放大比例 flex-shrink：定义缩小比例 flex-basis：定义在多余控件内，占据的空间 flex：是flex-grow及flex-shrink及flex-basis的简写，默认是0,1，auto