前端面试题---html+css$\color{red}{HTML5有哪些更新}$ 1. 语义化标签 header：定义

$\color{red}{HTML5有哪些更新}$

1. 语义化标签

header：定义文档的页眉（头部）；
nav：定义导航链接的部分；
footer：定义文档或节的页脚（底部）；
article：定义文章内容；
section：定义文档中的节（section、区段）；
aside：定义其所处内容之外的内容（侧边）；
audio：音频
video：视频

2.DOM查询操作

document.querySelector()
document.querySelectorAll()

3. Web存储

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

3.1 localStorage、sessionStorage 和 cookie的共同点

都是保存在浏览器端

3.2 三者的不同点

localStorage 永久有效，除非手动清除；存储大小为5M；同源下才可共享
sessionStorage 仅在当前tab下有效；存储大小为5M；同源下且是同一个会话tab下才可以共享
Cookie在设置的cookie过期时间之前一直有效，如果不设置的话，关闭浏览器的时候会自动清除；存放数据大小为4K左右；与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题；源生的对Cookie的读写操作api并不友好，往往需要借用第三方库操作cookie；

3.3 localStorage、sessionStorage细节

当页面对storage的操作会触发其他页面的storage事件，storage事件是可以跨页面通讯的，可以通过这种机制，实现多个窗口之间的通信。

//url：原始触发storage事件的那个网页的网址。
window.addEventListener('storage', {url, newValue, oldValue, key}=>{});

3.4 cookie的安全

默认情况下，cookie不会带 httpOnly 选项(即为空)，所以默认情况下，客户端是可以通过js代码去访问（包括读取、修改、删除等）这个cookie的。为防止xss攻击，服务端响应头需要给 cookie 设置 httpOnly

4. navigator.geolocation （地理定位）用于定位用户的位置。

$\color{red}{行内、块级元素特点}$

$\color{red}{渐进增强和优雅降级}$

渐进增强：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容

$\color{red}{冒泡和捕获}$

$\color{red}{绑定事件的几种方式}$

$\color{red}{隐藏元素的方法有哪些}$

display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
transform: scale(0,0) ：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

$\color{red}{ transition和animation的区别}$

transition是过度属性，强调过度,设置一个开始关键帧，一个结束关键帧。
animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它可以设置多个关键帧（用@keyframe定义）完成动画。

$\color{red}{ 伪元素和伪类的区别}$

$\color{red}{ 标准盒子模型、IE盒子模型}$

box-sizing: content-box表示标准盒模型（默认值） width = content
box-sizing: border-box表示IE盒模型（怪异盒模型）width = content+padding+border

$\color{red}{ 清除浮动 }$

$\color{red}{各种定位区别}$

$\color{red}{单行、多行文本超出省略号}$

overflow: hidden; // 溢出隐藏 
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行


overflow: hidden; // 溢出隐藏 
text-overflow: ellipsis; // 溢出用省略号显示 
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列 
-webkit-line-clamp:2; // 显示的行数

$\color{red}{CSS3中的transform有哪些属性}$

$\color{red}{CSS布局单位}$

像素px
百分比（%）一般认为子元素的百分比相对于直接父元素。
em 设置自身字体大小的时候是相对于父元素的字体大小的倍数; 在用em设置其他属性单位的时候, 是相对于自身的字体大小的倍数
rem是相对于html的字体大小的倍数
vw/vh 是与视图窗口有关的单位，视窗宽度是100vw，视窗高度是100vh

$\color{red}{两端固定中间自适应、盒子居中等布局}$

$\color{red}{flex布局}$

以下6个属性设置在容器上：

flex-direction 属性决定主轴的方向(row: 默认值 | row-reverse | column | column-reverse)
flex-wrap属性定义，如果一条轴线排不下，如何换行。(nowrap:默认值 | wrap | wrap-reverse)
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。(flex-start:默认值 | flex-end |center | space-between | space-around)
align-items属性定义项目在交叉轴上如何对齐。(stretch:默认值 | flex-start | flex-end | center | baseline)
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

以下6个属性设置在项目上：

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
$\color{red}{flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。}$
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

$\color{red}{实现三角形}$

width: 0; 
height: 0;
border:30px solid;
border-color:pink transparent transparent transparent;

$\color{red}{画一条0.5px的线}$