HTML和CSS

1. 元素都有哪些类型：

• 块状元素
  • display:block
  • <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
  • 标签独占一行，可指定宽、高
• 内联元素(又叫行内元素)
  • display:inline
  • <a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
  • 标签在一行内，宽度与高度由内容决定，只有在内容超过HTML的宽度时，才会换行
• 内联块状元素
  • display:inline-block
  • <img>、<input>
  • 同时具备内联元素、块状元素的特点
    • 和其他元素都在一行上
    • 元素的高度、宽度、行高以及顶和底边距都可设置

2. 一个块元素垂直水平绝对居中的方法：

flex布局

.box {
    margin: 50vh auto 0;
    transform: translate(0, -50%);
}

3. css选择器有哪些，选择器的权重的优先级

3.1. 选择器类型

3.2. 权重计算规则

1. 第一等：代表内联样式，如: style=””，权值为1000。
2. 第二等：代表ID选择器，如：#content，权值为0100。
3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6. 继承的样式没有权值。

4. 相对定位和绝对定位的差别：

绝对定位：absolute 和 fixed 统称为绝对定位

absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位， 则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。 脱离后原来的位置相当于是空的，下面的元素会来占据位置。

相对定位：relative

relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中， 元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。

5. 隐藏一个元素的方法：

1. opacity：0将元素本身及其子元素都置为不可见的，而元素本身依然占据它自己的位置并对网页的布局起作用，它会响应用户交互
2. visibility：hidden将元素本身及其子元素都置为不可见的, 而元素本身依然占据它自己的位置并对网页的布局起作用，它不会响应用户交互.如果想让子元素显示，则设置子元素的visibility：visible;
3. display：none使用这个属性，被隐藏的元素对网页的布局不起作用。不仅如此，一旦display设为none任何对该元素直接的用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。
4. position：absolute 将top和left设置成足够大的负数，相当于把元素放到可视区域外，它不会影响布局，能够让元素保持可操作性，在读屏软件上可以被识别。
5. width、hight：设置为0

总结一下：

1. opacity,visibility影响布局，前者不影响交互，后者影响交互；
2. display不影响布局，影响交互；
3. position 不影响布局，不影响交互；

6. H5的新特性有哪些：

1. h5新语义元素（有利于代码可读性和SEO）
2. 本地存储
3. 离线web应用
4. 表单新增功能
5. CSS3
6. 地理定位

H5的新特性