H5C3面试题

1. H5C3新特性

H5新特性:

1. 拖拽释放是一种常见的特性就是在html5中抓取对象以后在另外一个位置释放,拖放是标准的一部分,任何元素都能够被拖放
2. 自定义属性:data-id
3. 语义化更好的内容标:header nav footer aside article section
4. 音频视频:浏览器不支持自动播放===>在属性中添加autoplay(谷歌浏览器不支持音频自动播放,但是视频支持自动播放)
5. sessionStorage在页面关闭或者关闭窗口时,数据就会消失;localStorage用于长久保存网站的数据,直到手动删除

C3新特性

1. 颜色:新增RGBA,HSLA模式
2. 文字阴影:text-shadow;边框阴影:box-shadow
3. 圆角边框:border-radius
4. 盒子模型:box-sizing
5. 渐变:linear-gradient radial-gradient
6. 过渡:transition可实现属性的转变
7. 自定义动画:animate@keyfrom

2. 如何使一个盒子水平垂直居中

1. 利用定位子绝父相:先移动父盒子的50%(top,left),再移动自身的-50%(transorm:translate(-50%,-50%))
2. 利用display:flex,justify-content;center;align-items:center;

3.如何实现双飞翼(圣杯布局)

1. 利用定位实现两侧固定中间自适应
2. 利用flex实现两侧固定中间自使用
   • 父盒子 设置display:flex
   • 左右盒子设置固定宽高
   • 中间盒子设置flex:1( flex-grow:1、flex-shrink:1、flex-basis:0%)
3. 利用 BFC 块级格式化上下文.实现两侧固定中间自适应

4.盒子模型

盒子模型分为两种:
1.W3C 标准盒子模型(标准盒模型)
2.IE 的标准盒子模型(怪异盒模型)
区别:

1. width 不同:标准盒子模型 width 指的是内容区域,怪异盒子模型 width 指的是内容,边框,内边距总的宽度
2. height 不同:标准盒子 content 的宽度 heright 指的是内容区域,怪异盒子模型 height 指的是内容,边框,内边距总的高度
3. 盒子大小不同:
   标准盒子大小=content+border+padding+margin
   怪异盒子模型大小=content+border+padding+margin
4. 通过属性box-sizing来设置盒子模型的解析模式

box-sizing:content-box  //w3c的标准盒模型
box-sizing:border-box  //IE的怪异盒模型

5.CSS 选择器的权重

! important > 行内样式 >id 选择器 > 类选择器(伪类选择器) > 标签 > 继承 或者 *

6.css单位中px,em,rem的区别

px：绝对单位，页面按精确像素展示
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值
rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算
vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

7. css如何画一个三角形

CSS画三角形实现原理是利用盒子边框完成
用CSS画三角形的步骤是

1. 设置一个盒子
2. 设置四周不同颜色的边框
3. 将盒子宽高设置为0，仅保留边框
4. 得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明

8.有哪几种定位方式,他们的区别是什么?

1. 静态定位(static) :静态定位就是标准流
2. 相对定位:(relative) 1.需要配合方位属性实现移动 2.相对于自己原来的位置进行移动 3.在页面中占位置(没有脱标)
3. 绝对定位:(absolute): 1.需要配合方位属性实现移动 2.默认相对于浏览器可视区进行移动 3.在页面中不占位置(已经脱标)
4. 固定点位(fixed): 1.相对于浏览器窗口进行移动 2.在页面中不占位置(已经脱标)

9.BFC了解

1. BFC(Block Formatting Contenxts):块级格式上下文
   BFC是一种css渲染模式
2. 如何使用BFC(四种方式开启BFC盒子)
   • 有float属性不为none
   • 有overflow属性不是visible
   • position属性不是static和relative
   • display属性是:table-cell、inline-block、table-caption、flex
3. 开启BFC盒子变化
   • 当一个块级盒子触发BFC之后,其内部形成独立环境,在里面做任何事都不会对盒子外部有影响
   • 在一个BFC盒子中,块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列
4. BFC解决哪些问题
   • 清除元素内部浮动
   • 解决盒子margin合并问题(塌陷也可以解决)
   • 实现元素宽度自适应多列布局
     • 右侧盒子自适应宽度的问题(左侧盒子宽度固定,右侧宽度不固定)

10.flexbox布局以及适用场景

• flexbox 是一种布局模型,让网页布局更简单灵活,基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生;给父元素添加 display: flex，子元素可以自动的挤压或拉伸;组成部分有弹性容器 弹性盒子 主轴和侧抽.
• 应用场景:我们通过 flex 布局可以实现元素水平垂直居中以及左右固定,中间自适应;移动端小程序开发都建议使用 flex 布局.

11.清除浮动几种方式

1. 出现浮动的原因及引起的问题?
   浮动将元素排除在普通流之外,即元素脱离文档流,不占据空间,浮动元素碰到包含它的边界或者浮动元素的边界停留
2. 清除浮动的原因:
   (1)子元素浮动后,不占位置,父元素的高度无法被撑开,影响父元素的同级元素
   (2)与浮动元素同级的非浮动元素会跟随其后
   (3)如果不是第一个元素浮动,该元素 之前的元素也需要浮动,否则会影响页面显示的结果
3. 清除浮动的方法
   (1)手动给父元素设置高度
   (2)额外标签法
   (3)双伪元素清除
   (4)单伪元素清楚法
   (5)设置父元素 overflow：hidden