[html css js ] 面试题

1.父元素和子元素宽高不固定，如何实现水平垂直居中

弹性盒模型

• 父元素设置：display:flex; justify-content:center; align-items:center
• 额外的骚操作：父元素设置弹性盒display:flex; 子元素可以设置margin: auto; 实现垂直水平居中
• 定位属性（position）配合位移属性（transform）
  • 父元素设置：position:relative，
  • 子元素设置：position:absolute; top:50%; left:50%; transform:translate(-50%，-50%)

2. 盒子模型分为几类

• w3C官方盒子(标准盒子)

  盒子的实际宽=content的宽 + 左右margin + 左右padding +左右border
  width=content的宽

• IE怪异盒子模型

  添加box-sizing: border-box
  width=content + border + padding
  盒子的实际宽=width + 左右margin

• 两者区别

  控制盒子模型的计算方式不同
  box-sizing: border-box触发怪异盒子
  box-sizing: conent-box对应标准盒子，是默认值

3. html5有哪些新特性

语义标签（<header> <section> <nav> <article> <footer>）
增强型表单（<datalist>）
Canvas绘图、地理定位、SVG绘图、拖放API、WebWorker、WebStorage、WebSocket

4. CSS 选择符有哪些？优先级算法如何计算？

CSS 选择符有哪些？

1.id选择器（#id）
2.类选择器（.class）
3.标签选择器（div，h1，p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[title]）
9.伪类选择器（a:hover，li:nth-child）

优先级算法如何计算？

!important > 内联样式 > id > class > 标签 > 通配符 > 继承 > 默认

1、内联样式，如: style=””，权值为1000。
2、ID选择器，如：#content，权值为100。
3、类，伪类和属性选择器，如.content，:active , p[name=“age”]权值为10。
4、标签选择器和伪元素选择器，如div ,p，::after 权值为1。
5、通配符、子选择器、相邻选择器等的。如*、>、+,权值为0。
6、继承的样式没有权值。

5. CSS3有哪些新特性？

word-wrap 允许长单词换行到下一行：
text-overflow 文本溢出时如何显示

ellipsis 省略号

text-decoration 文字渲染
text-shadow 文字阴影
gradient 渐变效果
transition 过渡效果 transition-duration：过渡的持续时间
transform 缩放，旋转，移动等变换
animation 动画

6. 简述flex布局

flex弹性布局
存在两根轴：水平的主轴和垂直的侧轴

1. flex-direction：决定主轴的方向
   row（默认值）：主轴为水平方向，起点在左端。
   row-reverse：主轴为水平方向，起点在右端。
   column：主轴为垂直方向，起点在上边。
   column-reverse：主轴为垂直方向，起点在下边。

2. flex-wrap：换行
   nowrap（默认）：不换行。
   wrap：换行，第一行在上方。
   wrap-reverse：换行，第一行在下方。

3. justify-content：主轴对齐方式
   flex-start（默认值）：左对齐
   flex-end：右对齐
   center： 居中
   space-between：两端对齐，项目之间的间隔都相等。
   space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

4. align-items：侧轴对齐方式
   flex-start：侧轴的起点对齐。
   flex-end：侧轴的终点对齐。
   center：侧轴居中。
   baseline: 项目的第一行文字的基线对齐。
   stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

7.css 隐藏元素有哪几种方法？

1.display:none
2.jquery：show(),hide(),toggle()方法就是通过改变display的值来实现变化效果的。
3.visibility:hidden：占位置
4.opacity:0 占位置
5.overflow:hidden
6.position: absolute： 脱离文档流，top:-1000px,left:-9999px

8.BFC（Block Formatting Context） 是什么？应用？

---

参考:
千锋前端面试题